LinearLayout text wrap problem when having two buttons of same size plus one stretched in the center

Question

Looks like there's a plenty of questions about centering, same size etc, but so far I didn't find the exactly my case so I dare to ask :)

What I need is a layout of three buttons like this:

[ previous ][*select*] [  next  ]

where [previous] and [next] buttons are of the same size (i.e. in this case, size of the [previous] button as it is bigger), and the [*select*] button should stretch to occupy all of the available width.

Following the hints of making two buttons in LinearLayout same sized, i came up with the following xml file:

<LinearLayout
    android:id="@+id/button_bar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" >

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Previous" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Select" />

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Next" />

</LinearLayout>

This almost works :) Except one thing: instead of making Next button to match the size of Previous button, android makes Previous button to be the size of the Next :) And because of this the text "Previous" gets wrapped in two lines, like

Previ
ous

Dunno if this is a bug or not, but can you advice me a workaround or some another way to achive the desired layout?

Thank you!

Answer 1

In that sort of case I would go for a TableLayout, in which you have one row, and a weight of 1 for EACH button. and the stretchColumn attribute put to column 1. Does this make any difference?

Answer 2

I'm not sure if you can match a size to some other besides by doing this in code. The easiest solution is probably adjusting the previous and next button widths in dp/sp units until they look good and have the select button be the only one with the layout_weight attribute.

Answer 3

I'd suggest using a RelativeLayout

<RelativeLayout
    android:id="@+id/buttons"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"

    android:clickable="false">

    <Button
    android:id="@+id/previous"

    android:layout_width="30dp"
    android:layout_height="wrap_content"
    android:text="Previous" 

    android:layout_alignParentLeft="true"/>

    <Button
    android:id="@+id/next"

    android:layout_width="30dp"
    android:layout_height="wrap_content"
    android:text="Next" 

    android:layout_alignParentRight="true"/>

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Select"

    android:layout_toRightOf="@id/previous"
    android:layout_toLeftOf="@id/next" />
</RelativeLayout>

This should work.

Answer 4

Hi If you are including "android:layout_weight" you should give either "android:layout_width" or "android:layout_height" as "fill_parent"

modify your code like this

<LinearLayout
android:id="@+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Previous" />

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1.5"
    android:text="Select" />

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Next" />