Android TabLayout example

By mkyong | Updated: August 29, 2012

Viewed: 392

Tags: android layout tablayout

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

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