android – ConstraintLayout: set height of all views in row to match the tallest one-ThrowExceptions

Exception or error:

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 RecyclerView, where each TextView gets an arbitrary length of text…

If I set each to wrap_content, the shorter one will shrink.
If I set both to 0dp (match_contraints), both end up 0 height.

Here’s the setup:

<?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_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/id1"
        android:layout_width="60dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/id2"/>

    <TextView
        android:id="@+id/id2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/id1"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

I suppose this is a bug, as “0dp” should act more like match_parent than actual 0 dp.

On iOS, by the way, the equivalent Auto Layout rules (of setting views’ heights to match top and bottom of parent) produce the expected result.

Of course this is pretty simple using LinearLayout, but this layout plays part in a larger layout, and I’d like to trim the view hierarchy…

How to solve:

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.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_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <TextView
      android: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" />

  <TextView
      android: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.Barrier
      android: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>

###

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>

enter image description here

enter image description here

###

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

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">

    <TextView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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>

###

<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" />

Assigning equal width and Height

Leave a Reply

Your email address will not be published. Required fields are marked *