Search code examples
javaandroidandroid-imageviewandroid-constraintlayout

how to set multiple ImageViews in a row in Constraint Layout?

I am trying to recreate this Layout with ImageViews instead of buttons.

This is what I had so far when using buttons:

enter image description here

The buttons were all in a row and with equal distance to each other.

Thats the old xml code btw (only the buttons):

<Button
    android:id="@+id/btnOneXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:layout_marginBottom="36dp"
    android:text="Back"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnTwoXXX"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

<Button
    android:id="@+id/btnTwoXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Home"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnThreeXXX"
    app:layout_constraintStart_toEndOf="@id/btnOneXXX"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

<Button
    android:id="@+id/btnThreeXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Like"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnFourXXX"
    app:layout_constraintStart_toEndOf="@id/btnTwoXXX"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

<Button
    android:id="@+id/btnFourXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Next"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/btnThreeXXX"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

I tried to recreate this using ImageViews. This is how it looks so far:

enter image description here

I kept the xml code nearly the same, as I only changed the view element.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginLeft="32dp"
    android:layout_marginEnd="48dp"
    android:layout_marginRight="48dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/back" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="48dp"
    android:layout_marginLeft="48dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageView3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/home" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="55dp"
    android:layout_marginLeft="55dp"
    android:layout_marginEnd="20dp"
    android:layout_marginRight="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageView4"
    app:layout_constraintStart_toEndOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/emptyheart" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="60dp"
    android:layout_marginRight="60dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView3"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/next" />

As you can see, the buttons positions are messed up and not in equal distance. I am new to using ConstraintLayout. Can anyone help me on that and explain to me why my code doesn't work as expected and how to solve it? Thanks for all answers.

Solution

  • Well, those margins were messing up the positions. I simply get rid of the margins in every ImageView and now they are aligned perfectly.