Tables

Let's start with a basic app...

F:\work> mvn archetype:generate -DarchetypeCatalog=http://kallisti.eoti.org:8081/content/repositories/snapshots/archetype-catalog.xml

2: http://kallisti.eoti.org:8081/content/repositories/snapshots/archetype-catalog.xml -> galatea-archetype (null)
Choose a number: : 2
groupId: org.eoti.android.table
artifactId: TableTest
version: 1.0-SNAPSHOT
package: org.eoti.android.table

F:\work> cd TableTest
F:\work\TableTest> mvn clean install

Now, let's create a new src/main/android/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="cell">
        <item name="android:layout_height">32px</item>
        <item name="android:layout_width">32px</item>
    </style>
</resources>

Edit src/main/android/res/layout/main.xml:

<?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="wrap_content">

    <TableRow>
        <!-- empty corner -->
        <TextView
            style="@style/cell"
            android:text=" "/>
        <!-- top row -->
        <TextView
            style="@style/cell"
            android:text="C1"/>
        <TextView
            style="@style/cell"
            android:text="C2"/>
        <TextView
            style="@style/cell"
            android:text="C3"/>
    </TableRow>

    <!-- row 1 -->
    <TableRow>
        <!-- row 1: left edge -->
        <TextView
            style="@style/cell"
            android:text="R1"/>
        <!-- row 1, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x1"/>
        <!-- row 1, col 2 -->
        <TextView
            style="@style/cell"
            android:text="2x1"/>
        <!-- row 1, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x1"/>
    </TableRow>

    <!-- row 2 -->
    <TableRow>
        <!-- row 2: left edge -->
        <TextView
            style="@style/cell"
            android:text="R2"/>
        <!-- row 2, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x2"/>
        <!-- row 2, col 2 -->
        <TextView
            style="@style/cell"
            android:text="2x2"/>
        <!-- row 2, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x2"/>
    </TableRow>

    <!-- row 3 -->
    <TableRow>
        <!-- row 3: left edge -->
        <TextView
            style="@style/cell"
            android:text="R3"/>
        <!-- row 3, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x3"/>
        <!-- row 3, col 2 -->
        <TextView
            style="@style/cell"
            android:text="2x3"/>
        <!-- row 3, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x3"/>
    </TableRow>
</TableLayout>

Redeploy (mvn clean install) and you should see a fairly unimpressive table.

Let's see if we can make it look a little better...

Update your styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="cell">
        <item name="android:layout_height">32px</item>
        <item name="android:layout_width">32px</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">2dp</item>
    </style>
    <style name="header" parent="@style/cell">
        <item name="android:background">#4D62A4</item>
        <item name="android:textColor">#000000</item>
        <item name="android:textStyle">bold</item>
    </style>
</resources>

And we will change the style of the header column and rows:

<?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="wrap_content">

    <TableRow>
        <!-- empty corner -->
        <TextView
            style="@style/header"
            android:text=" "/>
        <!-- top row -->
        <TextView
            style="@style/header"
            android:text="C1"/>
        <TextView
            style="@style/header"
            android:text="C2"/>
        <TextView
            style="@style/header"
            android:text="C3"/>
    </TableRow>

    <!-- row 1 -->
    <TableRow>
        <!-- row 1: left edge -->
        <TextView
            style="@style/header"
            android:text="R1"/>
        <!-- row 1, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x1"/>
        <!-- row 1, col 2 -->
        <TextView
            style="@style/cell"
            android:text="2x1"/>
        <!-- row 1, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x1"/>
    </TableRow>

    <!-- row 2 -->
    <TableRow>
        <!-- row 2: left edge -->
        <TextView
            style="@style/header"
            android:text="R2"/>
        <!-- row 2, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x2"/>
        <!-- row 2, col 2 -->
        <TextView
            style="@style/cell"
            android:text="2x2"/>
        <!-- row 2, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x2"/>
    </TableRow>

    <!-- row 3 -->
    <TableRow>
        <!-- row 3: left edge -->
        <TextView
            style="@style/header"
            android:text="R3"/>
        <!-- row 3, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x3"/>
        <!-- row 3, col 2 -->
        <TextView
            style="@style/cell"
            android:text="2x3"/>
        <!-- row 3, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x3"/>
    </TableRow>
</TableLayout>

Redeploy (mvn clean install).

That's all well and good... but what if we want to do spanning?

Change row 2:

    <!-- row 2 -->
    <TableRow>
        <!-- row 2: left edge -->
        <TextView
            style="@style/header"
            android:text="R2"/>
        <!-- row 2, col 1 -->
        <TextView
            style="@style/cell"
            android:layout_column="1"
            android:layout_span="2"
            android:text="1x2"/>
        <!-- row 2, col 2 -->

        <!--<TextView-->

            <!--style="@style/cell"-->

            <!--android:text="2x2"/>-->
        <!-- row 2, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x2"/>
    </TableRow>

   
And let's make it a little easier to see where the data cells are. Add this to your @style/cell:

<item name="android:background">#333333</item>

Redeploy (mvn clean install).

Ok, this is starting to look really good.... but... what if I want more than 1 view added to a cell?

Let's replace "row 1, col 2":

    <!-- row 1 -->
    <TableRow>
        <!-- row 1: left edge -->
        <TextView
            style="@style/header"
            android:text="R1"/>
        <!-- row 1, col 1 -->
        <TextView
            style="@style/cell"
            android:text="1x1"/>

        <!-- row 1, col 2 -->

        <LinearLayout

                android:orientation="horizontal"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content">

            <ImageView

                style="@style/cell"

                android:src="@drawable/icon"/>

            <ImageView

                style="@style/cell"

                android:src="@drawable/icon"/>

        </LinearLayout>
        <!-- row 1, col 3 -->
        <TextView
            style="@style/cell"
            android:text="3x1"/>
    </TableRow>

Redeploy (mvn clean install). You should now see two icons in one cell.

Last, but not least; what if we want the table to stretch across the screen?

Add this to the outside TableLayout:

android:stretchColumns="*"

Redeploy (mvn clean install) and it should now span width.