Show data in columns in a TableView dynamically in Android.

By | December 26, 2011

Hello all,
Often we need to show data from a source such as a database in a tableView like we see in an HTML Page.
Now in Android also we can do this with the help of TableLayout.
We can create dynamic rows and add data to it.
This is something that people in computer
classes
will benefit from knowing how to do this.

Here is the java code to implement this.
First create a java file named CreateTable.java and copy the contents into it.

package com.coderzheaven.pack;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
import android.widget.TableRow.LayoutParams;

public class CreateTable extends Activity {

	 String companies[] = {"Google","Windows","iPhone","Nokia","Samsung",
			 			   "Google","Windows","iPhone","Nokia","Samsung",
			 			   "Google","Windows","iPhone","Nokia","Samsung"};
	 String os[] 	   =  {"Android","Mango","iOS","Symbian","Bada",
			 			   "Android","Mango","iOS","Symbian","Bada",
			 			   "Android","Mango","iOS","Symbian","Bada"};

	 TableLayout tl;
	 TableRow tr;
	 TextView companyTV,valueTV;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tl = (TableLayout) findViewById(R.id.maintable);
        addHeaders();
        addData();
    }

    /** This function add the headers to the table **/
    public void addHeaders(){

    	 /** Create a TableRow dynamically **/
        tr = new TableRow(this);
        tr.setLayoutParams(new LayoutParams(
                LayoutParams.FILL_PARENT,
                LayoutParams.WRAP_CONTENT));

        /** Creating a TextView to add to the row **/
        TextView companyTV = new TextView(this);
        companyTV.setText("Companies");
        companyTV.setTextColor(Color.GRAY);
        companyTV.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        companyTV.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
        companyTV.setPadding(5, 5, 5, 0);
        tr.addView(companyTV);	// Adding textView to tablerow.

        /** Creating another textview **/
        TextView valueTV = new TextView(this);
        valueTV.setText("Operating Systems");
        valueTV.setTextColor(Color.GRAY);
        valueTV.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
        valueTV.setPadding(5, 5, 5, 0);
        valueTV.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        tr.addView(valueTV); // Adding textView to tablerow.

        // Add the TableRow to the TableLayout
        tl.addView(tr, new TableLayout.LayoutParams(
                LayoutParams.FILL_PARENT,
                LayoutParams.WRAP_CONTENT));

        // we are adding two textviews for the divider because we have two columns
        tr = new TableRow(this);
        tr.setLayoutParams(new LayoutParams(
                LayoutParams.FILL_PARENT,
                LayoutParams.WRAP_CONTENT));

        /** Creating another textview **/
        TextView divider = new TextView(this);
        divider.setText("-----------------");
        divider.setTextColor(Color.GREEN);
        divider.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
        divider.setPadding(5, 0, 0, 0);
        divider.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        tr.addView(divider); // Adding textView to tablerow.

        TextView divider2 = new TextView(this);
        divider2.setText("-------------------------");
        divider2.setTextColor(Color.GREEN);
        divider2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
        divider2.setPadding(5, 0, 0, 0);
        divider2.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        tr.addView(divider2); // Adding textView to tablerow.

        // Add the TableRow to the TableLayout
        tl.addView(tr, new TableLayout.LayoutParams(
                LayoutParams.FILL_PARENT,
                LayoutParams.WRAP_CONTENT));
    }

    /** This function add the data to the table **/
    public void addData(){

    	for (int i = 0; i < companies.length; i++)
        {
            /** Create a TableRow dynamically **/
            tr = new TableRow(this);
            tr.setLayoutParams(new LayoutParams(
                    LayoutParams.FILL_PARENT,
                    LayoutParams.WRAP_CONTENT));

            /** Creating a TextView to add to the row **/
            companyTV = new TextView(this);
            companyTV.setText(companies[i]);
            companyTV.setTextColor(Color.RED);
            companyTV.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
            companyTV.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
            companyTV.setPadding(5, 5, 5, 5);
            tr.addView(companyTV);	// Adding textView to tablerow.

            /** Creating another textview **/
            valueTV = new TextView(this);
            valueTV.setText(os[i]);
            valueTV.setTextColor(Color.GREEN);
            valueTV.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
            valueTV.setPadding(5, 5, 5, 5);
            valueTV.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
            tr.addView(valueTV); // Adding textView to tablerow.

            // Add the TableRow to the TableLayout
            tl.addView(tr, new TableLayout.LayoutParams(
                    LayoutParams.FILL_PARENT,
                    LayoutParams.WRAP_CONTENT));
        }
    }
}

Here is the main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/LinearLayout01"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	>
	<ScrollView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:scrollbars="none">
		<TableLayout
		    android:layout_width="fill_parent"
		    android:layout_height="fill_parent"
		    android:stretchColumns="0,1"
		    android:id="@+id/maintable" >
		</TableLayout>
	</ScrollView>
</LinearLayout>

Now the Strings.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, CreateTable!</string>
    <string name="app_name">CreateTableRows Dynamically CoderzHeaven.com</string>
</resources>

Now the project is complete and you can see the result.

Creating tableRows dynamically in Android

Creating tableRows dynamically in Android

11 thoughts on “Show data in columns in a TableView dynamically in Android.

  1. trugur

    Thanks a lot. I did this. However i want to get selected row values in the table. For example when i touched second row in above screen i want to get “Windows” and “Mango” values. How can i do this?

    Reply
    1. James Post author

      @trugur:- Add a click eventListener to the textView and onClick get the view.getText(). that’s all.

      Reply
      1. trugur

        I tried but i couldn’t find gettext function. Can you give me a simple example?
        And this is what i have tried:

        tr.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
        v.setBackgroundColor(Color.DKGRAY);
        v.showContextMenu();

        }
        });

        Reply
        1. James Post author

          Don’t add listener for table row, instead add listener for the textview inside it. set it the id as same as the row number. So when you click on it, you will get the text in it and the row number which is it’s id.

          Reply
          1. trugur

            Thank you for your help.
            I added listener for textview. But now it gives me text of last row. I think i coudn’t do about id. I’m not so good about this subject. Could you give me simple example please? I’ll be glad.

    1. James Post author

      Did you check your php code is error free?
      if it is ok, try to print the response from the server in the Logcat.

      Reply
  2. Flexicious

    Fully Customizable Rows and Columns with Support for Inline Filters, Summary Footers, Server/Client Paging, Sort, Excel/Word Export, Locked Columns, Inline Edit, User Settings Persistence and a lot more!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *