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 :).

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.

Click on the Android tab.

Download Source Code

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

References

33 comments on “Android TabLayout example”

Jim Stanton
June 7, 2021 at 9:20 pm

how do I get rid of the spaces in the drop down menus in the new new Firefox version(89)

Edwin Adeola Oluwasina
December 11, 2016 at 5:54 pm

Thanks sir. You saved me from all night issues without a solution.

Kamal Fuad
June 27, 2016 at 6:00 pm

Is it possible to work with an activity in each of the fragment under tabs? Because i have problem to work with activity in fragment (in tabs)..

jyoti
July 15, 2015 at 1:55 pm

on tab clicking my text is not changing can u please help me

NiKhil AroRa
April 22, 2015 at 2:51 pm

when its not working with Android Lollipop what are the alternates?
Thanks !!

Natan Rosenfeld
March 5, 2015 at 10:24 pm

Doesn’t work with android lollipop….

Hari
February 25, 2015 at 7:11 pm

It was great thank you. keep up the Good work.

MTHD
October 4, 2014 at 2:14 am

Awesome!

Rangga
May 4, 2014 at 1:22 am

I’m Indonesian

Terimakasih, Semoga Amal Ibadah kamu berkah

abhishek
April 27, 2014 at 12:12 am

not able to run application even after following all your steps

ahsinSidqi
October 28, 2013 at 10:15 pm

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

sandeep
October 1, 2013 at 2:43 pm

Thanks buddy… Your tutorials are neat and simple..

Miki
September 5, 2013 at 7:48 pm

How to make the menu vertical??

Ali
August 2, 2013 at 3:07 am

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
July 25, 2013 at 3:49 pm

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

amit
June 25, 2013 at 12:53 pm

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
June 23, 2013 at 9:17 am

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
June 21, 2013 at 6:08 pm

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

sundu
April 1, 2013 at 11:21 am

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

N.Nagaganesh
January 16, 2013 at 4:52 pm

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
January 11, 2013 at 1:36 pm

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

David
December 31, 2012 at 9:17 am

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

Vishal
December 10, 2012 at 10:12 pm

Nice tutorial
Go ahead

Stoycho Ivanov
November 5, 2012 at 6:19 pm

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

Boris
October 29, 2012 at 4:07 am

Thx you so much !

iam fresher
October 18, 2012 at 7:15 pm

thanks dear…

AndroidBeginner
October 9, 2012 at 11:17 am

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
September 24, 2012 at 7:01 pm

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

sathiya
September 21, 2012 at 2:42 pm

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

agus
September 8, 2012 at 9:09 pm

Yeah,, great it work on me,, thanks a lot.. 😀

T. Poon

August 20, 2012 at 2:00 am

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));

Iain Blackwood
July 5, 2012 at 7:54 pm
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(); 
```
1. feelingtheblanks
  July 14, 2012 at 9:37 pm
  
  TabActivity has the function getTabHost(), not Activity and TabActivity has been now deprecated. see : http://developer.android.com/reference/android/app/TabActivity.html