Visit Sponsor

Written by 8:13 am Android

Android TableLayout Example – Setup and Best Practices

The TableLayout is a view group in Android designed to arrange child views in rows and columns, similar to an HTML table. It is ideal for structured layouts where UI components need to align in both vertical and horizontal grids. This guide explains how to use TableLayout effectively, with real code examples and best practices.

What Is TableLayout?

TableLayout groups views into TableRow objects. Unlike other layouts, it positions elements in grid-like form without the complexity of manual constraints. Each TableRow represents one row, containing multiple child views in its columns.

When to Use TableLayout

Use TableLayout when:

  • You must align UI elements in rows and columns
  • You need label–value pairs (e.g., form fields)
  • You want column alignment without nested LinearLayouts

It’s best for tabular data or structured forms.

Basic TableLayout Example

Here’s a simple implementation of a table with two rows and two columns:

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name"
            android:padding="8dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="John Doe"
            android:padding="8dp"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email"
            android:padding="8dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="john@example.com"
            android:padding="8dp"/>
    </TableRow>

</TableLayout>

In this example:

  • Each TableRow defines a row
  • Child views inside a TableRow define columns
  • android:stretchColumns="*" makes columns share available space

Understanding TableLayout Attributes

AttributeDescription
stretchColumnsAllows columns to expand to fill space
shrinkColumnsShrinks columns to avoid layout overflow
collapseColumnsHides specific columns dynamically

Aligning Text and Components

You can align TextViews by setting gravity on TableRow or individual child views:

<TableRow
    android:gravity="center_vertical">

    <TextView
        android:layout_gravity="start"
        android:text="Label"/>
    
    <TextView
        android:layout_gravity="end"
        android:text="Value"/>
</TableRow>

This ensures consistent alignment per row.

Column Weight with TableLayout

To control proportional sizing, use weight on child views:

<TableRow>

    <TextView
        android:layout_weight="1"
        android:layout_width="0dp"
        android:text="Label"/>

    <TextView
        android:layout_weight="2"
        android:layout_width="0dp"
        android:text="Value"/>
</TableRow>

Weight allows columns to divide space based on relative proportions.

TableLayout with Input Fields

You can use TableRows to structure input forms:

<TableRow>

    <TextView
        android:text="Username"
        android:padding="8dp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</TableRow>

This layout presents structured input forms clearly.

Dynamically Adding Rows

Populate TableLayout in your activity at runtime:

TableLayout tableLayout = findViewById(R.id.tableLayout);

TableRow newRow = new TableRow(this);
TextView cell1 = new TextView(this);
cell1.setText("Phone");
TextView cell2 = new TextView(this);
cell2.setText("123-456-7890");

newRow.addView(cell1);
newRow.addView(cell2);

tableLayout.addView(newRow);

This technique is useful when data arrives dynamically (e.g., from a database).

Best Practices

From real Android engineering experience:

  • Use TableLayout for structured, grid-like UIs, not for complex responsive layouts
  • Prefer ConstraintLayout when flexible constraints and performance matter
  • Use weights carefully to avoid layout instability

These practices help maintain readability and performance.

Common Pitfalls and Fixes

Views overlap or misalign?
➡ Check that layout_width="0dp" is used with weight.

Table not filling space?
➡ Use stretchColumns for automatic distribution.

Performance issues with many rows?
➡ Use RecyclerView with GridLayoutManager for scalable lists.

Summary

TableLayout is a useful container for arranging views in rows and columns when building structured layouts or forms. It works well for simple grid alignment and is easy to use with both XML and dynamic row generation.

Visited 4 times, 1 visit(s) today
Close