Mobility

Create and manipulate Android tables on the fly

William Francis walks Android developers through a tutorial on how to create a simple program that demonstrates dynamic table creation.

Google's Android platform supports the ability to format user views using a table layout. The documentation on the Android Developers site provides a lot of good information about Google's table implementation. The detailed class overview and subsequent summary found there give developers everything required to design and insert a table with a predetermined number of rows into an application. But if you've been programming for more than a day, you know that very rarely do we find our applications dealing with pre-defined anything. That's where this tutorial can help.

The world is a very dynamic place,  and users expect to consume information in the same dynamic manner. A very common scenario when it comes to app development is to populate the screen at run-time with data pulled from a web service or some other live content provider. Thus, it stands to reason that for any table mechanism to be useful, it must be able to add, remove, and delete rows at run-time.

Fortunately, the Android framework engineers did not disappoint. This tutorial shows how to create and manipulate table views on the fly. (The entire project and APK file are available for download.)

1. Start a new Android project in Eclipse. Target the project for Android 1.6 or higher. 2. We will need a very simple layout consisting of an empty table and a few buttons, such as this:

main.xml <?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"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"/> <TableLayout android:layout_margin="12dip" android:layout_width="fill_parent" android:id="@+id/the_table" android:layout_height="wrap_content" android:scrollbars="vertical" android:paddingBottom="3dip" android:stretchColumns="*"> </TableLayout> <Button android:id="@+id/add_row_to_end" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Add Row to End"/> <Button android:id="@+id/insert_row_at_beginning" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Insert Row at Beginning"/> <Button android:id="@+id/clear_table" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clear Table"/> </LinearLayout> 3. Our main java class extends the standard Android activity class and implements an on click listener. We'll also be using a private variable to keep up with our row count.

package com.authorwjf;

import com.authorwjf.R;

import android.app.Activity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.TableLayout;

import android.widget.TableRow;

import android.widget.TextView;

public class main extends Activity implements OnClickListener{

private int mRowCount = 0;

}

4. Override the on create and hook the three buttons from our UI layout.

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Button b = (Button) findViewById(R.id.clear_table);

b.setOnClickListener(this);

b = (Button) findViewById(R.id.add_row_to_end);

b.setOnClickListener(this);

b = (Button) findViewById(R.id.insert_row_at_beginning);

b.setOnClickListener(this);

}

5. Add the on click handler.

@Override

public void onClick(View v) {

if (v.getId()==R.id.clear_table) {

TableLayout table = (TableLayout)findViewById(R.id.the_table);

table.removeAllViews();

mRowCount=0;

} else if (v.getId()==R.id.add_row_to_end) {

mRowCount++;

TableLayout table = (TableLayout)findViewById(R.id.the_table);

TableRow row = new TableRow(this);

TextView tv = new TextView(this);

tv.setText("Table row #"+Integer.toString(mRowCount));

tv.setGravity(Gravity.LEFT);

row.addView(tv);

table.addView(row);

} else if (v.getId()==R.id.insert_row_at_beginning) {

mRowCount++;

TableLayout table = (TableLayout)findViewById(R.id.the_table);

TableRow row = new TableRow(this);

TextView tv = new TextView(this);

tv.setText("Table row #"+Integer.toString(mRowCount));

tv.setGravity(Gravity.LEFT);

row.addView(tv);

table.addView(row, 0);

}

}

Now you have a simple program that demonstrates dynamic table creation (Figure A).

Figure A

Fig. A

The sample in this post uses a single view in each table row, but you are free to stack the views as deep as you like in a given row. Similarly, while the demo only uses the text view widget, there is no limitation as to which widgets can be contained in the view. Table rows may house edit views, image views, etc.

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

Editor's Picks