ConstraintLayout Barrier not working properly when parent dimensions are set to wrap_content

Question

Here's a reproduction of my issue:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content" 
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        android:text="Text"/>
    
    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="16dp"
        android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"/>
    
    <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="textView, textView2"/>
    
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/barrier"
        android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"/>
    
</android.support.constraint.ConstraintLayout>

When you set the parent height to match_parent, the Barrier works as intended. But, as soon as you set it to wrap_content, it doesn't do the layout properly.

Here's how it looks with wrap_content, and at the right with match_parent:

If anyone could point me in the right direction it would be much appreciated. I didn't find anyone advocating against using Barriers this way, but didn't find anyone who got that kind of layout working.

Is that a mistake on my part or is that a bug in Barrier?

Check this https://stackoverflow.com/questions/71216910/constraint-layout-barrier-not-working-as-expected — ahjo4321hsotuhsa, Aug 01 '22 at 14:50

score 15 · Accepted Answer · answered Jan 06 '18 at 01:26

It is not clear what you mean by "parent". If I set the height of the ConstraintLayout (the only parent I can see) to match_parent, nothing changes. The result is as your first picture.

What you have to do, to make the barrier hold back the bottom textView3 is to complete the vertical chain between textView, textView2 and barrier. The code will then look like 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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text"
        app:layout_constraintBottom_toTopOf="@id/barrier"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"
        app:layout_constraintBottom_toTopOf="@id/barrier"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <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="textView, textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"
        app:layout_constraintTop_toBottomOf="@id/barrier" />

</android.support.constraint.ConstraintLayout>

But how do I keep the smaller top textview to stay aligned to the top of constraintlayout? — Ernest Zamelczyk, Jan 06 '18 at 01:37
Nevermind. I just set vertical_bias to 0. Thanks for the solution! — Ernest Zamelczyk, Jan 06 '18 at 01:40
I'm running into the same issue. How did you set the vertical bias to 0? — Lara, Jan 25 '22 at 03:09
why do have to set `app:layout_constraintBottom_toTopOf="@id/barrier"`, it's a task for barrier to detect max height for specified views — user924, Oct 23 '22 at 18:07
also in this case you have to set vertical bias to 0 for text views, if you don't them centered .... — user924, Oct 23 '22 at 18:09

ConstraintLayout Barrier not working properly when parent dimensions are set to wrap_content

1 Answers1