Put two textviews side by side in a layout

Question

I have two textviews i need to put side by side in a layout and I have to respect two rules:

• Textview2 needs always to be displayed entirely.

• Textview1 has to be cropped if there is no enough room in the layout.

Examples:

Textview1|textview2

Teeeeeeeeeeeeeeeeeeeextview1...|textview2

Any ideas?

The only way I found that might work is to create a drawable with the text of textview2 and affect it as coumpoundDrawable to textview1.

Answer 1

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>

Answer 2

why do you need that drawable? option: you can use textview1 with a fixed width and ellipsize the end..:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:padding="2dp" />


    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textview1"
        android:padding="2dp" />

</RelativeLayout>  

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="horizontal" >

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content" 
        android:layout_weight="1"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_light"
        android:singleLine="true"
        android:text="textView1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_light"
        android:singleLine="true"
        android:text="textView2" />

</LinearLayout>

Edit:

Output for short textView1 text:

Output for long textView1 text: