Is this design possible with ConstraintLayout?

Question

I was playing around with ConstraintLayout and I can't guess how to do this simple design using only a ConstraintLayout.

Simple design

1. Each TextView is centered with its image.
2. Each image is separated with the previous image with a fixed margin.
3. All views, treated like a group, are centered horizontally.

I have implemented the design using RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="4dp">

        <RelativeLayout
            android:id="@+id/androidALayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/androidAIV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher"
                android:layout_centerHorizontal="true"/>

            <TextView
                android:id="@+id/androidATV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android A"
                android:layout_below="@id/androidAIV"
                android:layout_marginTop="4dp"
                android:layout_centerHorizontal="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/androidBLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/androidALayout"
            android:layout_marginLeft="32dp">

            <ImageView
                android:id="@+id/androidBIV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher"
                android:layout_centerHorizontal="true"/>

            <TextView
                android:id="@+id/androidBTV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android B"
                android:layout_below="@id/androidBIV"
                android:layout_marginTop="4dp"
                android:layout_centerHorizontal="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/androidCLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/androidBLayout"
            android:layout_marginLeft="32dp">

            <ImageView
                android:id="@+id/androidCIV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher"
                android:layout_centerHorizontal="true"/>

            <TextView
                android:id="@+id/androidCTV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android C"
                android:layout_below="@id/androidCIV"
                android:layout_marginTop="4dp"
                android:layout_centerHorizontal="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/androidDLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/androidCLayout"
            android:layout_marginLeft="32dp">

            <ImageView
                android:id="@+id/androidDIV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher"
                android:layout_centerHorizontal="true"/>

            <TextView
                android:id="@+id/androidDTV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android D"
                android:layout_below="@id/androidDIV"
                android:layout_marginTop="4dp"
                android:layout_centerHorizontal="true"/>
        </RelativeLayout>

    </RelativeLayout>
</RelativeLayout>

Is this possible?

Answer 1

It surely is possible. The best approach is choosing the first ImageView as reference element to which constrain everything else.

1. Center the TextView by assigning the left and right constraints to its image left and right edges respectively.
2. Then assign each image left and top contrain to their right and top edge of the previous image respectively.
3. Finally select all the images in the layout editor, right click and Center Horizontally (this will chain them to fit the screen width)

Example:

<?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:layout_width="match_parent" android:layout_height="match_parent">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintLeft_toLeftOf="@+id/imageView"
    app:layout_constraintRight_toRightOf="@+id/imageView"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="30dp"
    app:layout_constraintRight_toLeftOf="@+id/imageView2" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintLeft_toLeftOf="@+id/imageView2"
    app:layout_constraintRight_toRightOf="@+id/imageView2"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/imageView2" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    app:layout_constraintLeft_toRightOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintRight_toLeftOf="@+id/imageView3" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintLeft_toLeftOf="@+id/imageView3"
    app:layout_constraintRight_toRightOf="@+id/imageView3"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/imageView3" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    app:layout_constraintLeft_toRightOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintRight_toLeftOf="@+id/imageView4" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintLeft_toLeftOf="@+id/imageView4"
    app:layout_constraintRight_toRightOf="@+id/imageView4"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/imageView4" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    app:layout_constraintLeft_toRightOf="@+id/imageView3"
    app:layout_constraintTop_toTopOf="@+id/imageView3"
    app:layout_constraintRight_toRightOf="parent" />    

</android.support.constraint.ConstraintLayout>

Answer 2

I've found the solution: Group views in ConstraintLayout to treat them as a single view

Using chains, multiple views could be treated like a group.