Align two TextViews, one left the other right, on a ListView without stretching the backgrounds

Question

So I've got two TextViews per row in a ListView. One should be left and the other right aligned. Both TextViews have a rounded rectangle as background which should just wrap the text inside. So I came up with this:

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

    <TextView
        android:id="@+id/text_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/bubble_purple"
        android:gravity="center" >
    </TextView>

    <TextView
        android:id="@+id/text_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/text_right"
        android:background="@drawable/bubble_blue"
        android:gravity="center" >
    </TextView>
</RelativeLayout>

It looks good for long texts but not for shorter messages:

I also tried a LinearLayout like this:

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

    <TextView
        android:id="@+id/text_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:background="@drawable/bubble_blue"
        android:gravity="center" >
    </TextView>

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

    <TextView
        android:id="@+id/text_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:background="@drawable/bubble_purple"
        android:gravity="center">
    </TextView>
</LinearLayout>

This works for short messages but not for longer ones:

Is it somehow possible to measure the combined width of the TextViews and programmatically switch between these layouts, or am I doing something wrong here?

Answer 1

Does this work as you want?

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

<TextView
    android:id="@+id/text_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@drawable/bubble_blue"
    android:text="2"
    android:gravity="center" >
</TextView>

<TextView
    android:id="@+id/text_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@drawable/bubble_purple"
    android:text="9"
    android:gravity="center" >
</TextView>
</LinearLayout>

By adding the layout_weight parameters and making them equal, you tell the layout engine to allocate any spare room equally between the two views. If you wish the left block to be larger than the right, you can give it a larger weight.

Edit: Maybe this is better:

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

<LinearLayout 
    android:id="@+id/text_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#456"
        android:text="5 + 1"
        android:gravity="center" >
    </TextView> 

</LinearLayout>

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text=" = " >
</TextView>

<LinearLayout 
    android:id="@+id/text_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layoutDirection="rtl"
    android:layout_weight="0.5">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#856"
            android:text="6"
            android:gravity="center" >
        </TextView>

</LinearLayout>

</LinearLayout>