Can the Android Flow virtual layout handle variable-width Views

Question

Android recently introduced Flow virtual layout but all of the examples I've seen show child Views that have the same width so it ends up laying out in a grid, instead of a jagged flow.

I've seen variable width handles for flexbox-layout and Dhaval Solanki's FlowLayout.

One other person asked a similar question (Which android layout to use for distributing variable width buttons to fill a screen?), but they were asking generally how to do it, whereas I'm asking specifically how to do it with Flow.

Can Flow handle variable-width Views? How?

Answer 1

Here is a simple example of how it can be achieved (ConstraintLayout:2.0.0-beta2):

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

    <androidx.constraintlayout.helper.widget.Flow
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:constraint_referenced_ids="text1,text2,text3,text4,text5"
            app:flow_wrapMode="chain"
            app:flow_horizontalStyle="packed"
            app:flow_horizontalBias="0"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:background="#FF0000"/>

    <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="That is a very long textview that is very, very long"
            android:background="#00FF00"/>

    <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text3 which is somewhat long"
            android:background="#0099FF"/>

    <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text4"
            android:background="#999999"/>

    <TextView
            android:id="@+id/text5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text5"
            android:background="#9900FF"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Result:

• app:flow_wrapMode="chain" allows for the chain to wrap to the next line when there's not enough space
• app:flow_horizontalStyle="packed" is necessary to be able to set the bias
• app:flow_horizontalBias="0" aligns the Views to the left
• app:flow_horizontalGap="Xdp" can be used to set a gap between the Views

Other wrap styles (spread and spread_inside) will not take the bias into account as they have a predefined way of laying out the Views