Android: how to center view within column of TableLayout?

ab11 picture ab11 · Apr 1, 2011 · Viewed 27.4k times · Source

I am trying to create a TabeLayout with a grid of CheckBoxes. Across the top are 2 headers, and each additional row consists of a label and 2 CheckBoxes. I would like the table to fill all available space, the first column to be oriented to the left, and the CheckBoxes and their headers to be centered within their columns. In the below layout, the headers appear centered properly, but the CheckBoxes are not. I added a background color to one of the CheckBoxes, this demonstrates that the CheckBox actually grew to fill its column (which is why it won't center as desired); despite the "wrap_content" layout param.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical">
    <TableLayout 
        android:stretchColumns="1,2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TableRow>
            <TextView 
                android:text="" 
                android:gravity="center_horizontal"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </TextView>
            <TextView 
                android:text="First category" 
                android:gravity="center_horizontal"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </TextView>
            <TextView 
                android:text="2nd category" 
                android:gravity="center_horizontal"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </TextView>
        </TableRow>
        <TableRow>
            <TextView 
                android:text="Row 1: " 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </TextView>
            <CheckBox
                android:background="#FF001122"
                android:layout_height="50dip"
                android:layout_width="wrap_content" 
                android:gravity="center_horizontal">
            </CheckBox>
            <CheckBox
                android:layout_height="50dip"
                android:layout_width="wrap_content" 
                android:gravity="center_horizontal">
            </CheckBox>
        </TableRow>
    </TableLayout>
</LinearLayout>

enter image description here

Answer

Brian Cooley picture Brian Cooley · Apr 1, 2011

On the CheckBox, instead of setting android:gravity="center_horizontal", you want to set android:layout_gravity="center_horizontal"

android:gravity controls how the view lays out its contents inside its own container, and since you have the width set to "wrap_content", there is no void space for the CheckBox to center itself inside of.

android:layout_weight tells the parent view (in this case the TableRow) how to position the child, so it will center the CheckBox inside the table cell.