lannyf
lannyf

Reputation: 11035

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

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?

Upvotes: 9

Views: 6871

Answers (4)

Cheticamp
Cheticamp

Reputation: 62841

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.

Upvotes: 13

Faisal Ahmed
Faisal Ahmed

Reputation: 125

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

Upvotes: 4

vuhung3990
vuhung3990

Reputation: 6859

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

enter image description here

Upvotes: 4

lannyf
lannyf

Reputation: 11035

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.

Upvotes: -1

Related Questions