Search code examples
androidimageviewandroid-linearlayoutandroid-constraintlayout

Gap between imageviews in Linear Layout that is inside the Constraint layout


I have 2 imageviews in a linear layout inside a constraint layout. There should be no gap between them, but when I run it, on some large devices it shows the gap even though I didnt give any margin or padding between them. The imageviews are with ids onboarding_image and image_line. I linear layout must be between the two guidelines showing images one upon the other without any space should take up whatever the space is left between the guideline in all devices.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe_layer"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/blue1"
    >

    <ImageView
        android:id="@+id/app_tour_group"
        android:layout_width="70dp"
        android:layout_height="9dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/group_1" />
    <RelativeLayout
        android:id="@+id/next_layout"
        android:layout_width="277dp"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/app_tour_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline1">
        <View
            android:id="@+id/app_tour_next"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:background="@drawable/rectangle_2" />

        <TextView
            android:id="@+id/next_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_marginTop="0dp"
            android:gravity="center"
            android:text="NEXT"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </RelativeLayout>

    <TextView
        android:id="@+id/onboarding_title"
        android:layout_width="375dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="TextView"
        android:textColor="#ffffff"
        android:textSize="29sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/onboarding_description"
        android:layout_width="330dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:gravity="center"
        android:text="TextView"
        android:textColor="#50287d"
        android:textSize="17sp"
        android:layout_marginBottom="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/onboarding_title"
        app:layout_constraintBottom_toTopOf="@id/guideline2"/>

    <LinearLayout
        android:layout_width="315dp"
        android:layout_height="0dp"
        android:id="@+id/image_layout"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@id/guideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline2"
        app:layout_constraintVertical_weight="1"
        android:weightSum="417"
        >
        <ImageView
            android:id="@+id/onboarding_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="0dp"
            android:layout_margin="0dp"
            android:layout_marginBottom="-8dip"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"
            android:layout_weight="414"

            />

        <ImageView
            android:id="@+id/image_line"
            android:layout_width="wrap_content"
            android:layout_weight="3"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:layout_gravity="center"
            android:padding="0dp"
            android:layout_margin="0dp"
            android:layout_marginTop="-8dip"
            app:srcCompat="@drawable/line"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"/>

    </LinearLayout>



    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.88"
        app:layout_constraintBottom_toTopOf="@+id/next_layout"
        app:layout_constraintTop_toBottomOf="@+id/image_layout"/>
    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.245"
        app:layout_constraintBottom_toTopOf="@+id/image_layout"
        app:layout_constraintTop_toBottomOf="@+id/onboarding_description"
        />
</android.support.constraint.ConstraintLayout>

Solution

  • You say: I didn't give any margin or padding between them.

    However, I can see android:layout_marginBottom="-8dip". I know you are setting also android:layout_marginTop="-8dip" to the other image. It's a little weird.

    If you want to make your Images fill all the contents, use:

    android:scaleType="fitxy"
    

    or

    android:scaleType="centerCrop"
    

    in both images