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

Each TextView is centered with its image.
Each image is separated with the previous image with a fixed margin.
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?

score 2 · Accepted Answer · answered Apr 01 '17 at 00:32

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

Center the TextView by assigning the left and right constraints to its image left and right edges respectively.
Then assign each image left and top contrain to their right and top edge of the previous image respectively.
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>

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

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.

edited May 23 '17 at 12:09

Community

1
1

answered Apr 01 '17 at 00:16

pepos

3
2

Is this design possible with ConstraintLayout?

2 Answers2