Center TableLayout row in android xml

Question

I am trying to align in the center 2 buttons in a table row, no matter the screen resolution, so i am trying to avoid using specified margins. This is my code, it works only with declared margins, and i am using gravity and layout gravity...nothing worked for me. They did not align in the center. Does anyone have an idea? Thanks anyway.

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <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:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="100px"
            android:stretchColumns="1" >

            <TableRow
                android:id="@+id/TableRow01"
                android:layout_gravity="center"
                android:paddingLeft="50dip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <Button
                    android:id="@+id/image1Btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:drawablePadding="-5sp"
                    android:drawableTop="@drawable/image1"
                    android:gravity="center"
                    android:src="@drawable/image1"
                    android:text="@string/image1text"
                    android:textColor="@color/darkgrey" />

               <Button
                    android:id="@+id/image2Btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:drawablePadding="-5sp"
                    android:drawableTop="@drawable/image2"
                    android:gravity="center"
                    android:src="@drawable/image2"
                    android:text="@string/image2text"
                    android:textColor="@color/darkgrey" />
            </TableRow>

            <TableRow
                android:id="@+id/TableRow02"
                android:paddingLeft="50dip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

               <Button
                    android:id="@+id/image3Btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:drawablePadding="-5sp"
                    android:drawableTop="@drawable/image3"
                    android:gravity="center"
                    android:src="@drawable/image3"
                    android:text="@string/image3text"
                    android:textColor="@color/darkgrey" />

                <Button
                    android:id="@+id/image4Btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:drawablePadding="-5sp"
                    android:drawableTop="@drawable/image4"
                    android:gravity="center"
                    android:src="@drawable/image4"
                    android:text="@string/image4text"
                    android:textColor="@color/darkgrey" />
            </TableRow>
        </TableLayout>
    </RelativeLayout>
</ScrollView>

Answer 1

Put your buttons in a couple of LinearLayouts instead of a TableRow.

<TableLayout
    ...
    >

    <LinearLayout
        android:orientation="vertical"
        >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center"
            >

            <Button
                android:id="@+id/image1Btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:drawablePadding="-5sp"
                android:drawableTop="@drawable/image1"
                android:src="@drawable/image1"
                android:text="@string/image1text"
                android:textColor="@color/darkgrey" />

            <Button
                android:id="@+id/image2Btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:drawablePadding="-5sp"
                android:drawableTop="@drawable/image2"
                android:src="@drawable/image2"
                android:text="@string/image2text"
                android:textColor="@color/darkgrey" />

        </LinearLayout>
    </LinearLayout>

    ...
</TableLayout>

The outer LinearLayout will be stretched to the width of the TableLayout and have its height set to wrap_content by TableLayout. The inner LinearLayout will be centered horizontally in the outer LinearLayout because the latter is vertically oriented.