Non-symmetric android TableLayout stretches (some) columns

Question

I wrote the layout below for an Activity, just a title and four buttons in a 2x2 format:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/layout_main"
    android:gravity="center"
    android:background="@drawable/bgr_main">

<TableRow android:gravity="center_horizontal" >
    <ImageView
        android:id="@+id/img_qtitle"
        android:contentDescription="@string/qtitle_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/app_title" />
</TableRow>

<TableRow android:gravity="center_horizontal" >
    <Button
        android:id="@+id/button_showlist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip"
        android:background="@drawable/button_list"
        android:onClick="showList" />

    <Button
        android:id="@+id/button_playrandom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip"
        android:background="@drawable/button_play"
        android:onClick="playRandom" />     
</TableRow>

<TableRow android:gravity="center_horizontal" >
    <Button
        android:id="@+id/button_playfav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip"
        android:background="@drawable/button_fav"
        android:onClick="playLastFav" />

    <Button
        android:id="@+id/button_showmore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip"
        android:background="@drawable/button_more"
        android:onClick="showMore" />       
</TableRow> 
</TableLayout >

The title image is not as wide as the row's couple of button (plus padding). My problem is that the first button images in each row are shown horizontally stretched. What's the way to normalize non-symmetric tables?

---

v.2 after gopher

<TableLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/layout_main"
    android:gravity="center"
    android:background="@drawable/bgr_main">

<TableRow android:gravity="center_horizontal" >
    <ImageView
        android:id="@+id/img_qtitle"
        android:contentDescription="@string/qtitle_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/quieto_title" />
</TableRow>

<TableRow android:gravity="center_horizontal" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <Button
        android:id="@+id/button_showlist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="5dip"
        android:background="@drawable/button_list"
        android:onClick="showList" />   

    <Button
        android:id="@+id/button_playrandom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_margin="5dip"
        android:background="@drawable/button_play"
        android:onClick="playRandom" />
    </LinearLayout> 
</TableRow>

<TableRow android:gravity="center_horizontal" >    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <Button
        android:id="@+id/button_playfav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:layout_gravity="left"
        android:background="@drawable/button_fav"
        android:onClick="playLastFav" />

    <Button
        android:id="@+id/button_showmore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="5dip"
        android:background="@drawable/button_more"
        android:onClick="showMore" />
    </LinearLayout> 
</TableRow> 
</TableLayout >

That WORKS! Eclipse says: "This LinearLayout layout or its TableRow parent is useless", but for me it's ok. I won't tell the client!

Answer 1

A screenshot of what you're seeing will help.

ImageView not filling entire table

In the tablelayout properties, try specifying android:stretchColumns="*" which will allow the columns to stretch to fill the table. I believe if all the columns are allowed to stretch (as the * denotes), then they will stretch so they are even (take up the same amount of space).

Button being stretched

You specified layout_width="wrap_content" which normally would achieve what you want, but in the case of Table Layout, you can't specify a width. This is from the TableRow android documentation:

The children of a TableRow do not need to specify the layout_width and layout_height attributes in the XML file. TableRow always enforces those values to be respectively MATCH_PARENT and WRAP_CONTENT.

So you need to put another container in the Table Row, put your button in that container and set your button to wrap & align to the middle. Something like this should work:

<TableRow ...>
    <!-- Create a container -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- Place button inside Container -->
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            <!-- Place button in the middle of the container -->
            android:layout_gravity="center"
            .../>
   </LinearLayout>
</TableRow>