Problem with LinearLayout text wrapping when there are two buttons of the same size plus one in the middle

Question

It seems that there are a lot of questions about centering, about the same size, etc., but so far I have not found exactly my business, so I dare to ask :)

I need a layout of three buttons:

[ previous ][*select*] [ next ] 

where the [previous] and [next] buttons are the same (that is, in this case the size is [previous] , since it is larger), and the [* select *] button must be stretched to occupy the entire available width.

Following the prompts for creating two buttons in a LinearLayout of the same size, 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> 

It almost works :) Except for one: instead of the Next button, to match the size of the Previous , the android makes the Previous button the size of Next :) And because of this, the text "Previous" is wrapped in two lines, for example

 Previ ous 

I don’t know if this is a mistake or not, but can you advise me on a workaround or some other way to achieve the desired layout?

Thank!

Answer 1

I would suggest using 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> 

That should work.

Answer 2

If you include android: layout_weight, you must specify either android: layout_width or android: layout_height as fill_parent

change your code as follows

 <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" /> 

Answer 3

In that case, I would go to TableLayout, in which you have one row, and weight 1 for the EACH button. and the stretchColumn attribute is placed in column 1. Does it matter?

Answer 4

I'm not sure if you can match the size to another, besides doing this in code. The simplest solution is probably to adjust the previous and next width of the buttons in dp / sp units until they look good and the selection button is the only one with the layout_weight attribute.