Icon menu with TableView (Google+ like)

Question

I am working on icon based main menu for my Android application (see attached image - Google+). The obvious layout for this is a TableLayout.

However, I have no idea and could not find information on how to center the table itself and the icons inside. The code I came up with is as follows (and resulting image is below the code):

<TableLayout android:layout_width="fill_parent" android:id="@+id/tableLayout1" android:layout_height="fill_parent" android:stretchColumns="1" android:padding="20dp">
    <TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp"  >
        <Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
        <Button android:text="Button" android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
    </TableRow>
    <TableRow android:id="@+id/tableRow2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp" >
        <Button android:text="Button" android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" ></Button>
        <Button android:text="Button" android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
    </TableRow>
</TableLayout>

I will appreciate any tips and ideas.

Answer 1

i just made a program main menu like you need. It's density-independent, but i put it on a scrollview just to make sure it's usable everywhere. You can change the buttons to imagebuttons if you like, so you get the menu you want.

A little explanation to the code:

• every row has a textview on the left and on the right, as placeholders. The tablelayout'a android:stretchColumns="0,3" stretchs the textviews to fill the space next to the buttons.
• you can change the margins so the buttons are nearer or further from each other.

And now here's the xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableLayout android:layout_gravity="center" 
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:stretchColumns="0,3">
        <TableRow android:layout_gravity="center">
            <TextView />
            <Button android:text="1" android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <Button android:layout_gravity="center_vertical" 
                android:text="2" android:layout_margin="15dp"
                android:width="100dip" android:height="100dip" />
            <TextView />
        </TableRow>

        <TableRow android:layout_gravity="center">
            <TextView />
            <Button android:text="3"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <Button android:text="4"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <TextView />
        </TableRow>

        <TableRow android:layout_gravity="center">
            <TextView />
                <Button android:text="5"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <Button android:text="6"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <TextView />
        </TableRow>
    </TableLayout>
</ScrollView>

And this is how it looks like: http://db.tt/yQ5NFhmk