Just like HTML Tables on webpages the TableLayout on Android gives you the option to align Views in a table order with rows and columns.

My development setup is:

IDE: Eclipse IDE (setup guide here).
Phone: HTC Hero
Android version: 1.5 HTC Rom

I will be using the standard Android Project Skeleton in Eclipse as my base setup. This auto creates all the basic files needed, so these will not be covered here.

TableLayout on Android

The TableLayout is built using the TableLayout and the TableRow commands. There is no TableCols like the <td> tag in HTML. To align your view in columns you have to set the width of the elements and manually control the layout.

XML Layout

To make a basic layout with 2 rows and 4 textview I have a main.xml with this content:

<TableLayout android:id="@+id/TableLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content">

  <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">

    <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>
    <TextView android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-2"></TextView>

  </TableRow>

  <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" android:layout_height="wrap_content">

    <TextView android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-1"></TextView>
    <TextView android:id="@+id/TextView04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-2"></TextView>

  </TableRow>

</TableLayout>

This creates a layout like this:

So we have now displayed a simple TableLayout.

Right aligning checkboxes

Many apps have a nice clean setup where the checkboxes is right aligned to the screen and this is actually very easy to achieve. You just have to set the width of the textview so it will push the checkbox to the right.

First step is to change the TextView02 to a Checkbox like this:

...
    <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>
    <CheckBox android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>

This will output somethings like this:

Now we just have to align the checkbox.

We can do this by setting the width of the previous textfield like this:

<TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content"><TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-1" android:width="250px"></TextView>

Notice the width=”250px” in the end there. This results in:

But what is the screen size changes? The checkbox will then be placed 250px from the left because the width is hardcoded. Not that great – but yet very easy to adjust.

On the LayoutTable we can adjust stretching across columns, similar to the colspan tag in HTML.

...
<TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content"  android:stretchColumns="0">
...

This will make the first (“0″) column stretch as most as needed and allowed by the other elements.:

And with the screen flipped:

Complete XML layout:

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

<TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content"  android:stretchColumns="0">

  <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">
    <TextView android:id="@+id/TextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>

    <CheckBox android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>
  </TableRow>

  <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" android:layout_height="wrap_content">
    <TextView android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-1"></TextView>
    <TextView android:id="@+id/TextView04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-2"></TextView>

  </TableRow>

</TableLayout>
</LinearLayout>

Appending rows dynamically

Lets say you want to add rows to the TableLayout on depend during your app. No problem.

Add a button at the top of your application like this:

  <Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Add row"></Button>

  <ScrollView android:id="@+id/ScrollView01" android:layout_width="wrap_content" android:layout_height="wrap_content">

    <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="0">

      <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <TextView android:id="@+id/TextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>

        <CheckBox android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>
      </TableRow>

    </TableLayout>
  </ScrollView>

There is now a button available for handling clicks from the user and the TableLayout has been wrapped in a ScrollView which enables the scroll functionality.

Now for some Java code

package huuah.tablelayout;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TableLayout;
import android.widget.TextView;
import android.view.View;

import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.TableRow;
import android.widget.TableRow.LayoutParams;


public class tablelayout extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
    
    //initialize a button and a counter
    Button btn;
    int counter = 0;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // setup the layout
        setContentView(R.layout.main);
        
        // add a click-listener on the button 
        btn = (Button) findViewById(R.id.Button01);
        btn.setOnClickListener(this);        

        
    }
    
    // run when the button is clicked
    public void onClick(View view) {
        
        // get a reference for the TableLayout
        TableLayout table = (TableLayout) findViewById(R.id.TableLayout01);
        
        // create a new TableRow
        TableRow row = new TableRow(this);

        // count the counter up by one
        counter++;
        
        // create a new TextView
        TextView t = new TextView(this);
        // set the text to "text xx"        
        t.setText("text " + counter);
      
        // create a CheckBox
        CheckBox c = new CheckBox(this);
       
        // add the TextView and the CheckBox to the new TableRow
        row.addView(t);
        row.addView(c);
          
        // add the TableRow to the TableLayout
        table.addView(row,new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    
    }
}

So whenever the button is clicked, it adds a new row to the TableLayout and notice the Scrollbar from the ScrollView.

If you want more information and TableLayout and placement techniques I can recommend reading:

Thats it for now. Enjoy coding and please post some comments.