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 — StarterPack
– StarterPack, Commented Jan 11, 2021 at 9:17
@StarterPack, Thanks, I updated my code with barriers but couldn't see any difference. — itabdullah
– itabdullah, Commented Jan 11, 2021 at 11:29

Shweta Chauhan · Accepted Answer · 2017-11-24 07:01:06Z

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

aleksandrbel · Accepted Answer · 2018-06-05 06:55:19Z

-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 5, 2018 at 6:55

aleksandrbel

1,4873 gold badges20 silver badges40 bronze badges

answered Nov 24, 2017 at 7:27

Arnold Brown

1,43314 silver badges28 bronze badges

4 Comments

itabdullah Over a year ago

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

Arnold Brown Over a year ago

Ya in LinearLayout sample height as "match_parent" of TextView take the height of its parent which is already a "wrap_content"

itabdullah Over a year ago

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

Arnold Brown Over a year ago

Great.due to lack of time I couldn't try the code, but with the hint you made it... Thanks for the explanation +1

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related