Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 560
Ernest Zamelczyk Avatar asked Jan 05 '18 19:01

Ernest Zamelczyk


People also ask

Can we use RelativeLayout inside ConstraintLayout?

Constraints define the relation between two different view elements, and chains can be used dictate the spacing between them. In addition, guidelines can be used to create percentage-based layouts. Most of what can be achieved in LinearLayout and RelativeLayout can be done in ConstraintLayout.

Is ConstraintLayout a ViewGroup?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).

What is constraint horizontal bias in Android?

The value you set as a horizontal or vertical bias is a number between 0 and 1, representing a percentage, where the closest to 0 means the more biased to the left (horizontal) or the top constraint (vertical) and the closest to 1 means the more biased to the right (horizontal) or the bottom constraint (vertical).


1 Answers

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>
like image 151
kalabalik Avatar answered Sep 20 '22 23:09

kalabalik