Buttons in RelativeLayout fill screen width

Question

As you can see above, I have four rows of Buttons in a RelativeLayout . How can I have the Buttons cover the screen width evenly?

I've tried all sorts of things but nothing has worked: I tried setting the RelativeLayout width to match_parent and making all the Button's layout_width = fill_parent and all sorts of things like that.

Any ideas?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Game" >

<RelativeLayout 
    android:id = "@+id/rl"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    >

<Button
    android:id="@+id/button0"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button1"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_toRightOf="@+id/button0"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button2"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_toRightOf="@+id/button1"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button3"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_toRightOf="@+id/button2"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

...
...
...

<Button
    android:id="@+id/button12"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_below="@+id/button8"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button13"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_below="@+id/button9"
    android:layout_toRightOf="@+id/button12"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button14"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_below="@+id/button10"
    android:layout_toRightOf="@+id/button13"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button15"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_below="@+id/button11"
    android:layout_toRightOf="@+id/button14"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>


    </RelativeLayout>
</RelativeLayout>

Answer 1

The best way is to have four vertical Linear layouts which each contain their buttons in a horizontal Linear Layout. Make sure that all the buttons width is fill_parent

Then set the weight attribute to each of the made the LinearLayouts width = match_parent and set the Buttons layout_weight = "1"made the LinearLayouts width = match_parent and set the Buttons layout_weight = "1" to 1 like this:

android:layout_weight = "1"

Make sure the Linear layouts width are also set to match_parent

Basically this adds up the weights and divides the screen width into between the buttons.

The solution to your problem is in weights.

Hope this helps. Happy coding :)

PS If this answers your question please mark this as the correct answer

Answer 2

You could get the screen dimensions and use them to decide the buttons size

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;

and then use these sizes to determine the size of your buttons (each size would be the width divided by 4)

Fiddling around with this should get you where you want

Answer 3

Why don't you use LinearLayout and weight property for a row? It could be something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Game" >

<RelativeLayout 
    android:id = "@+id/rl"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    >

<LinearLayout
    android:id="@+id/ll_row_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

<Button
    android:id="@+id/button0"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:layout_weight="1"
    android:tag="0"/>

<Button
    android:id="@+id/button1"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_weight="1"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button2"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:layout_weight="1"
    android:tag="0"/>

<Button
    android:id="@+id/button3"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:layout_weight="1"
    android:tag="0"/>

</LinearLayout>

...
...
...

<LinearLayout
    android:id="@+id/ll_row_4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_below="@+id/ll_row_3">

<Button
    android:id="@+id/button12"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:background="@drawable/button"
    android:layout_weight="1"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button13"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_weight="1"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button14"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_weight="1"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>

<Button
    android:id="@+id/button15"
    android:layout_width="@dimen/size"
    android:layout_height="@dimen/size"
    android:layout_weight="1"
    android:background="@drawable/button"
    android:onClick="ButtonOnClick" 
    android:tag="0"/>
</LinearLayout>

    </RelativeLayout>
</RelativeLayout>

If it won't work, try to set buttons' android:layout_width property to 0dp