Android TableLayout example

In Android, TableLayout let you arranges components in rows and columns, just like the standard table layout in HTML, <tr> and <td>.

In this tutorial, we show you how to use TableLayout to arrange button, textview and edittext in rows and columns format, and also demonstrates the use of “android:layout_span” to span view in 2 cells, and “android:layout_column” to display the view in specified column.

Note
In Eclipse 3.7, XML code assist will not prompts the attribute “android:layout_span“, “android:layout_column” and many other useful TableLayout attributes, no idea why, may be bug. Just put the attribute inside, it’s still compile and run.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. TableLayout

Open “res/layout/main.xml” file, add following views for demonstration. Read the XML comments, it should be self-explanatory.

File : res/layout/main.xml


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

    <!-- 2 columns -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView1"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button1"
            android:text="Column 2" />
    </TableRow>

    <!-- edittext span 2 column -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <EditText
            android:id="@+id/editText1"
            android:layout_span="2"
            android:text="Column 1 & 2" />
    </TableRow>

    <!-- just draw a red line -->
    <View
        android:layout_height="2dip"
        android:background="#FF0000" />

    <!-- 3 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView2"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button2"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:text="Column 3" />
    </TableRow>

    <!-- display this button in 3rd column via layout_column(zero based) -->
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/button4"
            android:layout_column="2"
            android:text="Column 3" />
    </TableRow>

    <!-- display this button in 2nd column via layout_column(zero based) -->
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/button5"
            android:layout_column="1"
            android:text="Column 2" />
    </TableRow>

</TableLayout>

2. Demo

See result.

android tablelayout demo

Download Source Code

Download it – Android-TableLayout-Example.zip (15 KB)

References

  1. Android TableLayout example
  2. Android TableLayout JavaDoc
  3. Another great Android TableLayout example
  4. Set layout span through code

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
wasim
Guest
wasim

How to make row with only 2 textview but required 3 columns so either 1 or 3 column can be empty. ??

Skptricks
Guest
Skptricks

Nice tutorial

Prashant
Guest
Prashant

I am having 5 columns so how can i adjust in equal parts….

????
Guest
????

android:stretchColumns=”0,1,2,3,4″

Philip Jeffrey Trowe
Guest
Philip Jeffrey Trowe

Check out my blog. The following post includes a video
that shows you how to create an Android smartphone application that displays a
vertically scrolling list of countries on the screen. The application is
created using the Eclipse IDE and Android SDK. It features an “OK” button at
the bottom of the screen that, when pressed, terminates the application.

In the process of making this Android application you will
encounter the following SDK object types, etc: ScrollView, Button, View, TableLayout, TableRow, OnClickListener, TextView, and Colours in Android represented by hexadecimal numbers.

http://androidprogrammeringcorner.blogspot.com/2015/03/pak-longs-android-programming-corner.html

Best regards,

Philip

Rakhi Dhavale
Guest
Rakhi Dhavale

Thanks for the demo!

bhaskar
Guest
bhaskar

how to span a view in two rows

Skptricks php
Guest
Skptricks php

Try using linear layout.

tejinder
Guest
tejinder

as per the android specs the children of table layout should never be specified layout_width it is always taken to be match_parent

gumuruh s
Guest
gumuruh s

how to center the item of each row / column?

RB
Guest
RB

android:layout_gravity=”center” ?

Kana Kat
Guest
Kana Kat

is there anyway to click on each item in the table row? for example, I have 4 images in a table row and i want to click on each image to disply its name? so which event onclick i can use?

Vick
Guest
Vick

Been hitting a bunch of your post as I learn Android Dev. Great stuff, probably the best and easier to learn out there! Keep it up!

pamela
Guest
pamela

Este tipo de ejemplos ayudan muchísimo para los que apenas estamos aprendiendo. Thanks for the example.

Prabu
Guest
Prabu

It seems there is no direct property to do row span.
This website has information to do row span using table layout. May be this will help others.
http://www.compiletimeerror.com/2013/07/android-tablelayout-example.html

shawn
Guest
shawn

I have a question on this type of layout.
on a small phone, this is ok. However, when I try to do on a tablet for some sort of inventory infor input. I add a lot of fields and when I add android:textSize=”25sp” and android:layout_span to space between fields. The whole appearance get mess up. Do u know what kind of problem i am encounter? if need, i will send my XML thanks

Libin K K
Guest
Libin K K

when i used this table layout it works fine in the AVD but when i installed it on the phone it makes some resolution problems, ie it doesn’t matches with the screen size can you help me out in this

trackback
Achieving the same result without paddingLeft property : Android Community - For Application Development

[…] Use TableLayout Here is an example […]

Android Guru
Guest
Android Guru

How to check whether Wi-Fi internet access is active or not in a device. Take a look at the post:
http://android.programmerguru.com/android-check-wifi-internet-connection/

sabas mendivil
Guest
sabas mendivil

i guess that the prompts are more kind of an advise, you put “columns x” like text and it will be “better” if you put them as values at strings, i didn’t try to change it but i guess it’s just the advice, not a bug :)

trackback
Android two column Layout : Android Community - For Application Development
H3
Guest
H3

Awesome, as always

trackback
How do I overcome the issue of a TextView not fitting on the screen and also pushing other content off the screen? : Android Community - For Application Development

[…] Here is a good tutorial which does nifty things with the spacing of the columns in TableLayouts and … Take special note of which attributes he uses on his TableRows and their children in order to achieve the layout he wants. […]

Hari
Guest
Hari

great tutorial, thanks for your help

AnuradhaSuresh
Guest
AnuradhaSuresh

Hai. I am a starter in android application development. Kindly help me how to create multiple rows in a table and key performance to create a row. I am able to create 3 rows now. but i want to autogenerate the rows while entering the datas in table.

trackback
How to create a 10×10 grid in Android? : Android Community - For Application Development

[…] You can achieve this with a table layout : http://www.mkyong.com/android/android-tablelayout-example/ […]

Siva Kumar
Guest
Siva Kumar

Thanks …

ashu
Guest
ashu

awosome tutorial …………………..

javaLover
Guest
javaLover

great tutorials … thanks …

Honey Hong
Guest
Honey Hong

thanks, this is very helpful. :)

shima
Guest
shima

thanks a lot

Awais
Guest
Awais

nice work

Pieter
Guest
Pieter

Very nice site! Just a quick language tip :-).

You might also like this tutorials : …

Should be:

You might also like THESE tutorials : …

Neo An
Guest
Neo An

Thanks for sharing! Your post is very useful to me!
Wish you best! :)