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
publicvoid 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
TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
res.getDrawable(R.drawable.
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.
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.
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.
Leave Comment