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?

Refer https://stackoverflow.com/questions/54874011/constraintlayout-flow-helper-example/56106542#56106542 if you want to use new Flow virtual layout with ConstraintLayout to achieve this — Yasitha Waduge, May 13 '19 at 06:30
You'd check the answer [here](https://stackoverflow.com/questions/76122205/how-to-make-buttons-change-position-according-to-the-screen-size-and-or-font-siz/76168684#76168684) — Zain, May 04 '23 at 00:19

Cheticamp · Accepted Answer · 2019-11-25T22:48:56.847

13

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.

edited Nov 25 '19 at 22:48

answered Aug 15 '17 at 20:19

Cheticamp

61,413
10
78
131

Thanks Cheticamp for sharing the FlexboxLayout! But would really like to know how to use ConstrainLayout for it. – lannyf Aug 16 '17 at 11:30
@lannyf No problem. However, I don't think that you will get the answer you are looking for. The fact that FlexboxLayout was open sourced at the same time ConstraintLayout was released and was touted for its ability to wrap views (the feature you are looking for in ConstraintLayout) leads me to believe that ConstraintLayout does not have that particular capability. – Cheticamp Aug 16 '17 at 12:16
1

Constraint Layout 2.0 now has Flow helper. As of now, it's in 2.0.0-alpha1. – Milan Jul 03 '18 at 02:49

score 4 · Answer 2 · answered Jan 23 '19 at 11:42

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

score 4 · Answer 3 · answered May 15 '19 at 09:20

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

score -1 · Answer 4 · answered Aug 23 '17 at 18:46

after searching around and conclusion is ConstraintLayout is to flatten the view hierarchy of the layouts to avoid nesting, to optimize the view hierarchy. So as @Cheticamp pointed out "ConstraintLayout does not have that particular capability". So closing this question.

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

4 Answers4

Linked