Android TableLayout

Filed Under: Android

Android TableLayout is used to create grids on the screen. It’s one of the ViewGroup classes, which is used to create a table on the screen.

Android TableLayout

As the name suggests, TableLayout is used to create a layout in the form of rows and columns. It’s similar to tables or the excel sheets.

The TableLayout container consists of child views in the form of tablerow.

A TableRow default layout_width is match_parent and layout_height is wrap_content.

We can define child views inside the TableRow element. Each of the child view is similar to a cell in the excel sheet.

Defining TableLayout in XML

The following example show how to define a TableLayout in the layout XML file.

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

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 3" />


        <Button
            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 4" />


        <Button
            android:background="@android:color/holo_red_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 5" />
    </TableRow>
</TableLayout>

Output:

android tablelayout xml example

  • The default alignment of TableRow elements is to the left.
  • In the middle TableRow we’ve set the gravity as center.
  • The TableLayout aligns its rows to the top.

The third TableRow consists of 5 columns and the fifth column goes out of the screen.

How to fix this?

We have to define the size of the columns to avoid overflow outside the screen.

Sizing Table Columns in Android TableLayout

The number of columns in the TableLayout is equal to the highest number of cells in a TableRow. The width of a column is defined by the row with the widest cell in that column.

However, we can set the columns to stretch, shrink or collapse as per our requirements.

  • android:stretchColumns is used to stretch the columns.
  • android:shrinkColumns is used to shrink the columns.
  • android:collapseColumns is used to collapse the columns.

The columns are present inside a TableRow. Every TableRow has the same number of columns = Highest number of columns.

Column numbers start from 0,1,2….

Inside the cell, we can assign the column number using the layout_column attribute.

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

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">
        

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:layout_column="3"
            android:text="R 2 C 1" />
    </TableRow>

</TableLayout>

The second TableRow has the Button placed in the third column. The first and second columns would be empty.

1. android:stretchColumns

The column number entered would take up the available free space in the TableRows, if any.

android:stretchColumns = 0 means the first column takes up the free space.

android:stretchColumns = 0,1 means the first and second columns take up the free space.

android:strechColumns =”*” means all columns would take up the free space.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

    </TableRow>
</TableLayout>

Output:

android table layout stretched

If we remove the stretchColumns attribute in the above XML layout, it’ll produce the following output.

android table layout not stretched

So the stretchColumns would take as much space as it is taken in the row with the most number of columns.

If any of the TableRow has cells that take up ALL the space, then none of the columns in none of the TableRows would be stretched.

2. android:shrinkColumns

This works in the opposite way of android:stretchColumns. It shrinks the columns to give you free space.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:shrinkColumns="*"
    android:layout_height="match_parent">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:layout_column="0"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 3" />


        <Button

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 4" />


        <Button
            android:background="@android:color/holo_red_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 5" />


        <Button
            android:background="@android:color/holo_green_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 6" />
    </TableRow>
</TableLayout>

Output:
android table layout shrinked

As you see our first issue in which the columns went beyond the screen is fixed. The shrinkColumns shrinks each column width specified in the attribute by the same amount. Since we’ve set *, it shrinks all by the same. The shrinkColumns attribute is used to fit ALL cells in the screen.

3. android:collapseColumns

The android:collapseColumns is used to collapse the specified columns. It means the specified columns would be invisible in the TableRow.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:collapseColumns="1,4,5"
    android:layout_height="match_parent">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:layout_column="0"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 3" />


        <Button

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 4" />


        <Button
            android:background="@android:color/holo_red_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 5" />


        <Button
            android:background="@android:color/holo_green_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 6" />
    </TableRow>
</TableLayout>

The first, fifth and sixth columns are collapsed.

tablelayout columns collapsed

Android Table Layout Weights

We can specify the weights on the TableRow to set the percentage height of the TableRow with respect to the TableLayout.

The android:weightSum needs to be set on the TableLayout and android:layout_weight on each of the TableRows.

How to Create TableLayout Programmatically?

We can create a TableLayout as well as TableRows programmatically. In the following application, we’ll create a TableLayout that will dynamically create a Grid of X rows and Y Columns.

The activity_main.xml layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

The code for the MainActivity.kt class is given below:

package net.androidly.androidlylayouts


import android.app.ActionBar
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.TableLayout
import android.widget.TableRow
import kotlinx.android.synthetic.main.activity_main.view.*
import android.widget.TextView


class MainActivity : AppCompatActivity() {

    val ROWS = 10
    val COLUMNS = 5
    val tableLayout by lazy { TableLayout(this) }

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

        textView.text = "ROWS : $ROWS COLUMNS: $COLUMNS"


        val lp = TableLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        tableLayout.apply {
            layoutParams = lp
            isShrinkAllColumns = true
        }


        createTable(ROWS, COLUMNS)


    }

    fun createTable(rows: Int, cols: Int) {

        for (i in 0 until rows) {

            val row = TableRow(this)
            row.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT)

            for (j in 0 until cols) {

                val button = Button(this)
                button.apply {
                    layoutParams = TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT,
                            TableRow.LayoutParams.WRAP_CONTENT)
                    text = "R $i C $j"
                }
                row.addView(button)
            }
            tableLayout.addView(row)
        }
        linearLayout.addView(tableLayout)
    }

}

In the for loop until creates a range of indexes that doesn’t include the right-hand side number.

Output:

Creating Tablelayout programatically

You can download the AndroidlyLayouts Project from the following link: AndroidlyLayouts

Comments

  1. Elisei says:

    Hi bro, how can I go through this Table (last)

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages