CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Michael Osofsky
Michael Osofsky

Reputation: 13195

Can the Android Flow virtual layout handle variable-width Views

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?

Upvotes: 3

Views: 1247

Answers (1)

Pawel Laskowski
Pawel Laskowski

Reputation: 6346

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:

flex with flow

  • 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

Upvotes: 2

Related Questions