How to fill screen with four buttons with the Table layout?

Question

I've the following layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:id="@+id/relativeLayout1" android:layout_height="fill_parent">
    <TableLayout android:id="@+id/TableLayout01" android:stretchColumns="*"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_centerInParent="true" >
        <TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <Button android:id="@+id/syncDownload" android:layout_margin="5dp" android:layout_weight="1"
                android:layout_height="fill_parent" android:layout_width="fill_parent"
                android:text="Download1" android:textColor="#EDFF99"
                android:textStyle="bold" android:background="@drawable/custom_button" />
            <Button android:id="@+id/branchesButton" android:layout_weight="1"
                android:layout_margin="5dp" android:layout_height="wrap_content"
                android:layout_width="fill_parent" android:text="Download2"
                android:textColor="#EDFF99" android:textStyle="bold"
                android:background="@drawable/custom_button" />
        </TableRow>
        <TableRow android:id="@+id/TableRow02" android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <Button android:id="@+id/attendanceButton" android:layout_weight="1"
                android:layout_margin="5dp" android:layout_height="wrap_content"
                android:layout_width="fill_parent" android:text="Upload1"
                android:textColor="#EDFF99" android:textStyle="bold"
                android:background="@drawable/custom_button" />
            <Button android:id="@+id/syncUpload" android:layout_margin="5dp" android:layout_weight="1"
                android:layout_height="wrap_content" android:layout_width="fill_parent"
                android:text="Upload2" android:textColor="#EDFF99" android:textStyle="bold"
                android:background="@drawable/custom_button" />
        </TableRow>
    </TableLayout>
</RelativeLayout>

which outs

How can I stretch the four buttons to fill the entire screen?

Solution 1

You don't need a TableLayout for this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">
        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            ... />
        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            ... />
    </LinearLayout>
    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">
        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            ... />
        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            ... />
    </LinearLayout>
</LinearLayout>

Solution 2

Change the TableLayout height to fill_parent using android:layout_height="fill_parent"

Change each TableRow's the height to 0px using android:layout_height="0px"

and set each one's weight to 1 using android:layout_weight="1"

Finally do not forget to set the Button's height to fill_parent

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableLayout android:id="@+id/TableLayout01" android:stretchColumns="*"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_centerInParent="true" >
        <TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent"
             android:layout_height="0px"  android:layout_weight="1" >
            <Button android:layout_margin="5dp" android:layout_weight="1"
                android:layout_height="fill_parent" android:layout_width="fill_parent"
                android:text="Download1" android:textColor="#EDFF99"
                android:textStyle="bold" />
            <Button android:layout_weight="1"
                android:layout_margin="5dp" android:layout_height="fill_parent"
                android:layout_width="fill_parent" android:text="Download2"
                android:textColor="#EDFF99" android:textStyle="bold" />
        </TableRow>
        <TableRow android:layout_width="fill_parent"
            android:layout_height="0px" android:layout_weight="1" >
            <Button android:layout_weight="1"
                android:layout_margin="5dp" android:layout_height="fill_parent"
                android:layout_width="fill_parent" android:text="Upload1"
                android:textColor="#EDFF99" android:textStyle="bold"/>
            <Button android:layout_margin="5dp" android:layout_weight="1"
                android:layout_height="fill_parent" android:layout_width="fill_parent"
                android:text="Upload2" android:textColor="#EDFF99" android:textStyle="bold"/>
        </TableRow>
    </TableLayout>
</RelativeLayout>

Comments

[Nikola Despotoski]

Stretch the table layout to android:layout_height="fill_parent"

[Mithun Sreedharan]

@Nikola Despotoski Already tried that, what happens is adding android:layout_height="fill_parent" will move the four buttons from the center of the screen to top.

[Mithun Sreedharan]

Already tried that, what happens is adding android:layout_height="fill_parent" to TableLayout and two TableRows will move the four buttons from the center of the screen to top.

[Mithun Sreedharan]

Great, you have made it so simple