I have read in a blog entry that in ConstraintLayout
2.0.0, a way was introduced to create a flow of views. What I exactly want to achieve: I have several TextView
s with a fixed size next to each other. Depending on screen size, some TextView
s should be pushed into the next line.
Example on big screen with six TextViews
:
[AAA] [BBB] [CCC] [DDD]
[EEE] [FFF]
Example on small screen with six TextViews
:
[AAA] [BBB]
[CCC] [DDD]
[EEE] [FFF]
I already saw this Stackoverflow question proposing to use a FlexboxLayout
, but there is a comment saying that the same thing now can be achieved using ConstraintLayout
.
Anybody can give me an example on how to achieve the desired behavior using ConstraintLayout
? I was not able to find any instructions about this. Thanks in advance.
Flow is the first of the two new views available in Constraint Layout 2.0. It is a virtual layout that helps build chains that can wrap to the next line. Since it is a virtual layout, it does not add levels to your layout hierarchy.
ConstraintLayout. A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. ConstraintLayout.LayoutParams. This class contains the different attributes specifying how a view want to be laid out inside a ConstraintLayout .
↳ androidx.constraintlayout.helper.widget.Layer. Layer adds the ability to move and rotate a group of views as if they were contained in a viewGroup Added in 2.0 Methods such as setRotation(float) rotate all views about a common center.
You can achieve this by adding a androidx.constraintlayout.helper.widget.Flow
virtual view inside the androidx.constraintlayout.widget.ConstraintLayout
and by referencing all your textviews with app:constraint_referenced_ids
attribute.
Example below shows how I've achieved it.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="[AAAAAAAA]" tools:ignore="MissingConstraints" /> <TextView android:id="@+id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="[BBBBBBBB]" tools:ignore="MissingConstraints" /> <TextView android:id="@+id/text3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="[CCCCCCCC]" tools:ignore="MissingConstraints" /> <TextView android:id="@+id/text4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="[DDDDDDDD]" tools:ignore="MissingConstraints" /> <TextView android:id="@+id/text5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="[EEEEEEEE]" tools:ignore="MissingConstraints" /> <TextView android:id="@+id/text6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="[FFFFFFFF]" tools:ignore="MissingConstraints" /> <androidx.constraintlayout.helper.widget.Flow android:id="@+id/flow1" android:layout_width="0dp" android:layout_height="wrap_content" android:padding="10dp" app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6" app:flow_horizontalBias="0" app:flow_horizontalGap="10dp" app:flow_horizontalStyle="packed" app:flow_verticalBias="0" app:flow_wrapMode="chain" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Play around with app:flow_
attributes to change the arrangement of the textviews such as alignment, margin, etc. https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow
Final result should look like below depending on your screen size.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With