Flow views getting clipped

[enginegl]

I have a horizontal chain flow of programatically added items (key-value pairs).

        <androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/flow"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:orientation="horizontal"
            app:flow_horizontalAlign="start"
            app:flow_horizontalBias="0"
            app:flow_horizontalGap="8dp"
            app:flow_horizontalStyle="packed"
            app:flow_verticalGap="8dp"
            app:flow_wrapMode="chain"
            app:layout_constraintEnd_toEndOf="@id/endGuideline"
            app:layout_constraintStart_toStartOf="@id/startGuideline"
            app:layout_constraintTop_toBottomOf="@id/title" />

Each item is added with the following layout params:

ConstraintLayout.LayoutParams(
    ConstraintLayout.LayoutParams.WRAP_CONTENT,
    ConstraintLayout.LayoutParams.WRAP_CONTENT
).apply {
    constrainedWidth = true
    constrainedHeight = true
}

When I add an item with a lot of text, the view is being clipped at the bottom (screenshot 1).

Everything is working fine if a flow has no horizontal paddings/margins, and horizontally constrained to the parent (Screenshot 2).

Seems like large views are getting measured wrong.

Demo project: constraint-layout-issue
activity_main.xml
item_view.xml
MainActivity.kt

❌ Screenshot 1 – flow constrained to guidelines (start/end=16dp), large views getting clipped.

✅ Screenshot 2 – flow constrained to the parent, everything is fine.

[camaelon]

I suspect it might be related to using constrainedWidth/Height at the same time -- what does it look like when you are only setting constrainedWidth=true ? thanks

[jafu888]

Not sure we understand what you are doing in :

views.forEachIndexed { index, view ->
            referenceIds[index] = view.id
            constraintLayout.addView(
                view,
                ConstraintLayout.LayoutParams(
                    ConstraintLayout.LayoutParams.WRAP_CONTENT,
                    ConstraintLayout.LayoutParams.WRAP_CONTENT
                ).apply {
                    constrainedWidth = true
                    constrainedHeight = true
                }
            )
        }

Why did you set constrainedHeight = true ?

It implies Flow gets to decide what its height is.
Where as it should be wrap content.

[enginegl]

@jafu888 @camaelon, without this flag set Flow items with a huge amount of text are getting drawn outside the Flow bounds – it leads to views overlapping:

[harliedharma]

Hi, I'm getting the same issue as well.

Here is the sample screenshoot:

It should display abcdefghijklmnopqrstuvwxyz12 5 times, but it clipped the text view to only 3 lines

If I remove the constrainedHeight, the first item is positioned outside the flow top bound:

If I also remove the constrainedWidth, each line contains 2 abcdefghijklmnopqrstuvwxyz12, but it is drawn outside the flow right bound, ignoring the horizontal margin.

Here is the sample code:

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

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginHorizontal="16dp"
        app:constraint_referenced_ids="card,card2,card3"
        app:flow_horizontalBias="0"
        app:flow_horizontalGap="8dp"
        app:flow_horizontalStyle="packed"
        app:flow_verticalAlign="center"
        app:flow_verticalBias="0"
        app:flow_verticalGap="4dp"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>


    <androidx.cardview.widget.CardView
        android:id="@+id/card"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/black"
        app:layout_constrainedWidth="true"
        app:layout_constrainedHeight="true"
        app:cardCornerRadius="12dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12"
            android:textColor="@color/white" />
    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        android:id="@+id/card2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/black"
        app:layout_constrainedWidth="true"
        app:layout_constrainedHeight="true"
        app:cardCornerRadius="12dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12"
            android:textColor="@color/white" />
    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        android:id="@+id/card3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/black"
        app:layout_constrainedWidth="true"
        app:layout_constrainedHeight="true"
        app:cardCornerRadius="12dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12 abcdefghijklmnopqrstuvwxyz12"
            android:textColor="@color/white" />
    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>