Android Display Data In Table Layout Statically And Programmatically Example

If you want to display data in table format just like html table in android application, you can use TableLayout and TableRow. TableLayout behaves like html tag table and TableRow like tag tr. Each TableRow can contain multiple android UI components, each UI component is displayed in a table row column.

1. Android TableLayout Example Overview.

The first four table rows in this example is statically added in layout xml file. There are two buttons in the fourth row. Click the first button will add new rows under it, click the second button will remove table rows that check the checkbox programmatically.

Please note bellow attributes is important to specify the UI component columns index.

1. android:layout_column : Specify which table column the UI component will be saved in.
2. android:layout_span : Specify how many table columns this UI component will occupy.  Those columns will be merged to one column and used by this UI component only.

2. Main Activity.

TableLayoutActivity.java

package com.dev2qa.example.layout.table;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

import com.dev2qa.example.R;

import java.util.ArrayList;
import java.util.List;

public class TableLayoutActivity extends AppCompatActivity {

    private Context context = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_table_layout);

        setTitle("dev2qa.com - Android Table Layout Example.");

        // Get TableLayout object in layout xml.
        final TableLayout tableLayout = (TableLayout)findViewById(R.id.table_layout_table);

        context = getApplicationContext();

        // Get add table row button.
        Button addRowButton = (Button)findViewById(R.id.table_layout_add_row_button);
        addRowButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Create a new table row.
                TableRow tableRow = new TableRow(context);

                // Set new table row layout parameters.
                TableRow.LayoutParams layoutParams = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
                tableRow.setLayoutParams(layoutParams);

                // Add a TextView in the first column.
                TextView textView = new TextView(context);
                textView.setText("This is the ");
                tableRow.addView(textView, 0);

                // Add a button in the second column
                Button button = new Button(context);
                button.setText("New Row");
                tableRow.addView(button, 1);

                // Add a checkbox in the third column.
                CheckBox checkBox = new CheckBox(context);
                checkBox.setText("Check it");
                tableRow.addView(checkBox, 2);

                tableLayout.addView(tableRow);
            }
        });


        // Get delete table row button.
        Button deleteRowButton = (Button)findViewById(R.id.table_layout_delete_row_button);
        deleteRowButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Get table row count.
                int rowCount = tableLayout.getChildCount();

                // Save delete row number list.
                List<Integer> deleteRowNumberList = new ArrayList<Integer>();

                // Loope each table rows.
                for(int i =0 ;i < rowCount;i++)
                {
                    // Get table row.
                    View rowView = tableLayout.getChildAt(i);

                    if(rowView instanceof TableRow)
                    {
                        TableRow tableRow = (TableRow)rowView;

                        // Get row column count.
                        int columnCount = tableRow.getChildCount();

                        // Loop all columns in row.
                        for(int j = 0;j<columnCount;j++)
                        {
                            View columnView = tableRow.getChildAt(j);
                            if(columnView instanceof CheckBox)
                            {
                                // If columns is a checkbox and checked then save the row number in list.
                                CheckBox checkboxView = (CheckBox)columnView;
                                if(checkboxView.isChecked())
                                {
                                    deleteRowNumberList.add(i);
                                    break;
                                }
                            }
                        }
                    }
                }

                // Remove all rows by the selected row number.
                for(int rowNumber :deleteRowNumberList)
                {
                    tableLayout.removeViewAt(rowNumber);
                }
            }
        });

    }
}

3. Activity Layout Xml File.

Saved in app / res / layout folder.

activity_table_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dev2qa.example.layout.table.TableLayoutActivity">


        <TableLayout
            android:id="@+id/table_layout_table"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="50dp">

            <!-- A button span first 2 columns. -->
            <TableRow
                android:id="@+id/table_layout_row_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <!-- android:layout_span configure how many columns to span by this column. -->
                <Button
                    android:layout_span="2"
                    android:layout_gravity="left"
                    android:text="This column span first two column"/>

            </TableRow>

            <!-- Add three common column in the table row. -->
            <TableRow
                android:id="@+id/table_layout_row_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="User Name:"/>

                <EditText
                    android:hint="Input user name"/>

                <Button
                    android:text="Submit"/>

            </TableRow>

            <!-- Add a blue line. -->
            <View
                android:background="@color/colorPrimary"
                android:layout_height="5dp"/>

            <!-- android:layout_column is used specify table row column, column index start from 0.-->
            <TableRow
                android:id="@+id/table_layout_row_3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:id="@+id/table_layout_add_row_button"
                    android:layout_column="1"
                    android:text="Add Row"/>

                <Button
                    android:id="@+id/table_layout_delete_row_button"
                    android:layout_column="2"
                    android:text="Delete Row"/>
            </TableRow>


        </TableLayout>

</android.support.constraint.ConstraintLayout>