TableLayout in Android with Example | AndroidMonks

TableLayout in Android with Example | AndroidMonks

TableLayout is used to represent Table like View alignment in Android. There are various ways in which you can achieve a table like representation. however TableLayout makes it easy to create one.

A TableLayout consists of a number of TableRow objects, each defining a row (actually, you can have other children, which will be explained below). TableLayout containers do not display border lines for their rows, columns, or cells. Each row has zero or more cells; each cell can hold one Viewobject. The table has as many columns as the row with the most cells. A table can leave cells empty. Cells can span columns, as they can in HTML.

TableLayout – Implementation

Creating a Table Layout in XML requires a simple TableLayout tag being used as below.

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
</TableLayout>

The TableRow tag inside the Table Layout specifies each row it will be holding. Check the below implementation.

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TableRow android:id="@+id/row1">
    </TableRow>
</TableLayout>

The Row will now hold any number of Views inside it. Can be a TextView, Button, Image etc,

Remember that, the children of a TableLayout cannot specify the layout_width attribute. Width is always MATCH_PARENT. However, the layout_height attribute can be defined by a child.

The width of a column is defined by the row with the widest cell in that column.

TableLayout – XML Implementation

Once your basic implementation is done, we can jump into creating our first proper Table with multiple rows and columns like below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TableRow android:id="@+id/row1">
        <TextView
            android:id="@+id/simpleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Column 1"
            android:textColor="#000"
            android:textSize="12dp" />

        <TextView
            android:id="@+id/simpleTextView2"
            android:width="200dp"
            android:layout_height="wrap_content"
            android:background="#008800"
            android:padding="18dip"
            android:text="Column 2"
            android:textColor="#000"
            android:textSize="14dp" />
    </TableRow>
    <TableRow android:id="@+id/row2">
        <TextView

            android:id="@+id/simpleTextView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Column 1"
            android:textColor="#000"
            android:textSize="12dp" />

        <TextView
            android:id="@+id/simpleTextView4"
            android:width="100dp"
            android:layout_height="wrap_content"
            android:background="#990000"
            android:padding="18dip"
            android:text="Column 2"
            android:textColor="#000"
            android:textSize="14dp" />
    </TableRow>

</TableLayout>
</LinearLayout>

This creates a Layout like this,

Can you guess why, the row 1 and row 2 look the same even though we have given the layout_width for 2nd row to be equal to 100dp. The answer is because, the width of a column is defined by the row with the widest cell in that column.

Shrinkable and Stretchable

Want to create rows with different width values, instead of columns of same width. You can do that using the concept of Shrinkable and Strechable where in, a TableLayout can specify certain columns as shrinkable or stretchable by calling setColumnShrinkable() or setColumnStretchable(). If marked as shrinkable, the column width can be shrunk to fit the table into its parent object. If marked as stretchable, it can expand in width to fit any extra space. The total width of the table is defined by its parent container. It is important to remember that a column can be both shrinkable and stretchable. In such a situation, the column will change its size to always use up the available space, but never more. Finally, you can hide a column by calling setColumnCollapsed().

You can either implement this through the XML implementation, or through Activity Class methods. The attributes are

android:collapseColumns :

You can choose to set this value in the TableLayout, which will collapse the Column based on the number specified. Check out the example below.

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:collapseColumns="0">
    <TableRow android:id="@+id/row1">
        <TextView

            android:id="@+id/simpleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Column 1"
            android:textColor="#000"
            android:textSize="12dp" />

        <TextView
            android:id="@+id/simpleTextView2"
            android:width="200dp"
            android:layout_height="wrap_content"
            android:background="#008800"
            android:padding="18dip"
            android:text="Column 2"
            android:textColor="#000"
            android:textSize="14dp" />
    </TableRow>
    <TableRow android:id="@+id/row2">
        <TextView

            android:id="@+id/simpleTextView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Column 1"
            android:textColor="#000"
            android:textSize="12dp" />

        <TextView
            android:id="@+id/simpleTextView4"
            android:width="300dp"
            android:layout_height="wrap_content"
            android:background="#990000"
            android:padding="18dip"
            android:text="Column 2"
            android:textColor="#000"
            android:textSize="14dp" />
    </TableRow>

</TableLayout>

Upon Collapsing the Column 1 (index starts from 0), we end up with,

android:shrinkColumns:

The zero-based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. Illegal and duplicate indices are ignored.

Shrink and Stretch can be used at the same time, depending on the Size of the View, the Table Column may expand or shrink,

Check the code below for shrinkColumns.

android:stretchColumns:

Stretch Column can be used to stretch the Column numbers to fit the rest of the space available. Check out the code below, to implement a stretchable Column.

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="0"
    >
    <TableRow android:id="@+id/row1">
        <TextView
            android:id="@+id/simpleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Column 1"
            android:textColor="#000"
            android:textSize="12dp" />
        <TextView
            android:id="@+id/simpleTextView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#008800"
            android:padding="18dip"
            android:text="Column 2"
            android:textColor="#000"
            android:textSize="14dp" />
    </TableRow>
    <TableRow android:id="@+id/row2">
        <TextView
            android:id="@+id/simpleTextView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Column 1"
            android:textColor="#000"
            android:textSize="12dp" />
        <TextView
            android:id="@+id/simpleTextView4"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:background="#990000"
            android:padding="18dip"
            android:text="Column 2"
            android:textColor="#000"
            android:textSize="14dp" />
    </TableRow>
</TableLayout>

We get the following result.

TableLayout – Activity Implementation

There are various public methods, apart from the XML attributes which we can use. They are given below.

• addView(View child, int index) – Adds a child view. If no layout parameters are already set on the child, the default parameters for this ViewGroup are set on the child.
• isColumnCollapsed(int columnIndex) – Returns the collapsed state of the specified column
• isColumnShrinkable(int columnIndex) – Returns whether the specified column is shrinkable or not.
• isColumnStretchable(int columnIndex) – Returns whether the specified column is stretchable or not.
• setColumnCollapsed(int columnIndex, boolean isCollapsed) – Collapses or restores a given column. When collapsed, a column does not appear on screen and the extra space is reclaimed by the other columns. A column is collapsed/restored only when it belongs to a TableRow.
• setColumnShrinkable(int columnIndex, boolean isShrinkable) – Makes the given column shrinkable or not. When a row is too wide, the table can reclaim extra space from shrinkable columns.
• setColumnStretchable(int columnIndex, boolean isStretchable) – Makes the given column stretchable or not. When stretchable, a column takes up as much as available space as possible in its row.
• setStretchAllColumns(boolean stretchAllColumns) – Method to setAllColumns as either Stretchable or not.

These are some of the publicly available methods which we will be making use of frequently.

The layout can now be easily set to our Activity and launched, which will give us the required Table Layout Activity implementation.

package com.monks.android.newapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.HorizontalScrollView;

public class MainActivity extends AppCompatActivity {
    HorizontalScrollView horizontalScrollView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.table_layout);


    }
}

This creates the following Application,

Finished Application

You can drop in any comments below. Do not forget to checkout GridView implementation, ConstraintLayout implementation for creating similar yet powerful Table like Layouts.

“Learn and Be Curious”