Can't get rows in TableLayout to center horizontally

Question

I can't get the rows in my TableLayout to center on the screen. I'm trying to create a 4x4 table of clickable images and want them centered on the screen. It ends of drawing them left aligned, I would like them to be centered with space on either side. Here is the code I have:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp">

        <TableRow android:layout_gravity="center_horizontal">

            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp"
                android:layout_gravity="center" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" 
                android:layout_gravity="center" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" 
                android:layout_gravity="center" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" 
                android:layout_gravity="center" />

        </TableRow>

        <TableRow android:layout_gravity="center_horizontal">

            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />

        </TableRow>

        <TableRow android:layout_gravity="center_horizontal">

            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />
            <ImageView android:src="@drawable/rocket"
                android:layout_width="60dp"
                android:layout_height="60dp" 
                android:padding="3dp" />            
        </TableRow>

    </TableLayout>


</LinearLayout>

Any suggestion?

Solution 1

try with android:layout_gravity="center_horizontal" as follows

 <TableRow android:layout_gravity="center_horizontal" 
          android:layout_weightsum = "4">

                <ImageView android:src="@drawable/rocket"
                    android:layout_width="60dp"
                    android:layout_height="60dp" 
                    android:padding="3dp"
                    android:layout_weight = "1" />
                <ImageView android:src="@drawable/rocket"
                    android:layout_width="60dp"
                    android:layout_height="60dp" 
                    android:padding="3dp"
                    android:layout_weight = "1"  />
                <ImageView android:src="@drawable/rocket"
                    android:layout_width="60dp"
                    android:layout_height="60dp" 
                    android:padding="3dp"
                    android:layout_weight = "1"  />
                <ImageView android:src="@drawable/rocket"
                    android:layout_width="60dp"
                    android:layout_height="60dp" 
                    android:padding="3dp"
                    android:layout_weight = "1"  />            
            </TableRow>

Solution 2

Usually we use layout_gravity to align.

try

android:gravity="center_horizontal"

in your code.

android:gravity aligns the data to horizontal center.

Solution 3

In your case, bieno002, make sure your <TableLayout> has layout_width set to "wrap_content". This will give it space to breathe on either side.

Then, just add a android:layout_gravity="horizontal" to your <TableLayout> node. Like so:

<TableLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <TableRow>
        <TextView (or whatever)>
        <TextView (or whatever)>
    </TableRow>
</TableLayout>

Comments

[NBaua]

android:layout_weightsum - seems deprecated