tablayout（已废弃）

11/2/2017 - 5:45 AM
Mkyong.com
Android
 
Java Core
 
Frameworks
 
Misc
 
Contact Us
Android TabLayout example

By mkyong | February 22, 2012 | Last Updated : August 29, 2012
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
<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- When selected, you should use bg with grey --><itemandroid:drawable="@drawable/ic_tab_android"android:state_selected="true"/><!-- When not selected, you should use bg with white --><itemandroid:drawable="@drawable/ic_tab_android"/></selector>
File : icon_apple_config.xml
<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- When selected --><itemandroid:drawable="@drawable/ic_tab_apple"android:state_selected="true"/><!-- When not selected --><itemandroid:drawable="@drawable/ic_tab_apple"/></selector>
File : icon_blackberry_config.xml
<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- When selected --><itemandroid:drawable="@drawable/ic_tab_blackberry"android:state_selected="true"/><!-- When not selected --><itemandroid:drawable="@drawable/ic_tab_blackberry"/></selector>
File : icon_windows_config.xml
<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- When selected --><itemandroid:drawable="@drawable/ic_tab_windows"android:state_selected="true"/><!-- When not selected --><itemandroid: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
packagecom.mkyong.android;
 
importandroid.app.Activity;importandroid.os.Bundle;importandroid.widget.TextView;
 
publicclass AndroidActivity extends Activity {publicvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
 
        TextView textview =new TextView(this);
        textview.setText("This is Android tab");
        setContentView(textview);}}
File : AppleActivity.java
packagecom.mkyong.android;
 
importandroid.app.Activity;importandroid.os.Bundle;importandroid.widget.TextView;
 
publicclass AppleActivity extends Activity {publicvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
 
        TextView textview =new TextView(this);
        textview.setText("This is Apple tab");
        setContentView(textview);}}
File : BlackBerryActivity.java
packagecom.mkyong.android;
 
importandroid.app.Activity;importandroid.os.Bundle;importandroid.widget.TextView;
 
publicclass BlackBerryActivity extends Activity {publicvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
 
        TextView textview =new TextView(this);
        textview.setText("This is BlackBerry tab");
        setContentView(textview);}}
File : WindowsActivity.java
packagecom.mkyong.android;
 
importandroid.app.Activity;importandroid.os.Bundle;importandroid.widget.TextView;
 
publicclass WindowsActivity extends Activity {publicvoid 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.
packagecom.mkyong.android;
 
importandroid.app.TabActivity;importandroid.content.Intent;importandroid.content.res.Resources;importandroid.os.Bundle;importandroid.widget.TabHost;importandroid.widget.TabHost.TabSpec;
 
publicclass MainActivity extends TabActivity {
 
	publicvoid 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
<?xmlversion="1.0"encoding="utf-8"?><TabHostxmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:padding="5dp"><TabWidgetandroid:id="@android:id/tabs"android:layout_width="fill_parent"android:layout_height="wrap_content"/><FrameLayoutandroid: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: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

Android TabLayout example
Tab layout tutorial incomplete
Android icon design guideline
Another Android tab layout example
Android TabHost Javadoc
Android TabWidget Javadoc
Android FrameLayout Javadoc
Tags : android layout tablayout
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

Developer Links

Android Getting Started
Google App Engine – Java
Spring 2.5.x Documentation
Spring 3.2.x Documentation
Spring 4.1.x Documentation
Java EE 5 Tutorial
Java EE 6 Tutorial
Java EE 7 Tutorial
Java 6 API
Java 7 API
Java 8 API
JSF Home Page
JSP Home Page
Maven Central Repository
Hibernate ORM
JAX-WS Home Page
JAX-RS Home Page (Jersey)
Friends & Partners

Java Code Geeks
TestNG Founder
DZone
Build Tools

Apache Ant
Apache Maven
Gradle
About Mkyong.com

Mkyong.com is for Java and J2EE developers, all examples are simple and easy to understand, of course it is well tested in my development environment. 

Mkyong.com is created, written by, and maintained by Yong Mook Kim, aka Mkyong. It is built on WordPress, hosted by Liquid Web, and the caches are served by CloudFlare CDN.
   
Copyright © 2008-2015 Mkyong.com, all rights reserved.
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

tablayout（已废弃）
