Android : Constraint Layout : Orientation horizontal want no out screen for multiple textView

Issue

I have 3 texview inside constraint layout with wariable size when size is short is ok. But when the size is long the text is cut, how automatic return in other line when textView is out of screen ?

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dfsghsdrgfdf bfbdfbdgfq fgdgfd"
        android:textColor="@color/black"
        android:textSize="20sp" 
        android:paddingEnd="15dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dfsghs qsrgqvrrge rgergfgdrgfdfbf bdfbdfbdgsqedgfq"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv1" />

</androidx.constraintlayout.widget.ConstraintLayout>

I try use linear layout but is the same problem

Solution

I think FlexboxLayout does exactly what you expect. With the following configuration, a view will be positioned to the end of the previous view, but if it doesn’t fit within the remaining screen width, it will wrap to the next line, starting from the beginning of the screen.

1. Add the following dependency: implementation 'com.google.android.flexbox:flexbox:3.0.0'
2. Please try the following modified version of your snippet:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:flexWrap="wrap">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dfsghsdrgfdf bfbdfbdgfq fgdgfd"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:paddingEnd="15dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dfsghs qsrgqvrrge rgergfgdrgfdfbf bdfbdfbdgsqedgfq"
        android:textColor="@color/black"
        android:textSize="20sp" />

</com.google.android.flexbox.FlexboxLayout>

Answered By – Vlad Guriev

Answer Checked By – Robin (FlutterFixes Admin)