Tabs in Android

For an application that I am writing, I had to use tabs for part of the interface.  Quite honestly, this proved much more difficult then I anticipated; tabs in Android are…. weird, to say the least.  Thus I decided to post a blog entry describing how to use them.  I will save the customization entry for a later entry.

To start you need to understand the basic structure of a page with tabs.  The code below displays the basics of a tab page:
image

First item to note, the root ViewGroup: TabHost.  This does not render any UI, persay, it merely informs the activity that it will be hosting n activities, for each tab.  the TabWidget represents where the tabs themselves will be displayed.  The FrameLayout is where the content goes.  In so far as I have been able to tell, it is easiest to use these default names and have your underlying Activity inherit from TabActivity.

Next, the id values that I am using here are, for what I can tell, required; as is the syntax.  You will see how to access these components in the Activity code.

   1: public class TabTestActivity extends TabActivity {

   2:     /** Called when the activity is first created. */

   3:     @Override

   4:     public void onCreate(Bundle savedInstanceState) {

   5:         super.onCreate(savedInstanceState);

   6:         setContentView(R.layout.main);

   7:         

   8:         TabHost.TabSpec tab1 = getTabHost().newTabSpec("Hockey")

   9:             .setIndicator("Hockey Scores")

  10:             .setContent(new Intent()

  11:                 .setClass(this, HockeyScoresActivity.class));

  12:         

  13:         TabHost.TabSpec tab2 = getTabHost().newTabSpec("Football")

  14:             .setIndicator("Football Scores")

  15:             .setContent(new Intent()

  16:                 .setClass(this, FootballScoresActivity.class));

  17:         

  18:         TabHost.TabSpec tab3 = getTabHost().newTabSpec("Golf")

  19:             .setIndicator("Golf Scores")

  20:             .setContent(new Intent()

  21:                 .setClass(this, GolfScoresActivity.class));

  22:         

  23:         getTabHost().addTab(tab1);

  24:         getTabHost().addTab(tab2);

  25:         getTabHost().addTab(tab3);

  26:     }

  27: }

getTabHost() is a method that is implemented by TabActivity which will return the TabHost, assuming it has the name tabhost.  For each tab, an activity will be loaded into FrameLayout, hence the use of the Intents above; that being the case, do not forget to register your activities with your manifest file.  Running this code will produce the following:
image

Notice that there is some empty space above the “content” that we set.  This is because the default tabs expect an icon to be placed here.  Without it, as you can see, it looks rather odd.  I wont cover customizing tabs to that extent in this entry, but definitely in the next, as understanding it is critical to making tabs look good within a custom application.

The activities can contain pretty much anything you like.  One thing to notice is that we used a LinearLayout to separate the TabWidget and FrameLayout.  The layout you see above is not at all predefined, you can place the TabWidget and FrameLayout anywhere on the page with any number of other views.  For example:
image

Notice I added a TextView above the TabWidget.  When run, this code now looks like this:
image

Come to think of the TabWidget and FrameLayout as “hot zones”, that is places where the specialized effect resides and that can be used in a layout; if that makes any sense Smile

So at this point, I think you can see how tabs can be used within your application.  Obviously, understanding them to this point is not going to do you well except for the most basic of applications.  So to help you forward I will say this: to truly customize your tabs, you will need to targeting Android 2.x, and using the updated setContent call which takes a type View as a parameter.

I am including the source code for this version of the example application, I will be using it again in the next entry when I take this example further with Tab customization.
http://cid-630ed6f198ebc3a4.office.live.com/embedicon.aspx/Public/TabTest.zip

Advertisements

3 thoughts on “Tabs in Android

  1. Thnks for the tutorial ,i am new in android & it really helped me, i have a question
    i have a welcome page on that page i have 5 button, onclicking button one, i want a form with 2tabhost, lets suppose your example is that tabhost form.
    Problem: how to achieve this activity..
    welcome(button1)>newform(tabhost)…

    Like

  2. @priya so what you are talking about is a non-standard Tab Activity. You cant have two tabhosts, but you can have two tabWidgets and content.

    Getting a non-standard layout like this to work is tricky with Android. Ill see if I can post something about non-standard layouts in the future. Thanks for visiting

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s