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.
- Below is this example demo video ( how to display data in android table statically and programmatically example ).
- 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.
- Please note below attributes is important to specify the UI component columns index.
- android:layout_column: Specify which table column the UI component will be saved in.
- 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.
- 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.
- The activity layout file is saved in the app/res/layout folder.
- The file name is activity_table_layout.xml.
- 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>
Great post! I found the examples for both static and programmatic table layouts really helpful. It’s always a challenge figuring out how to display data effectively in Android, and your step-by-step approach made it easy to follow. Thanks for sharing!
Great post! The examples you provided for displaying data in a table layout were really helpful. I particularly liked the programmatic approach—it made the concept much clearer. Thanks for sharing these tips!
Great post! I found the examples on displaying data in a table layout really helpful. It’s nice to see both static and programmatic implementations. Looking forward to trying this out in my own Android project!
This blog post is incredibly helpful! I love how it breaks down both static and programmatic approaches to displaying data in a table layout. The examples are clear and easy to follow, making it perfect for both beginners and those looking to refresh their skills. Thanks for sharing these practical tips!
Great post! I found the example on displaying data in table layout really helpful. The step-by-step explanation makes it easy to follow along. Looking forward to trying this out in my own Android projects!
Great post! I learned a lot about implementing table layouts in Android. The examples provided were really helpful. Thanks for breaking it down so clearly!
l,,,