Udemy logo

android tablelayout exampleAndroid is a popular platform for designing touch-screen based device applications. It can run on different types of hardware and provides support for impressive graphics and makes optimum use of various device’s hardware capabilities. The Open Handset Alliance which includes major IT organization such as Google is constantly improving and developing this widely used programming language. As it is based on the Java programming language those who already know Java can easily migrate to this platform. This is an exciting technology which is dominating the mobile landscape.  A large community of developers is constantly developing applications for both entertainment and business purposes for Android smart phones. If you’d like to be part of the Android story, now’s a good time to get started. This course is a great place for beginners to learn about Android development.

Here in this beginner’s level tutorial  we look at a few TableLayout examples.  We assume that you have a basic knowledge about Java programming language. If not you may want to first check out Java essentials for Android with this course.

What is View Object

A View object is the foundation for the user interface of an Android application. This object is created from the View class. It provides support for drawing and event handling. It is also the base class for widgets which are used to create interactive UI components.  The ViewGroup class is derived from the View class and is used to hold other Views or other ViewGroups. It also defines their layout properties.  There are different types of layout supported by Android. They are as follows – linear Layout, relative Layout, list view, grid view, absolute layout, frame layout and table Layout. Learn more about the Android UI in this beginners course.

TableLayout in Android

A table layout is a grid which contains rows and columns. Table Layouts are ideal for displaying tabular data. It can be also used to neatly align items on the screen. You can use TableLayout to organize UI (user Interface) or widgets.  There is a table row control for each row in your table.

TableRow is a layout where its elements are horizontally arranged. This object must always be used as a child of TableLayout. The children of the TableRow do not need to set the layout_width and layout_height attributes. These values are permanently MATCH_PARENT and WRAP_CONTENT respectively. Let’s take a closer look at some of the important methods of this class. You may also want to check out this course to help understand Android Layouts better.

TableLayout Overview

The TableLayout in Android is very much like the <table> tag in Html. It arranges its children in rows and columns.  <TableLayout> tag is the parent element and <TableRow> tag is its child of the parent element. <TableRow> is used to store any view object such as text field, button and more. The TableLayout does not show the borderline for the cells, rows or columns.

The number of columns of the table is equal to numbers of columns of the row with the most cells. In Android cells can be left empty, but unlike HTML here cells cannot span columns. The width of a column is equal to the width of the widest cell in that column. Columns can be made shrinkable by using the setColumnShrinkable() method. If the column is made shrinkable it is possible to shrink the column width. This is done in order to fit the table into its parent object. Similarly, if you want to stretch a particular column, use the setColumnStretchable() method. If declared stretchable, the column’s width can be expanded to fit any extra space. If you wish to hide a column, use the setColumnCollapsed()method.

The children elements of the TableLayout are not allowed to set the layout_width attribute. The value of the width of a child element should always be MATCH_PARENT. A child can set the layout_height attribute. The default value is WRAP_CONTENT. In case, the child is a TableRow, the height is constant and is equal to WRAP_CONTENT. Note that cells are added to a row in increasing column order. In case you don’t specify a column number for a child, it will go to the next available column. If the column number is skipped that will be regarded as an empty cell of that row. You are permitted to use any View subclass as a direct child element of table layout.

TableLayout Example

Here’s a simple example to put together the pieces we’ve learned so far.

This is a basic tablelayout. The first row is very basic, with a single column. The second row has three columns, and the third row has two columns. In this example, we’ve just written basic text in each section. You could also have images, buttons, or anything else. Here’s the code for this example

<TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:shrinkColumns="*" 
            android:stretchColumns="*" 
            android:background="#ffffff">
                        <!-- Row 1 with single column -->
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">
                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:textSize="18dp" 
                                android:text="Row 1" 
                                android:layout_span="3"
                                android:padding="18dip"
                                android:background="#b0b0b0"
                                android:textColor="#000"/>
                       </TableRow>
         
                        <!-- Row 2 with 3 columns -->
                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">
                            
                            <TextView
                                android:id="@+id/TextView04"
                                android:text="Row 2 column 1"
                                android:layout_weight="1" 
                                android:background="#dcdcdc"
                                android:textColor="#000000"
                                android:padding="20dip"
                                android:gravity="center"/>
                            <TextView
                                android:id="@+id/TextView04"
                                android:text="Row 2 column 2"
                                android:layout_weight="1" 
                                android:background="#d3d3d3"
                                android:textColor="#000000"
                                android:padding="20dip" 
                                android:gravity="center"/>
                            <TextView
                                android:id="@+id/TextView04" 
                                android:text="Row 2 column 3"
                                android:layout_weight="1" 
                                android:background="#cac9c9"
                                android:textColor="#000000"
                                android:padding="20dip" 
                                android:gravity="center"/>
                        </TableRow>
                         
                        <!-- Row 3 with 2 columns -->
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">
                            
                            <TextView
                                android:id="@+id/TextView04" 
                                android:text="Row 3 column 1"
                                android:layout_weight="1"  
                                android:background="#b0b0b0"
                                android:textColor="#000000"
                                android:padding="18dip" 
                                android:gravity="center"/>
                     
                            <TextView
                                android:id="@+id/TextView04" 
                                android:text="Row 3 column 2"
                                android:layout_weight="1" 
                                android:background="#a09f9f"
                                android:textColor="#000000"
                                android:padding="18dip" 
                                android:gravity="center"/>
                        </TableRow>
                         
      </TableLayout>

The code isn’t too complex, but to understand it better, you may want to take this course on Android development. We’ll also walk you through details of the TableLayout and TableRow classes we’ve used in this example.

Important Functions of TableLayout

Here is a comprehensive list of functions which belong to the TableLayout class.

Important functions of TableRow

  1. l       Left position
  2. t      Top position
  3. r      Right position
  4. b     Bottom position

Hope this article helped you understand the TableLayout in Android. Try out your own programs using TableLayout in order to master its use. If you need help at any point of time, you can refer back to this Android app development course.

Page Last Updated: May 2014

Top courses in Android Development

Dependency Injection in Android with Dagger 2 and Hilt
Vasiliy Zukanov
4.8 (2,203)
Bestseller
Android TDD Masterclass - Coroutines, Jetpack
Petros Efthymiou
4.5 (907)
Bestseller
The Complete Android Oreo Developer Course - Build 23 Apps!
Rob Percival, Nick Walter, Codestars • over 2 million students worldwide!
4.3 (17,562)
Full Android Development Masterclass | 14 Real Apps-46 Hours
Oak Academy, OAK Academy Team, Mehmet ÖNGEL
4.4 (790)
Mobile Penetration Testing of Android Applications
Gabriel Avramescu
4.6 (1,732)
Bestseller
Android Multithreading Masterclass
Vasiliy Zukanov
4.8 (898)
The Complete Android 12 & Kotlin Development Masterclass
Denis Panjuta, Tutorials.eu by Denis Panjuta
4.4 (11,829)
Bestseller
Android App Development Masterclass using Kotlin
Tim Buchalka, Jean-Paul Roberts, Tim Buchalka's Learn Programming Academy, David Reidy
4.5 (5,894)

More Android Development Courses

Android Development students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Request a demo