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>