Constraintlayout: Set Height Of All Views In Row To Match The Tallest One

May 18, 2024 Post a Comment

I'm trying to utilize a ConstraintLayout (version 1.0.2) to set the height of 2 side-by-side views to match the tallest one of them. This serves as a ViewHolder in for a RecyclerVi

Solution 1:

Answering, in case anyone is looking out for answer in future.

ConstraintLayout introduced Barrier in v1.1 to achieve one such functionality asked by the OP in the question

The above mentioned functionality can be achieved using below xml:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns: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_marginLeft="2dp"android:layout_marginRight="2dp"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:id="@+id/id1"android:layout_width="60dp"android:layout_height="wrap_content"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintBottom_toBottomOf="@+id/barrier"app:layout_constraintVertical_bias="0.0"android:text="@string/id1_text" /><TextViewandroid:id="@+id/id2"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintLeft_toRightOf="@+id/id1"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="@+id/barrier"app:layout_constraintVertical_bias="0.0"android:text="@string/id2_text" /><android.support.constraint.Barrierandroid:id="@+id/barrier"android:layout_width="wrap_content"android:layout_height="wrap_content"app:barrierDirection="bottom"app:constraint_referenced_ids="id1,id2" /></android.support.constraint.ConstraintLayout>

Solution 2:

This might help you.

<android.support.constraint.ConstraintLayout
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:padding="@dimen/activity_vertical_margin"
        android:text="sjdjhshdjhdjhsdgfjhgsdjfgjsdgfjsdgfhgdsjhfghs"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:padding="@dimen/activity_vertical_margin"
        android:text="sjdjhsjhd"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Solution 3:

This is tricky and slow, but it works.

The point is:

Add additional invisible same layout for measure height. This one has wrap_content height attribute, so it will stretch parent if it is big enough.
Set your visible layout height to 0dp, so it will fill rest of parent.

As you can see the capture below, we have two layouts. Hidden one is wrap_contents

Baca Juga

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns: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="wrap_content"><TextViewandroid:id="@+id/view_1"android:layout_width="wrap_content"android:layout_height="0dp"android:background="#DDDDDD"android:text="@android:string/yes"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@+id/view_2"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/view_1_invisible"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#DDDDDD"android:text="@android:string/yes"android:visibility="invisible"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@+id/view_2"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/view_2"android:layout_width="100dp"android:layout_height="0dp"android:background="#DDDDDD"android:text="@android:string/httpErrorBadUrl"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/view_1"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/view_2_invisible"android:layout_width="100dp"android:layout_height="wrap_content"android:background="#DDDDDD"android:text="@android:string/httpErrorBadUrl"android:visibility="invisible"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/view_1"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

Solution 4:

I've managed to do this with LinearLayout

parent to be height = wrap content
children to be height = match parent
children width = 0 and same weight

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_height="wrap_content"android:layout_width="match_parent"android:orientation="horizontal"
        ><TextViewandroid:layout_weight="1"android:id="@+id/id1"android:layout_height="match_parent"android:layout_width="0dp"android:background="@color/green_400"android:text="11"android:textSize="50sp"
        /><TextViewandroid:layout_weight="1"android:id="@+id/id2"android:layout_height="wrap_content"android:layout_width="0dp"android:background="@color/cat_grey_lite"android:text="2222222222"android:textSize="50sp"
        /></LinearLayout>

Solution 5:

<TextView
    android:id="@+id/txt_service_request_id"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_id"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/txt_service_request_status"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/txt_service_request_status"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_status"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_service_request_id"
    app:layout_constraintEnd_toStartOf="@+id/txt_service_request_desc"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/txt_service_request_id"
    app:layout_constraintTop_toTopOf="parent" />


<TextView
    android:id="@+id/txt_service_request_desc"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_desc"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_service_request_id"
    app:layout_constraintEnd_toStartOf="@+id/txt_service_request_cat"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/txt_service_request_status"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/txt_service_request_cat"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_cat"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_service_request_id"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/txt_service_request_desc"
    app:layout_constraintTop_toTopOf="parent" />