Chris Chris - 25 days ago 6
Android Question

Center Align Table + Buttons

I want this to work on all screen sizes so I don't think using padding is the best way to solve this. I can centre everything when it is in vertical but when it is horizontal nothing seems to align...

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

<TableLayout
android:layout_height = "wrap_content"
android:layout_width="wrap_content"
android:gravity = "center"
android:layout_gravity="center_horizontal">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="24.5sp"
android:id="@+id/textView1"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="20dip"
android:text="Bubb"
android:layout_width="wrap_content">
</TextView>
</TableRow>
<TableRow android:baselineAligned="false">
<Button
android:id = "@+id/continue_button"
android:background="@drawable/and_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft = "@dimen/pad_horizontal"
android:paddingRight = "@dimen/pad_horizontal"
android:paddingTop = "@dimen/pad_vertical"
android:paddingBottom = "@dimen/pad_vertical"
android:text = "@string/first_label"
android:layout_margin="@dimen/margin"/>
</TableRow>
<TableRow>
<Button
android:id = "@+id/new_button"
android:text = "@string/second_label"
android:background="@drawable/and_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft = "@dimen/pad_horizontal"
android:paddingRight = "@dimen/pad_horizontal"
android:paddingTop = "@dimen/pad_vertical"
android:paddingBottom = "@dimen/pad_vertical"
android:layout_margin="@dimen/margin"/>
</TableRow>
<TableRow>
<Button
android:id = "@+id/about_button"
android:text = "@string/third_label"
android:background="@drawable/and_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft = "@dimen/pad_horizontal"
android:paddingRight = "@dimen/pad_horizontal"
android:paddingTop = "@dimen/pad_vertical"
android:paddingBottom = "@dimen/pad_vertical"
android:layout_margin="@dimen/margin"/>
</TableRow>
<TableRow>
<Button
android:id = "@+id/exit_button"
android:text = "@string/fourth_label"
android:background="@drawable/and_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft = "@dimen/pad_horizontal"
android:paddingRight = "@dimen/pad_horizontal"
android:paddingTop = "@dimen/pad_vertical"
android:paddingBottom = "@dimen/pad_vertical"
android:layout_margin="@dimen/margin"/>
</TableRow>
</TableLayout>

</LinearLayout>


Any help is great.

Answer

It's not clear from your question precisely how you want your layout to look, but I'm guessing (from your XML, at least) that you are after something like this:

enter image description here

I don't have your drawables, so can't include those.

If that's the case, then this layout does the trick:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:gravity="center">
    <TextView android:text="Bubb" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button android:text="Button" android:id="@+id/button1"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
    <Button android:text="Button" android:id="@+id/button2"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
    <Button android:text="Button" android:id="@+id/button3"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
    <Button android:text="Button" android:id="@+id/button4"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</LinearLayout>

EDIT: That aligns in a vertical list when switched to landscape:

enter image description here

If you require a horizonal list, simply copy this layout to "res/layout-land" and change the orientation in the outer LinearLayout to "horizontal" :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:gravity="center">

and you'll get this:

enter image description here