How do I stop an Android TextView with lot of text squeezing out one to its right?

Question

I'm trying to get two TextViews side-by-side and centered---allowing them to grow as the data grows. When the text is too big, I'm ellipsizing it.

The problem I'm having is that, if one of the boxes contains a lot of text, it squeezes the other one out. What I'd like is for the small one to be displayed fully and for the big one to be squeezed more.

At present, when I have the following text in the two boxes

• A big long list of words that pushes the other TextView out
• Foobar

both are getting squeezed.

In this case, I'd like "Foobar" to be displayed fully, with the longer TextView giving up some space---e.g

...the other TextView out Foobar

When I get now is

...that pushes the other TextView out ...ar

If both text boxes are of similar size, I'd like them both to get a fair share.

My attempt is below.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:maxLines="1"
        android:ellipsize="start"
        android:textSize="20dp"
        android:text="A big long list of words that pushes the other TextView out" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:maxLines="1"
        android:ellipsize="start"
        android:textSize="20dp"
        android:text="Foobar" />
</LinearLayout>

I also tried a relative output (see below)---with a minWidth---but this just squeezed the right most TextView off the parent view completely!

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:maxLines="1"
        android:ellipsize="start"
        android:textSize="20dp"
        android:text="A big long list of words that pushes the other TextView out" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView1"
        android:minWidth="100dp"
        android:maxLines="1"
        android:ellipsize="start"
        android:textSize="20dp"
        android:text="Foobar" />
</RelativeLayout>

Anyone know how to make this work?

Answer 1

Take a look at Google's FlexboxLayout. I think that it may have the capability 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.

Update: I am unsure that FlexboxLayout is the solution. Here is another one that uses TableLayout and TableRow.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:shrinkColumns="0">

    <!-- TableLayout is needed to specify shrinkColumns. Ignore "Useless parent" error. -->
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="UselessParent">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:ellipsize="start"
            android:maxLines="1"
            android:text="A big long list of words that pushes the other outwords that pushes the other TextView out"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_weight="1"
            android:maxLines="1"
            android:text="Foobar"
            android:textSize="20sp" />

    </TableRow>
</TableLayout>