Tab Control

This is a sample activity which shows How to create Tab Layout at bottom of the screen in android.

Underlying Algorithm:

Basic description of algorithm in step by step form:
1.) Create a project TabSample.
2.) Put the following code snippet in main.xml:

<!--?xml version="1.0" encoding="utf-8"?-->
         android:id="@android:id/tabhost"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">
    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="3dp">
       <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" />
       <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom = "@android:id/tabcontent"
            />
    

3.) To create tab layout at bottom of the screen use the following in TabWidget in main.xml:

android:layout_alignBottom = "@android:id/tabcontent"

4.) For tab content create two more activities first OptionsActivity.java and second EditActivity.java.
5.) OptionsActivity.java will look like following:

package app.tabsample;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.TextView;

public class OptionsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView t = new TextView(this);
        t.setText("text");
        setContentView(t);
    }
}

6.) EditActivity.java will look like following:

package app.tabsample;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;

public class EditActivity extends ListActivity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setListAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, mListContent));
    }
    private static String[] mListContent={"Item 1", "Item 2", "Item 3","Item 1", "Item 2", "Item 3","Item 1", "Item 2", "Item 3","Item 1", "Item 2", "Item 3"};
}

7.) You must need to register these activities into your manifest file.Your manifest file will look like below:


        
            
                
                
            
        
        
        
 

8.) Run the Application.

Steps to Create:

1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. TabSample. Enter following information:
Project name: TabSample
Build Target: Google APIs
Application name: TabSample
Package name: app.TabSample
Create Activity: TabSample

On Clicking Finish TabSample code structure is generated with the necessary Android Packages being imported along with TabSample.java. TabSample class will look like following:

package app.tabsample;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

public class TabSample 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();       

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("TEXT").setContent(new Intent(this, OptionsActivity.class)));

        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("LIST").setContent(new Intent(this, EditActivity.class)));
        tabHost.setCurrentTab(1);
    }
}

Output โ€“The final output:

About the Author

Leave a Reply 24 comments

KevinMN - June 4, 2011 Reply

When I use the above code I get two errors. 1 is with setListAdapter . The second one is with getTabHost(); Both of these errors suggest Creating a Method named getTabHost and one named setListAdapter. New android programmer, can you help? Thanks!

    Sushant - June 4, 2011 Reply

    You must need to extend your activity with ListActivity and TabActivity instead of Activity to fix setListAdapter and getTabHost() errors respectivily as shown in the above code. If you will use exact same code there is no chance of any error. If you have still got some error please share your code here.

Smith - June 11, 2011 Reply

text and list button does not appear when the run the above code

Sushant - June 13, 2011 Reply

Those are Tabs and not buttons… Can you share your code?

Sunny - June 16, 2011 Reply

Hi guys,

I need your help regarding add 6 tabs on screen with 2 rows, i meant 3 tabs should display on 1st row and other 3 tabs display in 2nd row , Currently when i added 6 tabs, all tabs display in one row that seem awkward….

Thanks in advance

Joshua - June 20, 2011 Reply

here is my EditActivity.Java

package com.TabSample.com;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;

public class EditActivity extends ListActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, mListContent));
}
private static String[] mListContent={“Item 1″, “Item 2″, “Item 3″,”Item 1″, “Item 2″, “Item 3″,”Item 1″, “Item 2″, “Item 3″,”Item 1″, “Item 2″, “Item 3″};
}

here is OptionsActivity.Java

package com.TabSample.com;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.TextView;

public class OptionsActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView t = new TextView(this);
t.setText(“text”);
setContentView(t);
}
}

here is my TabSampleActivity.Java

package com.TabSample.com;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

public class TabSampleActivity 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();
tabHost.addTab(tabHost.newTabSpec(“tab1″).setIndicator(“TEXT”).setContent(new Intent(this, OptionsActivity.class)));

tabHost.addTab(tabHost.newTabSpec(“tab2″).setIndicator(“LIST”).setContent(new Intent(this, EditActivity.class)));
tabHost.setCurrentTab(1);
}
}

here is my main

As you can see it’s just copy/paste, but I am not getting any display on android emulator

The application TabSample(process com.TabSample.com) has stopped unexpectedly. Please try again.

Any reason why ?
I am using android 2.1 API level 7. I am not sure where the issue could be?? any ideas?
Thanks

Sushant - June 20, 2011 Reply

Joshua,

There could be two possibilities for the error you r getting.

1.) You have not defined any “TabHost” in your main.xml file. which causes instance not found exception. Use the main.xml code as given above in the post.

or

2.) you have not register OptionActivity and EditActivity into your manifest file. Write below two lines into your manifest and try again.


Joshua - June 20, 2011 Reply

Yes that took care of it, thanks Sushant :)

Joshua - June 20, 2011 Reply

yes indeed that took care of it, Thanks Sushant :)

Sushant - June 20, 2011 Reply

Sunny,

You can not have multiple row tab control in android. If you want to do so you have to either create custom tab control or you will have to use options menu. Tab controls are meant for that they can scroll horizontally in one row only. there is nothing awkward.

Thanks.

mario - July 6, 2011 Reply

awesome! thank u so much, BEST TUTORIAL for tabs ON THE WEB!

Dharmesh Garg - August 19, 2011 Reply

Hi,

I need to have tabs throughout my application.

Initially there are only three tabs and 3 related activity ,need to carry these tabs when i move from any of these activity to other activities apart from these 3.

Deepak Singh - September 7, 2011 Reply

This post realy good. how to make default all tab unselected. when click on tab then it should selected

Deepak Singh - September 7, 2011 Reply

How to make default all tab unselected. when click on tab then it should selected

miliu - October 4, 2011 Reply

Thanks for sharing the code. Based on your code, I got it almost working except that my tab content is showing up in the whole screen (behind the tabs) – it looks to me it got wrong parent. However, when I click a tab, it does switch to correct content. What could be the problem? My tab content is a regular linear layout.

sundar - November 1, 2011 Reply

Sushant can u tell me “How to write click event?” for the optionsActivity in this program?

sundar - November 1, 2011 Reply

Sushant can u tell me "How to write click event?" for the optionsActivity in this program?

sundar - November 1, 2011 Reply

Sushant can u tell me How to write click event? for the optionsActivity in this program?

salim - November 20, 2011 Reply

show an error msg create mthod getTabHost(). plz help me

James - February 19, 2012 Reply

Hi, thanks for your great articles. This helped me a lot.
I have this question how can I edit the content of this tabs using xml?
I mean can there be an xml file just like `main.xml` but for these separate tabs?

sibit - February 29, 2012 Reply

hi people,

Some person, can to upload the project ? thanks ๐Ÿ˜‰

andrew - April 17, 2012 Reply

The tab works fine, but does not see anything in the textview activity…any clue? thanks…

Nirav - July 26, 2012 Reply

Hi,

I am creating a tab control in my application where I need to create upto 6 tabs, which do not fit in screen.
So I need it to be scrollable so that I can scroll tabs and select any tab I want.

So any idea how it can be done?

Thanks…..

NK - July 26, 2012 Reply

Hi

I am creating a tab control in my application where it may contain upto 6 tabs and wont fit in the screen.

So I want it to be scrollable so that I can scroll and select any tab I want.

Any idea how it can be done?

Thanks….

Leave a Reply: