Two Textviews Side by Side, Only One to Ellipsize

Two TextViews side by side, only one to ellipsize?

Use TableLayout and put both TextView in table row, have a try. I haven't tried

Two TextViews behind each other, ellipsize only the first, second one always visible

Does it have to be a LinearLayout?
If not:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="left"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview1"
        android:text="This is a very very long string that eventually will get out of screen; yes, it is that long!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/textview2"
        android:layout_toStartOf="@id/textview2"/>

    <TextView
        android:id="@+id/textview2"
        android:text="Hello! I'm short!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

Using ellipsize with two textView horizontally without crop the second one

Use tablelayout and put both textbox in table row have a try.Check this code.

  <TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="1"
    android:layout_margin="10dp"
    android:background="@android:color/white"
    android:shrinkColumns="0"
    >
    <TableRow>
        <TextView android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView toooooooooooooooooooooooooooooooooooo long"
            android:layout_marginLeft="10dp"
            android:ellipsize="end"
            android:singleLine="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Textview"
            android:gravity="start"
            android:textColor="@android:color/black"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="10dp"
            android:ellipsize="none"
            android:singleLine="true"
            />
    </TableRow>

</TableLayout>

Have two TextViews side by side, the first stretched and limited, the second fixed

Would concatenating the two Strings and putting the result into a single TextView with ellipsize="middle" set work?

Or a layout, where the second textview is aligned to the right?

| T1          T2222 |
| T111111     T2222 |
| T1111111... T2222 |

Update

Taking advantage of the ability that the second text view's width can be fixed, the RelativeLayout below serves with the desired layout (by explicitly setting the second view's width to 60dp):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" 
    android:gravity="fill">
    <TextView android:id="@+id/secondText" 
        android:layout_width="60dp" android:layout_height="wrap_content"
        android:singleLine="true" android:layout_alignParentRight="true" />
    <TextView android:id="@+id/dynamicText" 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginRight="5dp" android:layout_toLeftOf="@id/secondText"
        android:singleLine="true" android:ellipsize="end"  />   
</RelativeLayout>

The code above generates the following layout:

| T1 T2222          |
| T111111 T2222     |
| T1111111... T2222 |

width an 5dp gap between the two TextViews.

Layout with two TextViews and ellipsis

Create a horizontal chain of the two views, set max lines to one of the left view and set the constrained width of the left view to true to keep it in bounds:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constrainedWidth="true"
        android:text="Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! "
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

How align two TextViews in one line on left side

To achieve both, you need wrap_content in the Layout wrap_content in the second TextView and the combination of width:0dp and layout_weight:1 in the first TextView. This way the second TextView will always be large enough to display the content and the first TextView will extend up to the available space next to it.

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

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="this text is tool long so it will be cut. this text is tool long so it will be cut." />

    <TextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:maxLines="1"
        android:text=" * date" />
</LinearLayout>

Put two textviews side by side in a layout

Wrap the two TextViews in a LinearLayout. Assign a layout weight of 0 to textview2 and a layout weight of 1 to textview2.

See here for more info: Linear Layout Weight

If you play with the example below you'll see that the LinearLayout first allocates space to textview2 (with weight 0) and then allocates whatever remains to textview1 (with weight 1). If there is insufficient space to accommodate both TextViews, textview1 will be ellipsized first. In the example below textview2 will only ever become ellipsized if the LinearLayout is smaller than the size of textview2 itself. Assign a specific layout width to the FrameLayout and see what happens.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="match_parent" 
    android:background="#FF0000FF">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFF0000"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="textview1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#FF00FF00"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="textview2" />
    </LinearLayout>

</FrameLayout>

Move two side by side textviews to be one under another if text is too long

I have found a better solution. Changed my textviews into autoresizable textviews (more info here)

Also, each textview is in a separate layout, to make sure both textviews are resized to the same value.
My xml looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:id="@+id/value_linear_layout"
              android:gravity="center">

    <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content">
        <com.mihaela.view.AutoResizeTextView
            android:id="@+id/my_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

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

        <com.mihaela.view.AutoResizeTextView
            android:id="@+id/my_text_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>

and I have implemented the OnTextResizeListener from AutoResizeTextView to do this:

public class TextWidthResizeListener implements OnTextResizeListener {

    @Override
    public void onTextResize(TextView textView, float oldSize, float newSize) {
        TextPaint paint = textView.getPaint();
        if (paint.measureText(textView.getText().toString()) > (valueLinearLayout.getWidth() / 2)){
            valueLinearLayout.setOrientation(LinearLayout.VERTICAL);
        }
    }
}

where valueLinearLayout is:

valueLinearLayout = (LinearLayout)findViewById(R.id.value_linear_layout);

This solution best fits for me, as the textviews are dimensioned when they are side by side until a minimum size. When the minimum size is reached, and the text still does not fit, the textviews will be aligned one under another.

Also, this idea with the listener can be applied to non-resizable textviews also.
I will set this answer as the correct one.

---

Related Topics