Bug: Barrier connected with "percent height" in ConstraintLayout is inside a ScrollView

Question

I have a ScrollView which has a ConstraintLayout.

Inside the ConstraintLayout I want to position a View to the bottom of a Barrier.

The Barrier itself has constraints: a Guideline(it can be also a view with height half of parent) which is half of the ConstraintLayout and a TextView.

The issue here is that the ConstraintLayout will expand even more (adds more scrollable area) because of the half of screen percentage calculation.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:background="#39537A4B"
        android:fillViewport="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View
                android:id="@+id/topHalf"
                android:layout_width="10dp"
                android:layout_height="0dp"
                android:background="#99B146B8"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.5"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <View
                android:id="@+id/bottomHalf"
                android:layout_width="10dp"
                android:layout_height="0dp"
                android:background="#99B89F46"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.5"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0" />

            <TextView
                android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Do smth \n\n\n\n\n\n\nasdasda"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.5" />

            <androidx.constraintlayout.widget.Barrier
                android:id="@+id/barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="bottom"
                app:constraint_referenced_ids="guideline, text" />

            <View
                android:id="@+id/view"
                android:layout_width="60dp"
                android:layout_height="40dp"
                android:background="#651F7878"
                app:layout_constraintStart_toStartOf="@id/barrier"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Try changing the Barrier constraints to:

app:constraint_referenced_ids="text"

And you understand that Barrier brakes the calculations.

I know how to solve this layout issue from java, I want a solution from xml. It can be this is a bug on ConstraintLayout

Cheticamp · Answer 1 · 2021-09-10T15:27:51.653

This behavior is odd and is definitely related to the barrier and a wrap_content ConstraintLayout Here is a simplified layout that showcases the behavior.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_blue_light"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <View
        android:id="@+id/redBox"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".5" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="redBox,guideline"/>

</androidx.constraintlayout.widget.ConstraintLayout>

With the above layout, the following is what is displayed. Although the ConstraintLayout is wrap_content, it expands to twice the height of the red box.

If we remove the red box or the guideline from the barrier, the layout behaves:

The height of the ConstraintLayout can be varied by changing the location of the guideline. Here it is with the guideline set at 30%:

The expected behavior, IMO, is that the ConstraintLayout would size itself based upon the heights of its child views, here just the red box, and the guideline would be set accordingly. That is clearly not what is happening.

Maybe someone can figure out an XML work-around using the simplified layout. I didn't see a similar issue reported from a cursory search, so it may be worth reporting.

(Using ConstraintLayout version 2.1.0)

Bug: Barrier connected with "percent height" in ConstraintLayout is inside a ScrollView

1 Answers1