TextView with ellipsize and buttons

Question

I'm trying to create a header with left and right buttons, and a title in the center, with a button immediately to the right of the button (which will allow selecting something). The layout should be like:

|<Button>      <TextView><Button>         <Button>|

If the title is very long, it should ellipsize. To do that, it appears the textview needs a layout_weight, as seen in this solution, otherwise it pushes the right buttons off the screen. However, setting the layout_weight for the textview pushes the center button off to the right:

|<Button>      <TextView>         <Button><Button>|

The layout as it stands is this:

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

    <Button
        android:text="Hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:text="Testing"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:singleLine="true"
        android:layout_weight="1"
        android:gravity="center"
        android:ellipsize="end"
        android:inputType="text"
        />

    <Button
        android:text="Hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <Button
        android:text="Hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

[EDIT] Trying FunkTheMonk's approach doesn't quite work, as it ends up pushing the center button out of the layout if the string is long:

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

    <Button
        android:text="Hello1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
            android:gravity="center"
            android:layout_weight="1"
        >
        <TextView
            android:text="Testing a very long text to see how it works how do you like me now this is still longer yet"
            android:layout_margin="3dp"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:singleLine="true"
            android:gravity="center"
            android:ellipsize="end"
            android:inputType="text"
            />

        <Button
            android:text="Hello2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <Button
        android:text="Hello3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

score 0 · Answer 1 · answered Nov 20 '11 at 00:14

I'm not 100% sure what you mean. But i think i got it. One easy way to do it is to use a tablerow and android:layout_marginLeft & right.

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

    <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello"
            android:layout_gravity="left|top"></Button>

        <TextView android:inputType="text" android:gravity="center"
            android:ellipsize="end" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Testing"
            android:singleLine="true"
            android:layout_marginLeft="57dp"></TextView>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_gravity="center"
            android:text="Hello"
            android:layout_marginRight="57dp"></Button>


        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello"
            android:layout_gravity="right|top"></Button>
    </TableRow>

</LinearLayout>

score 0 · Answer 2 · answered Nov 20 '11 at 00:24

Add the TextView and Button in their own horizontal linear layout, and set the weight on that. Set this new linear layout's gravity to centre and the text view and button will be centred in the available space between the two outer buttons.

If the title is long, the text view will take up as much space as it can inside the linear layout before eclipsing.

TextView with ellipsize and buttons

2 Answers2