Android TabLayout example

In this tutorial, we will demonstrates the use of TabLayout to render 4 tabs – “Android”, “Windows”, “Apple” and “BlackBerry”, each tab contains a textview to display a simple message.

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

1. Tab Images

Put 4 tab images in “res/drawable” folder. The tab images used in this tutorial are not follow the Android icon guideline, sorry, i’m just not good at design :).

directory structure

2. Tab Images in XML

Create 4 XM files to tell which image to use for each tab, and put it into the same “res/drawable” folder.

File : icon_android_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, you should use bg with grey -->
    <item android:drawable="@drawable/ic_tab_android"
          android:state_selected="true" />
    <!-- When not selected, you should use bg with white -->
    <item android:drawable="@drawable/ic_tab_android" />
</selector>

File : icon_apple_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_apple"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_apple" />
</selector>

File : icon_blackberry_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_blackberry"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_blackberry" />
</selector>

File : icon_windows_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_windows"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_windows" />
</selector>

3. Tab Activity

Create 4 activitiy classes, and tell which activity to use for when tab is clicked. All 4 classes are doing the same thing, display a textview component.

File : AndroidActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class AndroidActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is Android tab");
        setContentView(textview);
    }
}

File : AppleActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class AppleActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is Apple tab");
        setContentView(textview);
    }
}

File : BlackBerryActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class BlackBerryActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is BlackBerry tab");
        setContentView(textview);
    }
}

File : WindowsActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class WindowsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is Windows mobile tab");
        setContentView(textview);
    }
}

4. Main Activity

Create an entry point, link above 4 tab activity classes with TabHost, TabSpec and etc.

package com.mkyong.android;
 
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
 
public class MainActivity extends TabActivity {
 
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		Resources ressources = getResources(); 
		TabHost tabHost = getTabHost(); 
 
		// Android tab
		Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
		TabSpec tabSpecAndroid = tabHost
		  .newTabSpec("Android")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_android_config))
		  .setContent(intentAndroid);
 
		// Apple tab
		Intent intentApple = new Intent().setClass(this, AppleActivity.class);
		TabSpec tabSpecApple = tabHost
		  .newTabSpec("Apple")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config))
		  .setContent(intentApple);
 
		// Windows tab
		Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
		TabSpec tabSpecWindows = tabHost
		  .newTabSpec("Windows")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config))
		  .setContent(intentWindows);
 
		// Blackberry tab
		Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
		TabSpec tabSpecBerry = tabHost
		  .newTabSpec("Berry")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config))
		  .setContent(intentBerry);
 
		// add all tabs 
		tabHost.addTab(tabSpecAndroid);
		tabHost.addTab(tabSpecApple);
		tabHost.addTab(tabSpecWindows);
		tabHost.addTab(tabSpecBerry);
 
		//set Windows tab as default (zero based)
		tabHost.setCurrentTab(2);
	}
 
}

5. Android Layout file

File : res/layout/main.xml

<?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>

6. Android Manifest

At last, put everything in “AndroidManifest.xml“, defined 4 tab activity classes and set the “MainActivity” as entry point.

File : AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mkyong.android"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk android:minSdkVersion="10" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
 
        <activity android:name=".AndroidActivity" />
        <activity android:name=".WindowsActivity" />
        <activity android:name=".AppleActivity" />
        <activity android:name=".BlackBerryActivity" />
 
        <activity
            android:label="@string/app_name"
            android:name=".MainActivity"
            android:theme="@android:style/Theme.NoTitleBar" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

7. Demo

By default, Windows tab is selected.

android tab layout example

Click on the Android tab.

android tab layout example

Download Source Code

Download it – Android-TabLayout-Example.zip (23 KB)

References

  1. Android TabLayout example
  2. Tab layout tutorial incomplete
  3. Android icon design guideline
  4. Another Android tab layout example
  5. Android TabHost Javadoc
  6. Android TabWidget Javadoc
  7. Android FrameLayout Javadoc
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: Adding xml widgets to a tab view with java | Technology & Programming()

  • ahsinSidqi

    thanks a lot my friends, . . .
    this is really help me,…
    :D

  • sandeep

    Thanks buddy… Your tutorials are neat and simple..

  • Miki

    How to make the menu vertical??

  • Ali

    Thanks for the tutorial. Is there any open source license associated with the use of source code for TabLayout or is the sample source public domain?

    Regards,
    Ali

  • khush joshi

    what mein of it ?xml version=”1.0″ encoding=”utf-8″?>
    and this is how set in android pletform

  • amit

    can u plz show an example 4 tab layout using text as tab instead of images? or you can suggest modifications on the current example?

  • Vikram Viswanathan

    Hello,
    I’m one of your fans to love your blogs on Android tutorials. In this blog I learnt about TabLayout.
    In the example I’m working on, I’m using ActionBarSherlock. Since .setIndicator() is not available while extending SherlockFragmentActivity, could you please help me on this with an alternative?

    I’m also trying to add icons to the tabs created.

  • chris

    For a newbie, one of the most COMPLETE and concise “how-to” on this topic I’ve found. Thanks!

  • sundu

    hi,i m beginer of android.how to create one activity instead of another activity? pls help to make it.

  • Pingback: Binary XML file line #4: <item> tag requires a 'duration' attribute | BlogoSfera()

  • Pingback: Binary XML file line #4: <item> tag requires a 'duration' attribute : Android Community - For Application Development()

  • N.Nagaganesh

    Hai,Iam a beginner in android . your apps is so good.
    How do you add buttons and Other activities to each specific tab?
    please tell me sir.
    Thanks………………

  • akki

    hi but could u tell me how u had taken those res/drawable images how u had taken could u xpplain i’m new to android plz tell me how its possible

  • Pingback: How to put a listview inside a tab activity? : Android Community - For Application Development()

  • Pingback: Tabs - eine kleine Frage - Android-Hilfe.de()

  • David

    How do you add buttons and activities to each specific tab? For some reason it won’t work. Thanks

  • Vishal

    Nice tutorial
    Go ahead

  • http://sled5.net Stoycho Ivanov

    10x a lot your posts are always good for me. Ones agin 10x and keep good work…

  • Boris

    Thx you so much !

  • iam fresher

    thanks dear…

  • AndroidBeginner

    Hi I’m new to android and I came across your post I implemented my tab the same way and got it to work. Now I’m trying to just add one button to one of the Tabs…lets say for example for your android tab you add a greetings button that says Hello! when you click on it. I’ve tried everything but I can’t get it to work any help would be appreciated. Thanks!

  • VIjay

    Its gr8………..Its working..
    I needed this code for my project…
    Really Thanx!!!!!

  • sathiya

    Hai while am trying to run this program.. The main activity unfortunately it has stopped..
    But in Program there is no error.. and when extend TabActivity it tab activity is deprecation… Plz tell me the solution for this

  • http://balics.net agus

    Yeah,, great it work on me,, thanks a lot.. :D

  • T. Poon

    Hello, I am a newcomer for writing android apps.

    it works when I made

    set.Content(R.id.textView1)

    then, it wouldn’t work when I change to imageview, do you have any suggestions to fix that?

     mTabHost.addTab (mTabHost.newTabSpec("Tab_test1").setIndicator("Tab1").setContent(R.id.imageView1));
            mTabHost.addTab (mTabHost.newTabSpec("Tab_test2").setIndicator("Tab2").setContent(R.id.imageView2));
            mTabHost.addTab (mTabHost.newTabSpec("Tab_test3").setIndicator("Tab3").setContent(R.id.imageView3));
  • http://www.estrix.co.uk Iain Blackwood

    I have tried to implement this but cannot seem toi get a reference to the tabhost object
    What do i do here to get hold of the tabhost object?
    The following line produces an error:

     TabHost tabHost = getTabHost();