Tabs on Android

Using a tabbar, either at the top or bottom of an interface, is a typical design pattern used in apps to navigate between segments. This is used by the Android Twitter client for example. The typical way to implement this is by using TabWidget, TabActivity, TabHost and friends. Each tab is populated with whatever activity you want and all is well.

There is a problem with this approach however. If you start a new activity the tabs (area A, B, C) all disappear and this is not always what you want. Sometimes what you want is to keep the tabbar around and have an individual backstack for each of the tabs.

Typical tab layout

Typical tab layout

I’ve published an example on github that shows how you can get the best of both worlds. It explains how to keep an individual backstack for each tab, but also how to start activities that break out of the tabs as is the traditional way on Android. The Back button still works and you can also programmatically navigate back. The behavior of back is changed to respect the backstack of each individual tab.

If you want to try it out yourself I’ve compiled an Android package for you. Navigate to http://bit.ly/stacksintabs with your Android device and install the .apk to check it out.

Navigation in the example

Navigation in the example

The design is very simple. I still use TabWidget, TabHost and TabActivity (layout here) – but instead using normal activities for each tab, I subclass FragmentActivity – and build a stack of Fragments inside each tab. The gist of the code is in the addFragment(…) function

To launch a new fragment inside a tab (area D), see the launchNewFragment() function, and to see how you break out of the tabs and launch a new activity (area E) see the function launchNewActivity(…)

The fragments and activity I use are just examples, the point is that you replace ExampleActivity and ExampleFragment with you own classes.

My initial approach at solving this problem was using Fragments exclusively, but since nested Fragments are not supported on Android I gave up.

I hope this helps some of you – it’s all available under a BSD license. The example requires API level 7 and uses the Android Support library v4. Comments and contributions are welcome. Btw: I’m also working on a comparison between QML and Android XML where I compare pros and cons, so stay tuned for more :)

11 responses to “Tabs on Android

  1. Hi, very useful post. But, the official documentation says that TabActivity is deprecated. Have you any idea how to use tabs concept with a separate backstack without using TabActivity?

    • As nested Fragments (Fragment inside Fragment) are not support on Android, it’s basically impossible to implement this without using TabActivity.

  2. Thank you for your reply. But if TabActivity is deprecated, wheather it makes sense to use it?

  3. By launching a new fragment, Aren’t you doing the same,” Fragment inside Fragment” ?

    • No, the setup is basically:

      1. We have a TabActivity
      2. Where each tab is a FragmentActivitity
      3. Who again has one Fragment or more inside them

      So, there are no Fragments inside Fragments.

  4. “I’m also working on a comparison between QML and Android XML where I compare pros and cons,”
    Anything to report about this yet? Would be an interesting read…

  5. If i have button in any of my sub Fragment HOw to handle its Click event?

    • You find the button using findViewById(…), then you install an onClickListener(this) on it, you make your fragment implement OnClickListener and handle the clicks in onClick(…) for that fragment.

  6. santhosh kumar

    Very useful. Thanks. I have a listview in ExampleFragment.java, and populating some data into it from web. (downloading data and populating inside onCreateView method of fragment class) And Iam starting new fragment under same tab on click of list item. Now If I press back button Nothing is showing in my listview. No data is there. Where iam going wrong. Could you please help me out? Thanks in advance.

    • Note: I’m assuming you’re adding the ExampleFragment to the backstack before you are adding the new one.

      Here are some tips:
      - make sure that you override and implement onSaveInstanceState(…) to save any state you want to keep around (in case onDestroy is called)
      - make sure to create the view in onCreateView(..)
      - make sure to update the view in onActivityCreated(..)

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