Smartphones

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...

2 comments
Kyle.Miller
Kyle.Miller

Do you see any reason to use a TableView over a ListView for dynamically displaying records? I have always used ListViews with custom BaseAdapter classes, so I'm curious on your take

authorwjf
authorwjf

Especially in this instance where only a single column is being populated I think a listview would have worked just as well and to boot you'd get the scroll behavior. I tend to use tableviews when I'm formatting multiple columns only because I'm more comfortable with formatting the contents. I think using listviews and the android linearlayout mechanisms can achieve everything a tableview can, and in some cases with greater flexibility. To me its just a preference issue (assigning layout weights make my head hurt). Though perhaps some heavy UI devs have more valid reasons for choosing one over the other.