can ConstraintLayout help to flow the right side item to next line?

Question

Having a textView alight to left edge, its width could grow. Having some other textView in its right align in single line.

When the left textView width grows, would like the right textView to be pushed down to next line:

[AAA]  [BBB] 

when left one width grows:

[AAA AAA AAA AAA AAA]

[BBB]

Thought seeing some sample using ConstraintLayout to automatically push the right side item to next line down, but couldnt find any.

It is doable with ContraintLayOut, or anyone knows some sample to do it?

Answer 1

Update: The answer below is still valid, but as of ConstraintLayout 2.0 it may be better to use the Flow helper. See this Stack Overflow answer for an example.

---

AFAIK, flowing views from one line to the next is not something that ConstraintLayout can do. It is, however, something that FlexboxLayout can do very easily.

Here is an initial introduction to the technology. There are also a few good apps on the Play store to play around with the layout.

FlexboxLayout can be interpreted as an advanced LinearLayout because both layouts align their child views sequentially. The significant difference between LinearLayout and FlexboxLayout is that FlexboxLayout has a feature for wrapping.

Answer 2

you can use com.google.android.material.chip.ChipGroup like this

<com.google.android.material.chip.ChipGroup
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginTop="8dp"
      android:layout_marginStart="8dp"
      android:layout_marginEnd="8dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/title">
      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="aaaaaaa"
        android:textSize="10sp"/>

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bbbbbb"/>

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="cccccccc"/>

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fffffffff"/>

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hhhhhhh"/>
      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="trtr"/>
    </com.google.android.material.chip.ChipGroup>

see more here

Answer 3

I know I am pretty late to the party but to anyone who's still subscribed to this question, as of today ConstraintLayout 2.0 (just launched in beta1) supports a new ConstraintHelper called Flow using which your specific requirement can be fulfilled in ConstraintLayout.

Flow

The following are the release notes for beta1