TableLayout with different columns at different rows
<p>I try to create a TableLayout with multi rows, and each row is having different columns</p>

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

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

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

        &lt;View android:layout_height="2dip"
            android:background="#FF909090" /&gt;
    &lt;/TableLayout&gt;   
&lt;/LinearLayout&gt;
</code></pre>

<p>Here is the outcome.</p>

<p><img src="http://i.stack.imgur.com/9PGi9.png" alt="enter image description here"></p>

<p>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.</p>

<p>I use the following code.</p>

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

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

        &lt;View android:layout_height="2dip"
            android:background="#FF909090" /&gt;

        &lt;TableRow&gt;
            &lt;TextView
                android:id="@+id/col1"
                android:gravity="left"
                android:text="Column 1"
            /&gt;
            &lt;TextView
                android:id="@+id/col2"
                android:gravity="right"
                android:text="Column 2"
            /&gt;
            &lt;TextView
                android:id="@+id/col3"
                android:gravity="left"
                android:text="Column 3"
            /&gt;
            &lt;TextView
                android:id="@+id/col4"
                android:gravity="right"
                android:text="Column 4"
            /&gt;            
        &lt;/TableRow&gt;        


        &lt;View android:layout_height="2dip"
            android:background="#FF909090" /&gt;

    &lt;/TableLayout&gt;   
&lt;/LinearLayout&gt;
</code></pre>

<p>Here is the outcome.</p>

<p><img src="http://i.stack.imgur.com/zwpe5.png" alt="enter image description here"></p>

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

<p><img src="http://i.stack.imgur.com/COa4N.jpg" alt="enter image description here"></p>

<p>How can I improve my XML to achieve the above effect?</p>
