How to apply row span in tablelayout?

Question

How to apply row_span to TableLayout?

I want to make something similar to this image, but i don't know how to do it.

What is the correct way to make something like this?

Answer 1

TableLayout does not support row spans, only column spans. GridLayout supports both row and column spans:

(picture from http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html)

Answer 2

Little cheating (maybe quite complex to code and only valid for a simple design):

Make a TableLayout. Put another TableLayout inside the first column and a view that you want to have the rowspan in the second column. This inner TableLayout can have as many TableRows as you whish the other view to span.

Here's the code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:weightSum="3">

            <TableLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.5">

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_blue_dark">

                    <TextView
                        android:text="Row 1"/>

                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_blue_light">

                    <TextView
                        android:text="Row 2"/>

                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_blue_bright">

                    <TextView
                        android:text="Row 3"/>

                </TableRow>

            </TableLayout>

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1.5"
                android:text="Second column, rowspan 3"
                android:background="@android:color/holo_purple"
                android:gravity="center"/>

        </TableRow>

    </TableLayout>

</LinearLayout>

So, tu sum up:

TableLayout: first column (TableLayout with as many TableRows as we want), second column (element that will take up all those rows' space).

Answer 3

Have you used "android:layout_span" it can be used to span rows. You can not get it via Ctrl+Space you need to type it manually.