Android Tab Layout Tutorial

STOP & READAs tabhost is deprecated by android it is not recommended to implement tab layout using the way mentioned in this article. Consider reading updated article about implementing tab layout using Fragments and ViewPager Android Tab Layout with Swipeable Views

In my previous article Android Layouts i explained about three layouts (Linear Layout, Relative Layout and Table Layout). In this post i will be discussing about Android Tab Layout. This is a simple tab layout contains 3 tabs.

The final output of this tutorial will be like below image

In this post we need three separate activities for three tab screens. So let’s get started by creating a simple project by opening eclipse IDE.

1. Create a new project File -> New -> Android Project and give activity name as AndroidTabLayoutActivity.2. Open your AndroidTabLayoutActivity and extend the class from TabActivity.

public class AndroidTabLayoutActivity extends TabActivity {

3. Now open your main.xml under res -> layout folder and type the following code.

4. Now we need 3 activities and 3 xml layouts for three tabs. So create three activities by right click on your package folder and create classes and name them as PhotosActivity.java, SongsActivity.java and VideosActivity.java. Type the following code respectively.Right Click on package folder -> New -> Class

5. Now create 3 xml layouts by right clicking on res/layout -> New -> Android XML File and name them as photos_layout.xml, songs_layout.xml and videos_layout.xml and type the following code in respective files.

6. Each and every tab needs an icon so design icons for each tab. We need three dimensions of each icon. Design each icon in 48 x 48 px, 32 x 32 px and 24 x 24 px and place them in drawable-hdpi, drawable-mdpi and drawable-ldpi respectively. See following diagram for your guidance

7. Android icon states will be define in xml files with default and hover state configurations. For three icons we need the icon state configuration files. So create three 3 xml files under drawable-hdpi directory. Type the following code for icon states.

Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.

It doesn’t run! Always the same problem, those classes .java has an error on R.layout and I dont know why! The code is the same but its not working

RickM

” layout cannot be resolved or s not a field “

Victor

Thanks for your tutorial, its working fine but i’m having a problem, i imported content for a tab, when i run it separately everything is working fine but when its under a tab, my spinners are blank and my buttons arent working as they should, toasters not apearing on screen, what can the problem be?

Satnam

error in main:
your content must have a ListView whose id attribute is ‘android.R.id.list’