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.

Transient

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.

stacksintabs-navigation.png

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 :)