Question

I have the following table layout which I’m using to display image buttons in a grid.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<TableRow
    android:id="@+id/tableRow4"
    android:layout_weight="1" >

    <ImageButton
        android:id="@+id/button_one"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/button"
        android:scaleType="fitCenter"
        android:src="@drawable/button_one" />

    <ImageButton
        android:id="@+id/button_two"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/button"
        android:scaleType="fitCenter"
        android:src="@drawable/button_two" />
</TableRow>

<TableRow
    android:id="@+id/tableRow4"
    android:layout_weight="1" >

    <ImageButton
        android:id="@+id/button_three"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/button"
        android:scaleType="fitCenter"
        android:src="@drawable/button_three" />
</TableRow>

As you can see, the first row contains two columns, and the second row contains one column.

I want the images to expand to fit the table cell. The edges of image button at the bottom however doesn’t quite line up with the two image buttons at the top. It’s as if there is extra padding or margin on the bottom cell.

Any ideas how to get these to line up perfectly?

Thanks in advance.

Screenshot:

Answer 1

I solved this problem…

I was originally using nine-patch drawables for the backgrounds because I had curved corners, however I forgot to remove the border from the image when I switch to regular images with sharp corners… doh! Redoing the images fixed the problem – my xml was fine as is.

/palmface