ConstraintLayout with growing TextViews claiming equal space if needed

Question

Is it possible to in ConstrainLayout have two textviews constrained such that they take 50% of the horizontal space each if they need it, and if they don't the other grows to fill the space.

A Correct: When texts are short the textViews do not interfere with eachother.

B Correct: The short left textView yields space to the longer right one

C Correct: Share horizontal space equally and grow vertically

D Incorrect: Right textView grows on expense of the left textView.

E Incorrect: Right textView grows vertically rather than filling available horizontal space.

I've tried a lot of things. It think layout_width="wrap_content" or layout_constraintWidth_default="wrap" is a must since it is the textViews' only way to communicate how much space it wants.

Experimented with:

layout_constrainedWidth="true/false"
layout_constraintWidth_default="spread/wrap"
layout_constraintWidth_max="wrap"
layout_constraintHorizontal_weight="1" // with 0dp as width

Experimentation mostly with the textViews in a horizontal chain, since there is a symmetry in the problem I think a symmetric solution makes sense.

Has anyone managed this or is it just impossible? I do not know why it behaves as it does with the second element in the chain being 'heavier' than the first one forcing it to be the only one to grow vertically.

Answer 1

Barriers is what you are looking for in combination with chaining.

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constrainedWidth="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintEnd_toStartOf="@id/barrier"/>

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="start"
    app:constraint_referenced_ids="textView2" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constrainedWidth="true"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintStart_toEndOf="@id/barrier"/>

Answer 2

To solve your problem, you have to set the width of the TextViews to 0dp. I added a Barrier to the TextView at the left so that whenever the right TextView needs space, it will take the space of the left TextView. Try this code:

<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">

    <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/text_barrier"
            app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
            android:id="@+id/text_barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="end"
            app:constraint_referenced_ids="textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>