Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
TableLayout
3.
Attributes of TableLayout
4.
Public Methods of Adding Elements
5.
Example of Table Layout
5.1.
The activity_main.xml file
5.2.
The MainActivity.kt file
5.3.
Output
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024
Easy

Table Layout

Author Vivek Goswami
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Tables help us arrange data in a very structured manner in rows and columns. However, how shall we make a table in android? How shall we be designing its properties? This boy shall answer all these questions. 

We use the TableLayout subclass to make tables in android. We use a subclass of the View Group in android to display the child elements in rows and columns. We can draw an analogy between TableLayout and HTML Table feature as the result of the implementation of both is the same. The TableLayout in Android works similar to <table> in HTML, and we can visualize TableRow to be similar to <tr>.

Since we have had an overview of these topics, let us dive deep into them and understand more about them.

TableLayout

TableLayout is used to display the elements of the child View as rows and columns. It doesn’t put borders around the various rows and columns. Usually, the number of rows and columns is the same. You can leave cells empty if you want.

Some important points to note about TableLayout is:

  1. We don’t have to assign the values of layout_width and layout_height for TableRow. It takes up the default value of match_parent for its width and wrap_content for its height.
  2. The width of all individual columns is equal to the width of the column with the maximum width.
  3. The number of columns created by TableLyout is equal to the maximum number of views in TableLayout.

A cell can span multiple columns as well. Hence, there is flexibility in defining and making tables with TableLayout. We need to note that we can span multiple columns in a table, but we can’t span multiple rows. 

We have to add cells to a row in increasing column order in code and XML. Columns have zero-based indexing. If we have not mentioned the column number for a child cell, it will increment to the next available column by itself. 

The syntax for this is as follows:

public TableLayout (Context context,  AttributeSet attrs)

It creates a new table for its context as per the given set of attributes. The attributes required by it are as follows:

  1. Context: It defines the environment of the application.
  2. Attrs: we use it to specify the characteristics of the table.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Attributes of TableLayout

The various attributes involved in making the Table through TableLayout are listed. Let us go through them one by one to understand them:

  1. android:id: This attribute gives an id that identifies a particular instance of Table Layout uniquely.
  2. android:collapseColumns: This attribute helps us in collapsing numerous columns together. A comma must separate the several column indices specified for this attribute. It has zero-based indexing.
  3. android:shrinkColumns: As already satiated, the columns have zero-based indexing. Hence, this attribute takes the zero-based index of the column we want to shrink. Again, we must separate the column indices by commas, as in the case of android:collapseColumns attribute.
  4. android:stretchColumns:This attribute stretches the columns whose indices we specify. Remember that just like in previous attributes for Columns of a table, this uses zero-based indexing, and commas must separate the index we have provided.
  5. android:layout_span: We can use this attribute in any view inside the table row. We use it to assign more column space to a particular view compared to others. Hence, it helps a view to span multiple columns.

Public Methods of Adding Elements

We can add views in different ways to a table. The various methods are listed here:

  1. public void addView (View child,  int index): We use it to add a child view to the table. Since no layout parameters are defined here, the default parameters are for 
  2. public void addView (View child, ViewGroup.LayoutParams params): We use it to add a view by defining certain specific parameters.
  3. public void addView (View child, int index,  ViewGroup.LayoutParams params): It helps us add a view at a given index value and specified parameters.

Example of Table Layout

Let’s try to understand TableLayout better by implementing it with an example.

In this example, we will create a table of marks of various students using Table Layout.

The activity_main.xml file

In this file, we will  declare TableLayout and use TableRow to start adding table rows. Create a ranking  of students that defines four columns: S.No., name,subjects, and marks.

activity_main.xml will look like this after modification:

Code:

<?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:layout_marginTop="10dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:background="@color/white">

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Results:"
        android:textSize = "25dp"
        android:textStyle="bold">

    </TextView>


    <TableRow android:background="#EC8A48" android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="S.No."
            android:textSize="20dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Name"
            android:textSize="20dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Subjects"
            android:textSize="20dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Marks (50)"
            android:textSize="20dp"/>
    </TableRow>
    <TableRow android:background="#DBDFDF" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ninja 1"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="AI"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="38"
            android:textSize="10dp"
            android:textColor="@color/black"/>
    </TableRow>
    <TableRow android:background="#DBDFDF" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ninja 2"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Operating System"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="30"
            android:textSize="10dp"
            android:textColor="@color/black"/>

    </TableRow>
    <TableRow android:background="#DBDFDF" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="3"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ninja 3"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="COA"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="37"
            android:textSize="10dp"
            android:textColor="@color/black"/>

    </TableRow>

    <TableRow android:background="#DBDFDF" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ninja 4"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Computer Graphics"
            android:textSize="10dp"
            android:textColor="@color/black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="28"
            android:textSize="10dp"
            android:textColor="@color/black"/>

    </TableRow>

</TableLayout>

The MainActivity.kt file

After creating the layout, you need to load the XML layout resource from the activity's onCreate () callback method and use findViewById to access the UI element from XML.

The MainActivity.kt file will look like this:

Code:
package com.example.tablelayout

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

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

Output

 

 

After running the application on the emulator, it would look like this.

As visible in the above example, we have made a Table Layout, and it has four columns, namely as S.No., Name, Subjects, and Marks, and we have ranked the students according to their names.

FAQs

  1. Table Layout is a subclass of which class in android?
    Ans: Table Layout is a subclass of the ViewGroup class in android and is used to display the child View elements in the form of rows and columns. 
  2. What is the difference between grid and Table Layout?
    Ans: Table Layout shows data in the form of rows and columns, whereas grid view displays data in the form of a strict grid.
  3. Can we show borders of rows and columns in the Table Layout?
    Ans: No, Table Layout does not support showing the borders of their columns, rows, or cells.  

Key Takeaways

In this article, we have extensively discussed Table Layouts in Android and a sample application containing the implementation of a sample Table Layout. You can also read the blog Android UI layouts on the Coding Ninjas Website to create different Android UI layouts in your Android application.
We hope this blog has helped you enhance your knowledge regarding Table Layout in Android. If you want to learn more, check out our Android Development Course on the Coding Ninjas Website to learn everything you need to know about Android development. Do upvote our blog to help other ninjas grow. Happy Coding!

 

  

 

Previous article
Landscape Layout
Next article
Navigation Drawer in Android
Live masterclass