Open In App

Android TableLayout in Kotlin

Last Updated : 24 Feb, 2025
Comments
Improve
Suggest changes
7 Likes
Like
Report

TableLayout in Android is a ViewGroup subclass that is designed to align child views in rows and columns like a grid structure. It automatically arranges all the child elements into rows and columns without displaying any border lines between cells. The Table Layout's functionality is almost similar to an HTML table, where the number of columns in the layout is determined by the row with the most cells. In this article, you will learn about the features, implementation and best practices of TableLayout in Android development.

How to declare TableLayout and TableRow?

The TableLayout can be defined using <TableLayout> like below:

XML 
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <!--add multiple rows here like the one below-->
    <TableRow
        android:background="@color/green"
        android:padding="16dp">

        <!--add multiple views here like the one below-->
        <View
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </TableRow>

</TableLayout>


and TableRow can be defined in the following way:

XML 
<TableRow
        android:background="@color/green"
        android:padding="16dp">

        <!--sub view 1-->
        <View
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <!--sub view 2-->
        <View
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <!--sub view 3-->
        <View
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </TableRow>


Step by Step Implementation

Step 1: Working with activity_main.xml file

In this file, we declare the TableLayout and start adding table rows with the help of TableRow. We are creating ranking table of players where we define four columns Rank, Name, Country and Points. The code for the Table is:

activity_main.xml:

activity_main.xml 
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:id="@+id/main"
    android:padding="32dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ICC Ranking of Players:"
        android:textSize = "20sp"
        android:textStyle="bold">

    </TextView>


    <TableRow
        android:background="@color/green"
        android:padding="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Rank"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Player"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Team"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Points"
            android:textStyle="bold" />
    </TableRow>
    <TableRow android:background="#F0F7F7" android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Virat Kohli" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="IND" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="895" />
    </TableRow>
    <TableRow android:background="#F0F7F7" android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Rohit Sharma" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="IND" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="863" />

    </TableRow>
    <TableRow android:background="#F0F7F7" android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="3" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Faf du Plessis" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="PAK" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="834" />

    </TableRow>

    <TableRow android:background="#F0F7F7" android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="4" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Steven Smith" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="AUS" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="820" />

    </TableRow>

    <TableRow android:background="#F0F7F7" android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="5" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Ross Taylor" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="NZ" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="817" />

    </TableRow>

</TableLayout>


Design UI:

table-layout


Step 2: Working with MainActivity file

When we have created layout, we need to load the XML layout resource from our activity onCreate() callback method and access the UI element form the XML using findViewById.

MainActivity:

MainActivity.java 
import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
MainActivity.kt 
package com.geeksforgeeks.myfirstKotlinapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // finding the UI elements


    }
}

Output:

After running the application, this is the expected result from the above code:

Output_Application

Conclusion

Android Table Layout in Kotlin is a useful tool for creating structured and responsive user interface. Table Layout in Android allows us for efficient organisation of UI elements in rows and columns that will increase the experience of users. You will learn about Android Table Layout in Kotlin by referring to this article.


P

Praveenruhil
Improve
Article Tags :

Explore

Lightbox