View on the right only if their is enough space, otherwise go at the bottom

Question

Using the ConstraintLayout I have 2 TextView that I want to be next to each other when their is enough space to see the content of both. But if TextView A takes a lot of space and fullfill all the screen width, than I would like that TextView B goes under TextView A instead of still being on the right but invisible (out of the screen).

So with the code below I got my 2 TextView right next to each other.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        tools:text="a very long text ..." />

    <TextView
        android:id="@+id/text_view_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toRightOf="@+id/text_view_a"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="some text" />

</android.support.constraint.ConstraintLayout>

How should I edit this code snippet so that TextView B goes under TextView A if their isn't any space left for him?

Answer 1

Take a look at Google's FlexboxLayout. It may be what you need to flow your TextViews. You can find some documentation here and a tutorial here.

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

You can look at wrapping your TextViews in the FlexbotLayout within the ConstraintLayout to allow them to flow as needed.

Here is a sample layout. The two TextViews will be stacked due to the long text of the top TextView. If you shorten this text, the two TextViews will be side-by-side.

I hope this helps.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context="com.example.flexer.MainActivity">

    <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="match_parent"
        android:layout_height="0dp"
        app:alignContent="stretch"
        app:alignItems="stretch"
        app:flexWrap="wrap"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/text_view_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:text="a very long text ...a very long text ...a very long text ...a very long text ...a very long text ...a very long text ...a very long text ...a very long text ..." />

        <TextView
            android:id="@+id/text_view_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:text="some text" />
    </com.google.android.flexbox.FlexboxLayout>
</android.support.constraint.ConstraintLayout>