ConstraintLayout equal height and width of textviews with drawable image and different texts

Question

I want to replicate the below LinearLayout parent and child views to ConstraintLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xyz.constraintlayout.MainActivity$PlaceholderFragment">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:gravity="center"
        android:text="Section Number" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/first_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:drawablePadding="10dp"
            android:drawableTop="@drawable/ic_not_interested_black_48dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:padding="6dp"
            android:text="Book of first_text Language"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/second_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:drawablePadding="10dp"
            android:drawableTop="@drawable/ic_not_interested_black_48dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:padding="6dp"
            android:text="Book of second_text"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/third_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:drawablePadding="10dp"
            android:drawableTop="@drawable/ic_not_interested_black_48dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:padding="6dp"
            android:text="Book of third_text Topics and Miscellaneous"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

and the output is:

LinearLayout

I tried to replicate to ConstraintLayout with spread chains as below

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sed.constraintlayout.MainActivity$PlaceholderFragment">

<TextView
    android:id="@+id/section_label"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:gravity="center"
    android:text="Section Number"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="@+id/constraintLayout"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintTop_creator="1" />

<TextView
    android:id="@+id/first_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    android:background="@drawable/border"
    android:drawableTop="@drawable/ic_not_interested_black_48dp"
    android:drawablePadding="10dp"
    android:fontFamily="sans-serif-smallcaps"
    android:gravity="center"
    android:padding="6dp"
    android:text="Book of first_text Language"
    android:textColor="@color/colorPrimaryDark"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/barrier"
    app:layout_constraintEnd_toStartOf="@+id/second_text"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/section_label"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/second_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    android:background="@drawable/border"
    android:drawableTop="@drawable/ic_not_interested_black_48dp"
    android:drawablePadding="10dp"
    android:fontFamily="sans-serif-smallcaps"
    android:gravity="center"
    android:padding="6dp"
    android:text="Book of second_text"
    android:textColor="@color/colorPrimaryDark"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/barrier"
    app:layout_constraintEnd_toStartOf="@+id/third_text"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/first_text"
    app:layout_constraintTop_toBottomOf="@id/section_label"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/third_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    android:background="@drawable/border"
    android:drawableTop="@drawable/ic_not_interested_black_48dp"
    android:drawablePadding="10dp"
    android:fontFamily="sans-serif-smallcaps"
    android:gravity="center"
    android:padding="6dp"
    android:text="Book of third_text Topics and Miscellaneous"
    android:textColor="@color/colorPrimaryDark"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/barrier"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/second_text"
    app:layout_constraintTop_toBottomOf="@id/section_label"
    app:layout_constraintVertical_bias="0.0" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="first_text, second_text, third_text" />

</android.support.constraint.ConstraintLayout> The output is:

ConstraintLayout

As it is evident that the height of the views in the constraint layout is not even. How to make it even? Thanks for any help.

EDIT:

I added barrier to the layout as suggested by @StarterPack but still the same output.

Does this answer your question? [ConstraintLayout: set height of all views in row to match the tallest one](https://stackoverflow.com/questions/43288173/constraintlayout-set-height-of-all-views-in-row-to-match-the-tallest-one) — StarterPack, Jan 11 '21 at 09:17
@StarterPack, Thanks, I updated my code with barriers but couldn't see any difference. — itabdullah, Jan 11 '21 at 11:29

score 1 · Answer 1 · answered Nov 24 '17 at 07:01

> Try this:

    <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Section Number"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/first_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:background="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTop="20dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of first_text Language"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/second_text"
        app:layout_constraintTop_toBottomOf="@id/section_label" />

    <TextView
        android:id="@+id/second_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:background="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTop="20dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of second_text"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/first_text"
        app:layout_constraintRight_toLeftOf="@id/third_text"
        app:layout_constraintTop_toTopOf="@id/first_text" />

    <TextView
        android:id="@+id/third_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:background="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTop="20dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of third_text"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@id/second_text"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/second_text" />

</android.support.constraint.ConstraintLayout>

It seems you have removed the chains, is it even possible to make group of views have equal height and width without chains? I tried your code but did not get the desired results. — itabdullah, Nov 24 '17 at 08:26

score -2 · Answer 2 · edited Jun 05 '18 at 06:55

-2

Hint:

The layout_height you given for the three TextView's are wrap_content.
If you apply match_parent then you can get even height but these
three TextView will occupy the complete space.
Hope you know that the height of the TextView will extend depend upon the content size in it.
You can achieve the design what you want by assign same hardcore
height value (like 120dp) for that three TextView

edited Jun 05 '18 at 06:55

aleksandrbel

1,422
3
20
38

answered Nov 24 '17 at 07:27

Arnold Brown

1,330
13
28

Thanks. As you suggested if I hardcoded the height say, to 150dp for all views their height became even. However I want to know if there is a way to achieve this without hardcoded values like I did in the LinearLayout example in my question where I gave match_parent for all views – itabdullah Nov 24 '17 at 08:31
Ya in LinearLayout sample height as "match_parent" of TextView take the height of its parent which is already a "wrap_content" – Arnold Brown Nov 24 '17 at 08:55
1

Yes, with the help of Guidelines I was able to achieve the result I needed. I created a horizontal guideline below the tallest text view and linked the bottom constraint of all views to the guideline thus making the height even. Thanks once again – itabdullah Nov 25 '17 at 15:48
Great.due to lack of time I couldn't try the code, but with the hint you made it... Thanks for the explanation +1 – Arnold Brown Nov 26 '17 at 17:26

ConstraintLayout equal height and width of textviews with drawable image and different texts

2 Answers2