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:

 

 

 

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

 

 

 

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

 

 

 

6.) EditActivity.java will look like following:

 

 

 

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:

 

 

 

Output –The final output:

Leave a Comment:

24 comments
KevinMN says June 4, 2011

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!

Reply
    Sushant says June 4, 2011

    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.

    Reply
Smith says June 11, 2011

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

Reply
Sushant says June 13, 2011

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

Reply
Sunny says June 16, 2011

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

Reply
Joshua says June 20, 2011

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

Reply
Sushant says June 20, 2011

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.


Reply
Joshua says June 20, 2011

Yes that took care of it, thanks Sushant πŸ™‚

Reply
Joshua says June 20, 2011

yes indeed that took care of it, Thanks Sushant πŸ™‚

Reply
Sushant says June 20, 2011

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.

Reply
mario says July 6, 2011

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

Reply
Dharmesh Garg says August 19, 2011

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.

Reply
Deepak Singh says September 7, 2011

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

Reply
Deepak Singh says September 7, 2011

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

Reply
miliu says October 4, 2011

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.

Reply
sundar says November 1, 2011

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

Reply
sundar says November 1, 2011

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

Reply
sundar says November 1, 2011

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

Reply
salim says November 20, 2011

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

Reply
James says February 19, 2012

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?

Reply
sibit says February 29, 2012

hi people,

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

Reply
andrew says April 17, 2012

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

Reply
Nirav says July 26, 2012

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…..

Reply
NK says July 26, 2012

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….

Reply
Add Your Reply