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.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/Itn1cJStTGQ
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.
- 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 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>