TableLayout with different columns at different rows

Question

I try to create a TableLayout with multi rows, and each row is having different columns

The following show list view. For each row of list view, it contains a table layout with only 1 row, 2 columns.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="6dip">
    <ImageView
        android:id="@+id/color_label"
        android:layout_width="12dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="6dip"
        android:background="#ffffff" />

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">
        <TableRow>
            <TextView
                android:id="@+id/toptext"
                android:gravity="left"
            />
            <TextView
                android:id="@+id/bottomtext"
                android:gravity="right"
            />       
        </TableRow>        

        <View android:layout_height="2dip"
            android:background="#FF909090" />
    </TableLayout>   
</LinearLayout>

Here is the outcome.

Later, I want to further improve the TableLayout. With its 1st row is having 2 columns. and its 2nd row is having 4 columns, with a vertical line separates 1,2 columns with 3,4 columns.

I use the following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="6dip">
    <ImageView
        android:id="@+id/color_label"
        android:layout_width="12dip"
        android:layout_height="fill_parent"
        android:layout_marginRight="6dip"
        android:background="#ffffff" />

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">
        <TableRow>
            <TextView
                android:id="@+id/toptext"
                android:gravity="left"
            />
            <TextView
                android:id="@+id/bottomtext"
                android:gravity="right"
            />       
        </TableRow>        

        <View android:layout_height="2dip"
            android:background="#FF909090" />

        <TableRow>
            <TextView
                android:id="@+id/col1"
                android:gravity="left"
                android:text="Column 1"
            />
            <TextView
                android:id="@+id/col2"
                android:gravity="right"
                android:text="Column 2"
            />
            <TextView
                android:id="@+id/col3"
                android:gravity="left"
                android:text="Column 3"
            />
            <TextView
                android:id="@+id/col4"
                android:gravity="right"
                android:text="Column 4"
            />            
        </TableRow>        


        <View android:layout_height="2dip"
            android:background="#FF909090" />

    </TableLayout>   
</LinearLayout>

Here is the outcome.

However, the 2nd row of table layout is not something I want. What I wish to have is something like this.

How can I improve my XML to achieve the above effect?

Answer 1

You can create your own drawable xmls (inside res/drawable-[h|m|l]dpi) for the different item renderers, and set them as background.

This way you can achieve any kind of borders, shapes, etc., and in your adapter's getView method you just inflate the view you need with the proper backgroundDrawable.