Android-Layout: Place two TextViews in a row and adjust the size of the second TextView based on the size of the first

Question

I have a CardView layout which I feed to the RecyclerView. There are Six (6) TextViews, with Two (2) TextViews per row. The TextViews on the left are titles while the ones on the right are values that are drawn from a database.

I want the width of the titles to match the width of the longest title, and the values fill the rest of the space inside the CardView like this:

In this example, the Subject is the longest word and so the rest of the titles match the width of the Subject

I tried to use ConstraintLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    app:cardCornerRadius="4dp"
    android:elevation="8dp"
    android:focusable="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:paddingStart="8dp"
        android:paddingTop="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="8dp">

        <TextView
            android:id="@+id/to"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/to"
            android:textColor="#000000"
            android:textSize="16sp"
            app:layout_constraintTop_toBottomOf="@id/date"/>

        <TextView
            android:id="@+id/from"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/from"
            android:textColor="#000000"
            android:textSize="16sp"
            app:layout_constraintTop_toBottomOf="@id/to"/>

        <TextView
            android:id="@+id/subjectLabelTextView"
            android:layout_width="96dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/subject"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/subject"
            app:layout_constraintTop_toBottomOf="@id/from" />

        <TextView
            android:id="@+id/subject"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Yo, it's summertime. It's rainy though mate. Let's hangout at Macy's later."
            android:textColor="#000000"
            android:textSize="18sp"
            app:layout_constraintLeft_toRightOf="@id/subjectLabelTextView"
            app:layout_constraintTop_toTopOf="@id/subjectLabelTextView" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

The problem here is that when the text is too long, the value of the right TextView is being pushed out of the screen.

So I tried the nested Linear Layout as shown here:

https://stackoverflow.com/a/55251997/7764977

with the following code:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test test test test test test test test test test test test test test test"
                android:layout_weight="1"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello world"
                android:layout_weight="0"/>
    </LinearLayout>

    <Space android:layout_width="wrap_content" android:layout_height="20dp"/>

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test test test test test test test test "
                android:layout_weight="1"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello world"
                android:layout_weight="0"/>
    </LinearLayout>

</LinearLayout>

It is almost perfect. However, each row is housed in different LinearLayout. So I cannot get one title to match the width of the longest title.

Answer 1

You can use a Barrier for such arrangement. So all 3 Title TextViews will be constraints start of the Barrier and all 3 content TextViews will be constraints end of the Barrier. So any of left TextView Grow in width it will push content TextViews towards end .. Try the following layout:-

 <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp"
        android:elevation="8dp"
        android:focusable="true">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:orientation="vertical"
            android:paddingStart="8dp"
            android:paddingTop="8dp"
            android:paddingEnd="8dp"
            android:paddingBottom="8dp">

        <TextView
                android:id="@+id/to"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="To"
                android:textColor="#000000"
                android:textSize="16sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <TextView
                android:id="@+id/from"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="From"
                android:textColor="#000000"
                android:textSize="16sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/toContent" />

        <TextView
                android:id="@+id/subjectLabelTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Subject"
                android:textColor="#000000"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/fromContent" />

        <androidx.constraintlayout.widget.Barrier
                android:id="@+id/barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="end"
                app:constraint_referenced_ids="to,subjectLabelTextView,from"
                tools:layout_editor_absoluteX="395dp"
                tools:layout_editor_absoluteY="8dp" />

        <TextView
                android:id="@+id/subject"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Yo, it's summertime. It's rainy though mate. Let's hangout at Macy's later."
                android:textColor="#000000"
                android:layout_marginStart="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                android:textSize="18sp"
                app:layout_constraintStart_toEndOf="@id/barrier"
                app:layout_constraintTop_toTopOf="@id/subjectLabelTextView" />


        <TextView
                android:id="@+id/toContent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Me ertime. It's rainy though mate. Let's hangouMacy'"
                android:textColor="#000000"
                android:textSize="18sp"
                android:layout_marginStart="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/barrier"
                app:layout_constraintTop_toTopOf="@id/to" />

        <TextView
                android:id="@+id/fromContent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="it's me"
                android:textColor="#000000"
                android:textSize="18sp"
                android:layout_marginStart="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/barrier"
                app:layout_constraintTop_toTopOf="@id/from" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>