Using Tab layout in Android Application
To create a tabbed UI, you need
to use a TabHost and a TabWidget. The TabHost must be the root node for the
layout, which contains both the TabWidget for displaying the tabs and a
FrameLayout for displaying the tab content.
In this article I am going to
explain how to create tabbed UI by using separate
Activity for each tab.
Create a
project
Start a new project named
TabLayoutDemo.
First, create three separate
Activity classes in your project (src/package): ArtistActivity,
AlbumActivity and
SongsActivity. Each activity
represent a separate tab. Make each one display a simple message by using
TextView as shown below:
ArtistActivity:
import
android.app.Activity;
import
android.os.Bundle;
import
android.widget.TextView;
public
class ArtistActivity
extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textview =
new TextView(this);
textview.setText("This is the
Artists tab");
setContentView(textview);
}
}
AlbumActivity:
import
android.app.Activity;
import
android.os.Bundle;
import
android.widget.TextView;
public
class AlbumActivity
extends Activity {
@Override
public
void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textview =
new TextView(this);
textview.setText("This is the
Albums tab");
setContentView(textview);
}
}
SongsActivity:
import
android.app.Activity;
import
android.os.Bundle;
import
android.widget.TextView;
public
class SongsActivity
extends Activity {
@Override
public
void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textview =
new TextView(this);
textview.setText("This is the
Songs tab");
setContentView(textview);
}
}
Open
AndroidManifest.xml and add the
activities created above in the application tag.
Add the
NoTitleBar theme to the
TabLayoutDemoActivity activity tag. This will remove the default application
title from the top of the layout.
<application android:icon="@drawable/icon"
android:label="@string/app_name">
<activity android:name=".TabLayoutDemoActivity"
android:theme="@android:style/Theme.NoTitleBar"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
<activity android:name=".ArtistActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
<activity android:name=".AlbumActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
<activity android:name=".SongsActivity"
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>
Open
res/layout/main.xml folder and add
the following code in the main.xml file:
<?xml
version="1.0"
encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
/>
</LinearLayout>
</TabHost>
Save the icon
images (ic_tab_artists_grey.png,
ic_tab_artists_white.png) in your project
res/drawable/ directory.
Create a three XML
file in res/drawable/ named
ic_tab_artists.xml, ic_tab_albums.xml,
ic_tab_songs.xml and insert the following code in all three xml files:
<?xml
version="1.0"
encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_tab_artists_grey"
android:state_selected="true"
/>
<item android:drawable="@drawable/ic_tab_artists_white"
/>
</selector>
Now open
TabLayoutDemoActivity.java and make it extend
TabActivity. Use the following code for the
onCreate() method:
import
android.app.TabActivity;
import
android.content.Intent;
import
android.content.res.Resources;
import
android.os.Bundle;
import
android.widget.TabHost;
public
class
TabLayoutDemoActivity
extends TabActivity {
@Override
public
void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources();
// Resource
object to get Drawables
TabHost tabHost = getTabHost();
// The
activity TabHost
TabHost.TabSpec spec;
// Reusable TabSpec for each tab
Intent intent; // Reusable
Intent for each tab
// Create an Intent to launch an Activity for the tab
(to be reused)
intent =
new
Intent().setClass(this, ArtistActivity.class);
//Initialize a
TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
tabHost.addTab(spec);
// Do the same for the other tabs
intent =
new
Intent().setClass(this, AlbumActivity.class);
spec = tabHost.newTabSpec("albums").setIndicator("Albums",
res.getDrawable(R.drawable.ic_tab_albums)).setContent(intent);
tabHost.addTab(spec);
intent =
new
Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("songs").setIndicator("Songs",
res.getDrawable(R.drawable.ic_tab_songs)).setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(2);
}
}
Run the
application.
Your application should look like this
When you select a tab, it will display the text in the frame layout.