Android TableLayout Tutorial with Example kotlin

Android TableLayout is provided row and column to manage UI data. You can manage your data in tabular format. Like you have a list of students in SQLite database and you want to show this data. Important point is that TableLayout doesn’t display borderlines on rows and Each row can have zero or more cells.

Attributes of Android TableLayout :

Here is some important attribute of TableLayout in Android.

android:id

This is the ID which uniquely identifies the layout.

android:id="@+id/table_layout"

android:stretchColumns

Stretchable, it can expand in width to fit any extra space. The zero-based index of the columns to stretch. And column indices must be separated by a comma: 1, 2, 3.

android:shrinkColumns

Shrinkable, the column width can be shrunk to fit the table into its parent object. The zero-based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 4.

android:collapseColumns

You can hide a column by calling. This specifies the zero-based index of the columns to collapse. For multiple columns do separate by a comma: 1, 3, 5.

Note: For better performance and tooling support, you should instead build your layout with ConstraintLayout.

Complete Example of Android TableLayout :

Here we are using TableLayout as a base layout and TableRow to vertical data show. In <TableRow> we are using <TextView>. Check this example for good understanding.

Step 1. Create a new project “Build Your First Android App in Kotlin“

Step 2. Open  “colors.xml” resource file and add these colors

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#607d8b</color>
    <color name="colorPrimaryDark">#FF415660</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#FFFFFF</color>
    <color name="c1">#9581b9</color>
    <color name="c2">#6983d4</color>
</resources>

Step 3. Add <TableLayout> and others following code in “activity_main.xml” resource file

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
    android:padding="5dp"
    android:stretchColumns="2"
    tools:context=".MainActivity">

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

        <TextView
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:layout_column="1"
            android:background="@color/c1"
            android:gravity="center"
            android:text="S.no"
            android:textColor="@color/colorWhite"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:layout_column="2"
            android:background="@color/c2"
            android:gravity="center"
            android:text="Name"
            android:textColor="@color/colorWhite"
            android:textSize="18sp" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:gravity="center"
            android:text="1"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Rohit kumar"
            android:textSize="18sp" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:gravity="center"
            android:text="2"
            android:textSize="18sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Vikas Arora"
            android:textSize="18sp" />
    </TableRow>

</TableLayout>

Step 4. Open and setContentView res layout file in “MainActivity.kt”

package `in`.eyehunt.androidtablelayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Step 5. Run the application, in an emulator or On your android device

Output screenshot Android Table Layout example :

Download source code Android TableLayout in kotlin

https://github.com/EyeHunts/AndroidTableLayout

Do comment if you have any doubt and suggestion on this tutorial

Note : This example (Project) is developed in Android Studio 3.1.3 . Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin