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.

Google+ Android App

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>

TableLayout

I will appreciate any tips and ideas.

Try using a `GridView` instead. The tutorial in the following link uses an `ImageAdapter` to automatically insert images. I think everything should fit properly and images will be centred in their own grid 'cells'. http://developer.android.com/resources/tutorials/views/hello-gridview.html — Squonk, Oct 16 '11 at 23:35

Drusantia · Accepted Answer · 2012-01-15T12:02:01.517

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

score 0 · Answer 2 · answered Oct 16 '11 at 23:48

0

try android:gravity="center" in the TableLayout spec. This will place the table rows in the center of the screen.

also try by adding android:gravity="center" in the TableRow for placing the buttons in the center of the table row.

answered Oct 16 '11 at 23:48

500865

6,920
7
44
87

Unfortunately, it doesn't help. The effect is quite strange: http://i53.tinypic.com/rj124k.png – Jacek Oct 17 '11 at 00:25

Icon menu with TableView (Google+ like)

2 Answers2