Tutorial 8 : Android Table Layout Example

In this tutorial, we will learn how to arrange components in rows and columns by using TableLayout. With this layout, our layout will be look more systematic, especially for those data which are needed to tabulated in the table form.

First of all, we need to create a new XML layout file for TableLayout. Same as last two tutorials before, go to File>New>XML>XML Layout File and fill in TableLayout into Root Tag column of the pop-out window (Figure 8.1).

Figure 8.1

Now we can start to design our TableLayout with several commands such as <TableRow /> to indicate a new row in our table, android:layout_column="..." to display the view in specified column and android:layout_span="..." to span view in the number of cell we want.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:padding="10sp">
        <TextView
            android:id="@+id/tvNo"
            android:text="No"
            android:textSize="20sp"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_column="1"
            android:paddingRight="10sp"
            android:gravity="center_horizontal"/>

        <TextView
            android:id="@+id/tvName"
            android:text="Name"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:paddingRight="10sp"/>

        <TextView
            android:id="@+id/tvContact"
            android:text="Contact"
            android:textSize="20sp"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_column="3"/>
    </TableRow>

Figure 8.2

With the coding in the Figure 8.2, we able to tabulate the data in the table form. We are using <TableRow /> command to put all the components in the same row, therefore the output of XML layout shown as Figure 8.3.

Figure 8.3

Next, we would like to add a new row into the table and only put the components in the column one and column three by using android:layout_column="..." command. The output XML layout should be same as Figure 8.4.

Figure 8.4

Next, we would like to merge the three column become one big column by using android:layout_span="3" command. Then, we place a button inside the relevant column and the output layout shown as Figure 8.5.

Figure 8.5

Besides that, we can add a line in the table layout by using <View /> tag and set the properties such as thickness, colour inside the tag. The Figure 8.6 is the XML layout after we add on a line on it.

Figure 8.6

That's all for this tutorial. You can download the XML source code for this tutorial at here. In coming tutorial, we will learn another XML layout which is commonly used in Android application. Be stay tune and wait for my next tutorial. See you ya. :D