How to let two TextViews aligned to each other be "wrap_content" but within the constraints of ConstraintLayout without overflowing into each other?

Question

I have two textViews aligned next to each other as such: Here is the image, I am not allowed to embed it for now

My current layout works fine if I try to increase the text for the first text view, it remains within the constraint as it should. Here is it how it looks and this is fine.

But when I try to do the exact opposite of this, i.e increase the width for the second textView, I expect the first one to remain in place, but the same does not happens and it overflows.It goes out of bounds like this.

So I cannot understand what is it that I am doing wrong? I want both the textViews to take whatever space is available to them within the constraints. Could someone guide me where I am going wrong? Both the textViews are chained to each other.

Here is my current XML Code.

<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    android:background="@color/colorPrimaryBackground">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.04" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.96" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.04" />

    <TextView
        android:id="@+id/tvStart"
        style="@style/StyleRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Text A"
        android:textSize="20sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@id/tvEnd"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@id/guidelineStart"
        app:layout_constraintTop_toTopOf="@id/guidelineTop" />

    <TextView
        android:id="@+id/tvEnd"
        style="@style/StyleRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Text B Text B Text B Text B Text B T"
        app:layout_constrainedWidth="true"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
        app:layout_constraintStart_toEndOf="@id/tvStart"
        app:layout_constraintTop_toTopOf="@id/guidelineTop" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Experimenting with android:maxLength="" or android:maxWidth="" on first text view dynamically can give you desired result. At runtime, find the best-suited maxLength and maxWidth values based on the strings for two text views. Also, You can also check FlexLayout or FlowLayout if they solve your UI requirement.

Answer 2

This one works as you expected for shorter strings with the use of FlexboxLayout

<com.google.android.flexbox.FlexboxLayout 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"
    app:alignItems="flex_start">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        tools:text="Text A" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        tools:text="Text B Text B Text B Text B Text B T" />
</com.google.android.flexbox.FlexboxLayout>

Answer 3

You can try something like this

<?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:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:id="@+id/tvStart"
    style="@style/TextAppearance.AppCompat.Body1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintEnd_toStartOf="@id/tvEnd"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:text="Text A Text A Text" />

  <TextView
    android:id="@+id/tvEnd"
    style="@style/TextAppearance.AppCompat.Body1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintStart_toEndOf="@id/tvStart"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text="Text B Text B Text B Text B Text B T" />

</androidx.constraintlayout.widget.ConstraintLayout>

Here is what the layout will look like. You can change up the layout_width from 0dp to wrap_content and see how that works between the 2 views to get it where you want.