A Table layout in Android arranges the children’s layout inside it in rows and columns. Its like Nesting the Linear Layout in Android but without taxing the resources.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

What is a Table Layout ?

The Table layout’s tag <TableLayout> consists of the Table Row tag <TableRow> objects that defines the row of the table layout. Inside the table row <TableRow> tag you can have other <View> children ex: TextView, Buttons, ImageView, etc.

table layout in android
A table layout in android XML with 1 Row and 3 columns

The Table layout class extends the Linear Layout class and it’s recommended to use Table Layout in your XML file, instead of nesting Linear layouts (i.e, one layout inside another) wherever appropriate.

Each row inside the table layout, the <TableRow> can have zero i.e, null or more views to hold.

The number of column in the table layout determined by the row with most views.

To create a Table layout in Android Studio using XML we use the <TableLayout> Tag. Inside it we use the <TableRow> tag to create rows. The Table Row tag <TableRow> can contain view elements what has to be aligned horizontally.

Table Layout Attributes

Table Layout contains the following attributes:

android:id

Just like any other Android widget, the id attribute is used to uniquely identify the layout.

attributes of table layout in android

android:shrinkColumns

Use this attribute to tell Android what columns can shrink. The columns start from index 0. So if you want the 1st and the 4th column to collapse, we use android:collapseColumns:”0,4″. Shrink the column will shrink the column to its minimum space required.

android:stretchColumns

Use this attribute to tell Android what columns can stretch. The columns start from index 0. SO if you want the 1st and the 5th column to stretch, we use android:collapseColumns:”0,5″.

android:collapseColumns

Use this attribute to tell Android what columns can collapse. The columns start from index 0. So if you want the 1st and the 5th column to collapse, we use android:collapseColumns:”0,5″. Collapse Column will hide the column.

Android Table Layout Demo App

Create a new Android Studio project with an empty activity.

Table Layout using XML Layout

In the XML file, create a <TableLayout> Tag. To the Table layout tag, add the following attributes:

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0"
        android:shrinkColumns="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

</TableLayout>

Now add a <TableRow> tag and to this add layout_width and layout_height attribute.

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

 </TableRow>

Inside the Table Row tag, add as may views you want. We have added two widgets.

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

            <TextView
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="This column is"
                android:textSize="22sp"/>

            <TextView
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="And I am"
                android:textSize="22sp"/>

 </TableRow>

Once you’ve closed the </TableRow> tag, you can add another row to the table layout by opening a new <TableRow> Tag and adding new views to it.

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

            <Button
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="STRETCHeDDDDDDDDDD"/>

            <Button
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Normalll"/>

            <Button
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Shrinked"/>

</TableRow>

You can find the complete source code here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0"
        android:shrinkColumns="2">

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

            <TextView
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="This column is"
                android:textSize="22sp"/>

            <TextView
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="And I am"
                android:textSize="22sp"/>

        </TableRow>

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

            <Button
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="STRETCHeDDDDDDDDDD"/>

            <Button
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Normalll"/>

            <Button
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Shrinked"/>

        </TableRow>

    </TableLayout>
    
</LinearLayout>

Table Layout using Kotlin / Java Code

        //set 2nd column collapse-able
        tableLayout.setColumnCollapsed(1,true)

        //check if 2nd column is collapse-able
        tableLayout.isColumnCollapsed(1)

        //set 1st column shrinkable
        tableLayout.setColumnShrinkable(0,true)

        //check if 1st column is shrinkable
        tableLayout.isColumnShrinkable(0)

        //set 3rd column Stretchable
        tableLayout.setColumnStretchable(2,true)

        //check if 3rd column is Stretchable
        tableLayout.isColumnStretchable(2)

See TableLayout Source Code

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like