Android TabLayout example

http://www.mkyong.com/android/android-tablayout-example/

Java Forum

Advertise

Contact Us

RSS

Java Core

Web Frameworks

Spring

Hibernate

Web Service

Others...

Search

Android TabLayout example

Published: February 22, 2012 , Updated: February 23, 2012 , Author: mkyong

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
java Formacin Online y gratuita para obtener tu certificado en java ifi.com.es/es/IT_Certificaciones Free Web Development Tool Open Source Web 2.0 RAD Tool Cut dev costs 90% www.WaveMaker.com Aprende Ingls jugando Con la ayuda de tu telfono mvil Descarga el app hoy mismo! learnenglish.britishcouncil.org/en/

Put 4 tab images in res/drawable folder. The tab images used in this tutorial are not follow the Android icon guideline, sorry, im just not good at design . Mkyong en Facebook
Me gusta A 2,328 personas les gusta Mkyong.

Dinesh

Sneha

Sameh

Abhishek

Hassan

Sukhmeet

Anand

Wee

Santhosh

Satish

Plug-in social de Facebook

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

1 de 8

27/02/12 17:03

Android TabLayout example

http://www.mkyong.com/android/android-tablayout-example/

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

Subscribe Mkyong via email :

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

Latest Posts
Android WebView example Android TabLayout example How to import class automatically in Eclipse How to remove unused imports in Eclipse Android GridView example How to display line numbers in Eclipse How to check if Date is within a certain range in Java? How to check if date is valid in Java Struts 2 dynamic image example try-with-resources example in JDK 7

File : AppleActivity.java
Advertisement

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

As a market leader in the reseller hosting industry, micfo.com offers you a great opportunity to start your own web hosting company. Join them today.

Latest Comments
Navin on JSON example with Jersey + Jackson

2 de 8

27/02/12 17:03

Android TabLayout example

} }

http://www.mkyong.com/android/android-tablayout-example/

How to write a service consuming a JSON string as a parameter. I mean, method should consume directl... Meethas on Maven + (Spring + Hibernate) Annotation + MySql Example Hi , I need a simple hibernate project without maven or ant and i need to run it in apache tomcat se... HibLearner on Hibernate fetching strategies examples Suppose I have an Order table with 50 columns and I have an Order class with 50 properties and mappe... mkyong on Connect to PostgreSQL with JDBC driver Make sure postgresql-9.1-901.jdbc3.jar is configured correctly and able to locate in your class path... mkyong on Struts 2 Hello World Example Not really related with above article, please post your question on JavaNullPointer.com? And elabora...

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 import import import import import android.app.TabActivity; android.content.Intent; android.content.res.Resources; android.os.Bundle; android.widget.TabHost; 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

3 de 8

27/02/12 17:03

Android TabLayout example

http://www.mkyong.com/android/android-tablayout-example/

.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 <activity <activity <activity android:name=".AndroidActivity" /> android:name=".WindowsActivity" /> android:name=".AppleActivity" /> 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.

4 de 8

27/02/12 17:03

Android TabLayout example

http://www.mkyong.com/android/android-tablayout-example/

Click on the Android tab.

Download Source Code

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

References
1. 2. 3. 4. 5. Android TabLayout example Tab layout tutorial incomplete Android icon design guideline Another Android tab layout example Android TabHost Javadoc

5 de 8

27/02/12 17:03

Android TabLayout example

6. Android TabWidget Javadoc 7. Android FrameLayout Javadoc

http://www.mkyong.com/android/android-tablayout-example/

To Whom It May Concern, If you have any Java questions or problems, please post at this new JavaNullPointer.com forum. Best Regards, mkyong

Related Posts
Android GridView example Android TableLayout example Android WebView example Android ListView example How to set default activity for Android application

Popular Posts
Top 5 free Java eBooks Top 8 Java people you should know Top 20 Java websites you must visit Top 10 Java regular expression examples Top 10 open source forums in collection Top 5 open source Q&A systems

Java / J2EE Tutorials

Leave a Reply
Name (required)

Mail (will not be published) (required)

Website

[Note] - To post source code in comment, wrap your source code like this :

1. Java - <pre lang="java"> Java codes here </pre> 2. XML - <pre lang="xml"> XML here </pre> 3. HTML - <pre lang="html4strict"> HTML here </pre>

6 de 8

27/02/12 17:03

Android TabLayout example

http://www.mkyong.com/android/android-tablayout-example/

Submit Comment
Notify me of followup comments via e-mail

Poll : What is your current Java web application framework?

Apache Struts Apache Struts2 Apache Tapestry Apache Wicket Custom in-house Framework Google Web Toolkit (GWT) JavaServer Faces (JSF 1.x) JavaServer Faces (JSF 2.x) JBoss Seam No framework, code in JSP Oracle Application Framework Others Spring MVC Spring WebFlow Stripes View Results

Vote

All Available Tutorials

Java Core Technologies : Java I/O, Java RegEx, Java XML, Java JSON, JDBC, Java Misc J2EE Frameworks : Hibernate, JSF 2.0, Spring Core, Spring MVC, Spring Security, Apache Wicket, Struts 1.x, Struts 2.x Web Service : JAX-WS (SOAP), JAX-RS (REST) Build Tools : Maven, Archiva Unit Test Frameworks : jUnit, TestNG Others... : jQuery, Java MongoDB

Favorites Links
DZone - Fresh Links Official Java EE 5 Tutorial Spring 2.5.x documentation Hibernate core documentation Java SE 6.0 API documentation Java EE 6.0 API documentation Java Secure Socket Extension (JSSE) Reference Guide JSP home page JSF home page Eclipse IDE for Java developer Maven home page Ant home page Struts 1.3 documentation Struts 2.2 documentation Maven central repository Java.Net Maven repository Martin Fowler

Friends & Links

Java Training JavaScript Training Java Web Hosting Java & Co. Tutorials PHP Tutorials TenthOfMarch Find Free Icons Web Security Blog

About Mkyong.com
Mkyong.com is about a person who is facing the big tree (Java web development), always wonder why the tree (Java) is so big!

All tutorials and examples are unique, and from my personal experience, if you find mistake in my tutorial, please correct me :) after all, we learned through the process. For Java question that is not related to the tutorial, you can post here - Java Q&A forum. 1. Twitter - Follow Me 2. Facebook - Fan Page 3. RSS - Subscribe It Advertise With Us

7 de 8

27/02/12 17:03

Android TabLayout example

http://www.mkyong.com/android/android-tablayout-example/

Copyright 2008-2011 Mkyong Enterprise, all rights reserved. Privacy Policy

8 de 8

27/02/12 17:03