In this tutorial, we will learn about the Android table layout that divides its children into rows and columns. A Table Layout is made up of a number of TableRow objects, each of which defines a row (actually, you can have other children, which will be explained below). Borderlines for rows, columns, and cells are not displayed in Table Layout containers.

Table Layout is a ViewGroup subclass in Android that is used to display child View elements in rows and columns. Table Layout operates in a manner similar to an HTML table, and it contains as many columns as the row with the most cells.

An important point of Table Layout

• We use the element to build a row in a table. The objects in the table row are the child’s views of the table layout.
• Each table row contains null or more cells. Only one view item can be included in each cell, such as ImageView, TextView, etc.
• The total table width is defined by the parent container.

Table layout in Android XML code:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:collapseColumns="0">


<!-- first row of the table layout-->
<TableRow 
    android:id="@+id/row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:text="First Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1" /> <!--first column of the table layout-->
    
</TableRow>
</TableLayout>

Table Layout Attribute:

Attributes	Description
android:id	The id attribute is used to uniquely identify a Table Layout.
android: stretchColumns	This attribute is used when the width of a column is too small and you need to expand (or stretch) it.
android: shrinkColumns	If you don’t need the extra space in a column, use this attribute to shrink and remove it.
android:collapseColumns	It hides the given index’s column in the TableLayout.
android: layout_span	If a view only takes up one column width, but you want it to take up more than one column space, you can use this attribute.
android: layout_column	You can use this attribute to make your view in the first TableRow appear below the view in the other TableRow.

Android Table Layout Example:

File: activity_main.xml–> Following will be the content of res/layout/activity_main.xml file is given below.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>

        <TextView
            android:text="First Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1" />

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

    <TableRow>

        <TextView
            android:text="Last Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1" />

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

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

        <SeekBar
            style="@style/Widget.AppCompat.SeekBar.Discrete"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:id="@+id/ratingBar"
            android:layout_column="2" />
    </TableRow>

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submit"
            android:backgroundTint="@color/black"
            android:id="@+id/button"
            android:layout_column="2" />
    </TableRow>

</TableLayout>

File: MainActivity.kt–> In MainActivity.kt file keep it is as it.

package com.sagar.tablelayout

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)
    }
}

• We hope that this guide will assist you in quickly creating a Table layout in Android. If you have any problems, please post them in the comments section, and we will gladly assist you.
• the official document of Table Layout.

Difference between Linear layout and Relative layout

Navigation Drawer Layout Tutorial | Toolbar tutorial

Using swipe-to-refresh layout in Android