How to align Button to the right, without being overlapped by TextView?

Question

I'm trying to get something like this: http://img202.imageshack.us/img202/552/layoutoy.png. I'm using this as a list item (technically as the group view of an ExpandableListView).

Here's the XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight">

    <TextView
        android:id="@+id/list_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end" />

    <Button
        android:id="@+id/list_item_button"
        android:text="Click me!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@id/list_item_text" />

</RelativeLayout>

But this doesn't work. The Button doesn't wrap its contents, instead it uses all available horizontal space. The TextView does wrap its contents, but what I want it to do is to cut off when it overlaps the Button.

In other words, I want all the buttons to be of the same width, regardless of the amount of text in the textviews. Is this at all possible?

Solution 1

I think you should try it the other way round. Make the TextView be to the left of the button. This way the Textview won't overlap the Button. If you want it to be cut of at the end of the line you have to constrain it to one line. At the moment it would just move the rest of the text to the next line.

This should do the trick:

<Button
    android:id="@+id/list_item_button"
    android:text="Click me!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"/>

<TextView
    android:id="@+id/list_item_text"
    android:text="veryveryveryveryveryveryveryveryveryverylong"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/list_item_button"
    android:ellipsize="end" />

</RelativeLayout>

Solution 2

Before anyone tries the method shown above (with the RelativeLayout), you should use LinearLayout for this. The weights should be set correctly: the element that needs to take up the empty space has to have a weight of 1 and width set to fill_parent, the element that needs to keep its minimal size has to have a weight of 0 with a width of wrap_content.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight">
<TextView
    android:id="@+id/list_item_text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight=1
    android:ellipsize="end" />

<Button
    android:id="@+id/list_item_button"
    android:text="Click me!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight=0/>

</LinearLayout>