Android button layout - get two buttons side-by-side across entire screen

Question

I have two buttons which I would like to appear side-by-side horizontally, but together they fill the horizontal length of the phone. The height is wrap content, that's fine. My issue right now is that only one button is showing up (stretching across the screen).

Here is my XML code:

<LinearLayout 
   android:id="@+id/page_buttons"
   android:orientation="horizontal"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:gravity="center_horizontal"

   >
   <Button
        android:id="@+id/prevButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Previous"
   /> 

   <Button
        android:id="@+id/nextButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Next"
   />

Answer 1

Change your Buttons XML to include the layout_weight attribute:

<Button android:id="@+id/nextButton"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Next"/>

Answer 2

Since nobody is explaining why their solutions work, I will give it a go.

The problem lies in the layout of the buttons. The two concerned attributes are layout_width and layout_weight.

In other layout systems, when you indicate that each element of a layout has to fill the parent (layout_width="fill_parent"), they do so by distributing equally the space of the parent between them. So, each of them would have the same size.

Instead, in Android's layout system, if both elements have layout_width="fill_parent" the first element (in your case, the Previews button) will be stretched to fill the parent and the second (or third, or etc.) will not have any space left to distribute, so it will not be visible.

Now, to make it understand that you want both buttons to show, you set the layout_weight for each button. To make the buttons have the same size, set the same layout weight to both of them.

The layout_weight defines how many "parts" (or segments) of the parent each of the buttons occupy. The parent will be cut into a number of segments equal to the sum of the children's segments. If you want to make one button three times bigger then the other, you have to assign it the number of parts equal to the number of parts of the first button, multiplied by three.

So if you want your Next button to be two times bigger then the Previews button, you can do this:

• for Previews button: layout_weight=1
• for Next button: layout_weight=2

In consequence, the parent will be cut in 3 parts, 2 of which will be allocated to the Next button and 1 to the Previews button.

The example taken here is for buttons and horizontal layout, but this will work just fine for any type of object and also for vertical layout parent.

Answer 3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
<Button
  android:id="@+id/button01"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:layout_below="@id/entry" 
  android:layout_alignParentLeft="true"
  android:layout_toLeftOf="@+id/space"/>
<TextView
  android:id="@+id/space"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:layout_centerHorizontal="true"/>
<Button
  android:id="@+id/button02"
  android:layout_toRightOf="@id/button01"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_below="@id/entry" 
  android:layout_alignParentRight="true"/>  
</RelativeLayout>

Seems like you want two equal buttons, not wrapped content. I created a centered spacer using TextView, and relatively aligned to that. Left button to parent left and spacer, Right button to Left Button and parent right.