How to use TableLayout to create the design i want?

Question

HELP I using TableLayout & TableRow, in the picture below I trying to marge No.4 and No.6 together just like No.1 however I had no idea how to do it. For no.1 I was able to do cause I just using Layout-weight to divide the screen into 3row,3col .

<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow
    android:layout_weight="2"
    android:id="@+id/tableRow1">
    <TextView
        android:text="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:background="@android:color/holo_blue_dark" />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="2"
        android:stretchColumns="*"
        android:id="@+id/tableLayout1">
        <TableRow
            android:layout_weight="1"
            android:id="@+id/tableRow1"
            android:background="@android:color/holo_red_dark">
            <TextView
                android:text="2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_span="2"
                android:gravity="center" />
        </TableRow>
        <TableRow
            android:layout_weight="1"
            android:id="@+id/tableRow3">
            <TextView
                android:text="3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center" />
            <TextView
                android:text="4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center" />
        </TableRow>
    </TableLayout>
</TableRow>
<TableRow
    android:layout_weight="1"
    android:id="@+id/tableRow1">
    <TextView
        android:text="5"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_span="2"
        android:gravity="center"
        android:background="@android:color/holo_green_dark" />
    <TextView
        android:text="6"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="right" />
</TableRow>

below img is the result that i wants

Answer 1

Use GridLayout . Try this following code

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:padding="5dp"
android:rowCount="3"
android:columnCount="3"
android:layout_height="wrap_content">


<Button
android:text="1"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"
android:layout_rowSpan="2"
android:layout_width="wrap_content"
android:background="#abc012"/>

<Button
android:text="2"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#a01012"/>
<Button
android:text="3"
android:layout_gravity="fill"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#10fa5c"/>

<Button
android:text="4"
android:layout_rowSpan="2"
android:layout_gravity="fill_vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#9d34a1"/>

<Button
android:text="5"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#f0f53f"/>

</GridLayout>

Screen shot

Edit 1

just replace the

android:layout_height="match_parent"

instead of

android:layout_height="wrap_content"

in <GridLayout> . Then you will get output as follow as,