Learn Table Layout in Android

Introduction

This article explains TableLayout in Android. Android Studio is used to create the sample application.

TableLayout arranges its children into row and column. The Table Layout consists of a TableRow object to arrange children in a row.

In this, you will first use a TableLayout in your XML file and use Textviews according to your needs. I took five TextViews in this example. First, you will use one TextView inside the first Table Row, three TextViews inside a second Table Row and one TextView inside a third TableRow object.

Step 1

Create a project like this:

Step 2

Create an XML file and write this:

<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="#faa">
<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="20dp"
android:text="TextView1"
android:layout_span="3"
android:padding="16dip"
android:background="#0ff"
android:textColor="#000000"/>
</TableRow>
<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<TextView
android:id="@+id/TextView02"
android:text="TextView2"
android:layout_weight="1"
android:background="#0df"
android:textColor="#000000"
android:padding="28dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="textView3"
android:layout_weight="1"
android:background="#dff"
android:textColor="#000000"
android:padding="28dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView4"
android:text="TextView4"
android:layout_weight="1"
android:background="#faa"
android:textColor="#000000"
android:padding="27dip"
android:gravity="center"/>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
<TextView
android:id="@+id/TextView05"
android:text="Textview5"
android:layout_weight="1"
android:background="#d0d0ff"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="Row 3 column 2"
android:layout_weight="1"
android:background="#fdadbe"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
</TableRow>
</TableLayout>
<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="#faa">
<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="20dp"
android:text="TextView1"
android:layout_span="3"
android:padding="16dip"
android:background="#0ff"
android:textColor="#000000"/>
</TableRow>
<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<TextView
android:id="@+id/TextView02"
android:text="TextView2"
android:layout_weight="1"
android:background="#0df"
android:textColor="#000000"
android:padding="28dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="textView3"
android:layout_weight="1"
android:background="#dff"
android:textColor="#000000"
android:padding="28dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView4"
android:text="TextView4"
android:layout_weight="1"
android:background="#faa"
android:textColor="#000000"
android:padding="27dip"
android:gravity="center"/>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
<TextView
android:id="@+id/TextView05"
android:text="Textview5"
android:layout_weight="1"
android:background="#d0d0ff"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="Row 3 column 2"
android:layout_weight="1"
android:background="#fdadbe"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
</TableRow>
</TableLayout>

Step 3

Create a Java file and write this:

package com.tablayoutexample;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivit extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}

Step 4

Android Manifest.xml file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tablayoutexample"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="16" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.tablayoutexample.MainActivit"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

Step 5

2 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam10y ago
Good Show.
heemanshu bhalla12y ago
Here is a link i have taken help from it to use table layout in android . It also contains files to download code http://www.geeksprogrammings.blogspot.com/2014/07/xml-parsing-tablelayout-android.html