Dynamic tables with Android – Part II

Deleting dynamically added rows was a bit tricky at the first. I found my solution with storing the rows in ArrayList so I can easily remove them from the table. Just look at the code:

private ArrayList<TableRow> rows;

rows = new ArrayList<TableRow>();

//When creating and adding the row to the table save it also to the ArrayList
rows.add(row);

//Clear the dynamically added rows whenever we need it
private void clearTable(){
	if (rows.size() > 0)	{
		for (int i = 0; i < rows.size(); i++) table.removeView(rows.get(i));
    }
    rows.clear();
}

Adding rows to a table is described in Part I

Dynamic tables with Android


I’m developing a android app for our field staff here at work. I needed some tables for data output. First of all we need a XML layout:

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

    <TextView
        android:id="@+id/textSample"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:text=""
        android:gravity="center"
        android:textSize="20dp"
        android:textStyle="bold" />
    <TableLayout
        android:id="@+id/tableSample"
    	android:layout_width="match_parent"
   	android:layout_height="wrap_content"
    	android:stretchColumns="0" >
    	<TableRow
    	    android:id="@+id/tableHeader" >
        	<TextView
            		android:id="@+id/labelHeader1"
        		style="@style/TableHeader"
        		android:text="@string/label_header1" />
        	<TextView
            		android:id="@+id/labelHeader2"
        		style="@style/TableHeader"
        		android:text="@string/label_header2" />
        	<TextView
            		android:id="@+id/labelHeader3"
        		style="@style/TableHeader"
        		android:text="@string/label_header3" />
        	<TextView
            		android:id="@+id/labelHeader4"
        		style="@style/TableHeader"
        		android:text="@string/label_header4" />
        </TableRow>
    </TableLayout>
</LinearLayout>

Then we need a layout for the dynamically added tablerows:

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
    	android:id="@+id/textItem1"
        style="@style/TableItem"
        android:text="" />
    <TextView
      	android:id="@+id/textItem2"
        style="@style/TableItem"
        android:text="" />
    <TextView
       	android:id="@+id/textItem3"
        style="@style/TableItem"
        android:text="" />
    <TextView
       	android:id="@+id/textItem4"
        style="@style/TableItem"
        android:text="" />
</TableRow>

I placed the styles in the values/style.xml:

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

    <style name="TableHeader">
		<item name="android:layout_width">wrap_content</item>
		<item name="android:layout_height">30dp</item>
		<item name="android:layout_margin">1dp</item>
		<item name="android:gravity">center_vertical</item>
		<item name="android:padding">3dp</item>
		<item name="android:textSize">14dp</item>
		<item name="android:textStyle">bold</item>
		<item name="android:textColor">@color/default_table_header_color</item>
		<item name="android:background">@color/default_table_header_background</item>
    </style>

    <style name="TableItem">
		<item name="android:layout_width">wrap_content</item>
		<item name="android:layout_height">25dp</item>
		<item name="android:layout_margin">1dp</item>
		<item name="android:gravity">right|center_vertical</item>
		<item name="android:padding">3dp</item>
		<item name="android:textSize">14dp</item>
		<item name="android:textColor">@color/default_table_item_color</item>
		<item name="android:background">@color/default_table_item_background</item>
    </style>

</resources>

We can put these all together with some java code:

TableLayout table = (TableLayout)getActivity().findViewById(R.id.tableSample);
while (some_data_still_come_in){
	TableRow row = (TableRow)LayoutInflater.from(this).inflate(R.layout.tablerow, null);
	((TextView)row.findViewById(R.id.textItem1)).setText("some text");
	((TextView)row.findViewById(R.id.textItem2)).setText("some text");
	((TextView)row.findViewById(R.id.textItem3)).setText("some text");
	((TextView)row.findViewById(R.id.textItem4)).setText("some text");
	table.addView(row);
	get_next_data();
}
table.requestLayout();

That’s all. Works fine and you get also a table feeling with this style.