Click here to Skip to main content
11,571,471 members (74,811 online)
Click here to Skip to main content

Tagged as

Tabbed Applications in Android

, 6 Sep 2010 CPOL 186K 79
Rate this:
Please Sign up or sign in to vote.
Tutorial on creating tabbed applications in Android

Introduction

Sometimes, we want to wrap multiple views in a single window and navigate through them with a Tab Container. This can be done in Android using TabHost control.

There are two ways to use a TabHost application in Android:

  1. Using the TabHost to navigate through multiple views within the same activity.
  2. Using the TabHost to navigate through Actual multiple Activities using intents.

We will explain both ways through this tutorial.

Anatomy of Tabbed Application

An activity with a TabHost may look like this:

Tabs1.jpg

The Activity consists of:

  1. A TabHost: The root element of the layout
  2. The TabHost wraps a TabWidget which represents the tab bar.
  3. The TabHost wraps a FrameLayout which wraps the contents of each tab.

There are some rules that we must stick to when using a Tabbed activity:

  1. If the activity is of type TabActivity [optional], then the TabHost must have the id @android:id/tabhost.
  2. The TabWidget must have the id @android:id/tabs.
  3. The FrameLayout must have the id @android:id/tabcontent.

Now, let's see an example to an activity with multiple tabs.

This is the layout:

<?xml version="1.0" encoding="utf-8"?>

    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tab1"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab1"
    android:id="@+id/txt1"
    />    
    
     </LinearLayout>
     
     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab2"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab 2"
    android:id="@+id/txt2"
    />
   
     </LinearLayout>
     
      <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab3"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab 3"
    android:id="@+id/txt3"
    />
   
     </LinearLayout>
     </FrameLayout>
    
    </TabHost>

Then in the code of our activity:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
tabHost.setup();

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1");

TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2");
spec2.setContent(R.id.tab2);

TabSpec spec3=tabHost.newTabSpec("Tab 3");
spec3.setIndicator("Tab 3");
spec3.setContent(R.id.tab3);

tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);
}

is going to look like this:

Tabs2.jpg

  1. We create tabs using TabSpecs class.
  2. We set the title of each tab using TabSpecs.setIndicator() method.
  3. We set the content of each tab using TabSpecs.setContent() method.
  4. If you use TabActivity as a base class to your activity, you do not need to call TabHost.Setup() method.

We can add an icon to the title of the tab like this:

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.flash));

TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.sun));
spec2.setContent(R.id.tab2);

TabSpec spec3=tabHost.newTabSpec("Tab 3");
spec3.setIndicator("Tab 3",getResources().getDrawable(R.drawable.chart));
spec3.setContent(R.id.tab3);

It will look like this:

Tabs3.jpg

We can also specify the indicator to be a view:

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
TextView txt=new TextView(this);
txt.setText("Tab 1");
txt.setBackgroundColor(Color.RED);
spec1.setIndicator(txt);

Setting the Content of Tabs

We saw how to set the contents of tabs by specifying multiple layout resources to be displayed within the same activity.

What if we have multiple Activities in our application and we want to navigate between them using tabs? In this case, we will have one activity as the root activity of the application.

This activity will have the TabHost and will navigate to other activities using Intents.

Note: The root activity must inherit from TabActivity. The root activity will have layout file like this:

<?xml version="1.0" encoding="utf-8"?>
    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     </FrameLayout>
    </TabHost>

The other activities will have a simple layout consisting of a TextView.

Now to the code of the root activity:

public class TabDemo extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost=getTabHost();
        // no need to call TabHost.Setup()        
        
        //First Tab
        TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));
        Intent in1=new Intent(this, Act1.class);
        spec1.setContent(in1);
        
        TabSpec spec2=tabHost.newTabSpec("Tab 2");
        spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.chart));
        Intent in2=new Intent(this,Act2.class);
        spec2.setContent(in2);

        tabHost.addTab(spec2);
        tabHost.addTab(spec3);
    }
}

Tabs4.jpg

Adding Tabs at Run-time

We can add tabs to TabHost at run-time using TabSpec.setContent(TabContentFactory) method.

The TabContentFactory is an interface that requires the implementation of a callback method createTabContent(String tag) which returns the view to be added to the content of the tab. So in the last example, if we changed code that adds the content of the second tab to this:

TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));

        spec1.setContent(new TabContentFactory() {
   
   @Override
   public View createTabContent(String tag) {
    // TODO Auto-generated method stub
    
    return (new AnalogClock(TabDemo.this));
   }
  });

the activity will look like this:

Tabs5.jpg

View more tutorials on http://android-pro.blogspot.com.

History

  • 6th September, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mina Samy
Software Developer Symbyo Technologies
Egypt Egypt
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionSearch feature in Tabbed Application Pin
pyler5-Jun-15 19:36
memberpyler5-Jun-15 19:36 
QuestionHello Mina! I have question about your tab example! Pin
Mo Kash5-Sep-13 20:54
memberMo Kash5-Sep-13 20:54 
QuestionHow can I make swipe screen with tabwidget? Pin
Member 1023628227-Aug-13 12:58
memberMember 1023628227-Aug-13 12:58 
AnswerRe: How can I make swipe screen with tabwidget? Pin
Mina Samy27-Aug-13 23:04
memberMina Samy27-Aug-13 23:04 
QuestionThe type TabActivity is deprecated!!!!!!!!! Pin
moosa from iran2-Aug-13 13:05
membermoosa from iran2-Aug-13 13:05 
AnswerRe: The type TabActivity is deprecated!!!!!!!!! Pin
Mina Samy3-Aug-13 22:44
memberMina Samy3-Aug-13 22:44 
Questionexcelente! Pin
vJjurado6-May-13 4:16
membervJjurado6-May-13 4:16 
QuestionTab Content Listener Pin
Pratik Butani26-Feb-13 20:27
memberPratik Butani26-Feb-13 20:27 
GeneralMy vote of 5 Pin
Pratik Butani26-Feb-13 20:26
memberPratik Butani26-Feb-13 20:26 
QuestionTabbed Applications in Android Pin
Android00721-Jan-13 2:00
memberAndroid00721-Jan-13 2:00 
Questionsetting up different layout from different activities Pin
c-lu2-Jan-13 23:24
memberc-lu2-Jan-13 23:24 
QuestionListView Pin
nocodecrazy20-Nov-12 4:44
membernocodecrazy20-Nov-12 4:44 
GeneralMy vote of 5 Pin
A.J Bosch21-Oct-12 23:23
memberA.J Bosch21-Oct-12 23:23 
GeneralMy vote of 5 Pin
karamusti10-Sep-12 20:17
memberkaramusti10-Sep-12 20:17 
QuestionBroadcastReceiver Pin
ni306-Sep-12 23:17
memberni306-Sep-12 23:17 
QuestionForce closure of tab application Pin
AndyJava4-Sep-12 4:45
memberAndyJava4-Sep-12 4:45 
AnswerRe: Force closure of tab application Pin
Mina Samy8-Sep-12 21:21
memberMina Samy8-Sep-12 21:21 
QuestionNice and easy intro to tabs Pin
Member 935106311-Aug-12 6:54
memberMember 935106311-Aug-12 6:54 
GeneralMy vote of 5 Pin
Hatem Mostafa28-Mar-12 0:05
memberHatem Mostafa28-Mar-12 0:05 
QuestionBroken code Pin
MrFill24-Mar-12 4:58
groupMrFill24-Mar-12 4:58 
Questionsuper ??? Pin
franmr23-Jul-11 13:45
memberfranmr23-Jul-11 13:45 
GeneralRe: super ??? Pin
Jaydeep Jadav24-Nov-11 17:33
memberJaydeep Jadav24-Nov-11 17:33 
GeneralMy vote of 4 Pin
winroses2-Apr-11 2:07
memberwinroses2-Apr-11 2:07 
Questionsource codes? Pin
SilenceCleaner3-Oct-10 2:12
memberSilenceCleaner3-Oct-10 2:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150624.2 | Last Updated 6 Sep 2010
Article Copyright 2010 by Mina Samy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid