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>
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