Android Display Data In Table Layout Statically And Programmatically Example

If you want to display data in table format just like the Html table in the android application, you can use TableLayout and TableRow. TableLayout behaves like an Html tag table and TableRow behaves 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.

  1. Below is this example demo video ( how to display data in android table statically and programmatically example ).
  2. The first four table rows in this example are statically added in the 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.
  3. Please note below attributes is important to specify the UI component columns index.
  4. android:layout_column: Specify which table column the UI component will be saved in.
  5. android:layout_span: Specify how many table columns this UI component will occupy.  Those columns will be merged into one column and used by this UI component only.

2. Main Activity.

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

  1. The activity layout file is saved in the app/res/layout folder.
  2. The file name is activity_table_layout.xml.
  3. Below is the file source code.
    <?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>

1 thought on “Android Display Data In Table Layout Statically And Programmatically Example”

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.