Icon menu with TableView (Google+ like)
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>
&开发者_运维知识库lt;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.
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
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.
精彩评论