Android: two single-line TextView's side by side - squeeze and/or crop of either

Question

Use case: two single-line TextView s put horizontally side by side where one of them is set to fill the rest of the available width and the other wraps its contents. In the specific use case, the left TextView expands to fill the available space. They are put either in constraint or linear layout where each of them can have its contents modified dynamically and thus demanding more space. Both of them support ellipsis at the end so that they correctly denote if they are shrunk.

The target is that the TextView which width gets automatically calculated based on the remaining available space doesn't get moved out of the layout, cropped or overlapped by the other TextView . This happens now both using ConstraintLayout or LinearLayout in case the TextView that wraps its contents have considerable width.

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"

                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textView2"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
        />
        <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/textView"
                app:layout_constraintEnd_toEndOf="parent"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
        />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
        />
        <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
        />
    </LinearLayout>
</LinearLayout>

The code above represents the following layout:

-^^^^^^^^^^^^^^^-------------------------------------
| Left TextView |          Right TextView           |
-^^^^^^^^^^^^^^^-------------------------------------
| Left TextView |          Right TextView           |
-^^^^^^^^^^^^^^^-------------------------------------

One vertical LinearLayout wrapping a ConstraintLayout and a horizontal LinearLayout each of which rows have the same contents - the aforementioned two side by side TextView s. The left TextView s are set to occupy the remaining available width and the right ones wrap their contents, where the latter are intentionally set in the example above to be greater in width than the width of the parent. Here's the result:

It seems like allowing a View to expand and occupy the remaining space is a two-bladed knife: this setting also allows the View to be squeezed below its contents' size. Here a logical workaround setting of the left TextView to search for is something concerning the minimum width. The only layout that allows fixing this issue, even not fully, using a similar setting, is the ConstraintLayout . Adding the following line:

app:layout_constraintWidth_min="wrap"

to the attributes of the left TextView in the ConstraintLayout , results in the following UI:

The strange behavior here is that as if the half of the width of the expandable TextView is set as a negative horizontal margin both to the left and right side of the ConstraintLayout . The percentage of left TextView 's width set as a negative horizontal margin is always the same no matter the width of the contents of the left TextView :

Sometimes it happens that this crop ratio is different than 50%.

Any ideas how to accommodate two single-line TextView s horizontally, so that the right one is right aligned, the left is allowed to occupy the remaining space and is impossible to shrunk it below its contents' size or some other reasonable size?

Answer 1

I have read your code .you have used ConstraintLayout as a parent and two text view inside it . in your code some minor problem . you have set text view width 0dp but not set any type of weight so view not set according to your requirement.

set weight to set two text view horizontally

like this:

<TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
                />
            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_weight=".5"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
                />

try full this code

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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:orientation="vertical">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintHorizontal_weight=".5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textView2"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left" />
            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintHorizontal_weight=".5"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/textView"
                app:layout_constraintEnd_toEndOf="parent"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)" />
        </android.support.constraint.ConstraintLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
                />
            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_weight=".5"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
                />
        </LinearLayout>
    </LinearLayout>