Layout 4 Buttons in Android

Question

I'm pretty new to Android-development. I'm currently working on an app, where i need to layout 4 buttons on an screen. Button 1 + 2 should be in the first row and 3 + 4 in the second row. I want each button to be the same height and width. And as there are multiple screen sizes out there, i want the buttons-width be 40% of the screen width. Is something like this possible to make just by layouting, or do i need to calculate everything in code?

Note: I want to deploy the app to devices running Android 2.2 or higher.

Here's a sample graphic.

EDIT: For all who are searching for the square stuff.. Here is the solution: http://android-layouts.com/category/tags/square

Answer 1

As pointed out by Romain Guy in this answer:

You cannot use percentages to define the dimensions of a View inside a RelativeLayout. The best ways to do it is to use LinearLayout and weights, or a custom Layout.

So what you are looking for is a LinearLayout and the android:layout_weight attribute.

The following code will create the layout from your screenshot:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="3" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4" />
    </LinearLayout>

</LinearLayout>

And the result:

Answer 2

try this

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


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

    <Button
        android:id="@+id/button1"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="0.4"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="0.6"
        android:text="Button" />

    </LinearLayout>


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

    <Button
        android:id="@+id/button3"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="0.4"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="0.6"
        android:text="Button" />

    </LinearLayout>



</LinearLayout>

so for solving this problem you must use android:layout_weight="40/100"="0.4"
and before it you must set android:layout_width to 0 .becuase without it android:layout_weight="40/100"="0.4" dont work.
for more details aboute ``android:layout_weight` go
What does android:layout_weight mean?

UPDATE 1

for doing this task for height of button try below code

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


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0px"
        android:layout_weight="0.6"
        android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0px"
        android:layout_height="fill_parent"
        android:layout_weight="0.4"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0px"
        android:layout_height="fill_parent"
        android:layout_weight="0.6"
        android:text="Button" />

    </LinearLayout>


    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="0px"
        android:layout_weight="0.4"
        android:orientation="horizontal" >

    <Button
        android:id="@+id/button3"
        android:layout_width="0px"
        android:layout_height="fill_parent"
        android:layout_weight="0.4"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="0px"
        android:layout_height="fill_parent"
        android:layout_weight="0.6"
        android:text="Button" />

    </LinearLayout>



</LinearLayout>

Answer 3

I would start placing the first two buttons inside a horizontal LinearLayout, and the second 2 on another horizontal LinearLayout. Then add padding to the buttons to separate them. As far as the 40% maybe you can play with the weight XML attribute.