Appcelerator Blog

The Leading Resource for All Things Mobile

How to create a Tab Group Menu specific to the selected Tab on Android?

0 Flares 0 Flares ×

Titanium supports TabGroup for iOS, Android, Windows Phone and Mobile Web. But since Titanium uses 100% Native UI Components how they look and work depends on the target platform.

How a TabGroup works on iOS

On iOS the top Navigation Bar belongs to the Window of the active Tab. It displays the Window title and optional left or rightNavButtons. Take the Console Tab of our Titanium 5.2.0 Sample App for example:


How a TabGroup works on Android

On Android however, the top Action Bar belongs to the TabGroup. It will always display the TabGroup.title or default to that of your app. The same is true for the optional Action Items, as you can read under Menus on Tab Groups in our API Reference.

How we’d want to define Menu Items

Did you notice that for both iOS and Android the Trash/Clear menu item of our sample’s Console Tab is defined in the console window? Didn’t we just say that wouldn’t work on Android? How come it does?


Here’s how

Let me show you how you can define your Menu Items in the Tab Windows on both iOS and Android. It requires a few lines of logic in your TabGroup controller without it needing to know anything about the items a Tab might add. Apart from separation of concerns, this also has the benefit that the Menu Items will also still show if you’d open the Window directly.


Our root controller-view is a TabGroup with two tabs. The first Tab we define here. The Window of the Tab we require window.xml. Nothing special to see here.

	<TabGroup id="tabGroup">
		<Tab title="Tab A">
			<Window title="Window A">
				<Label>Label A</Label>
		<Tab title="Tab B">
			<Require src="window" />


In the XML for the Window we’re requiring we simply follow the documentation to define the Action Bar menu. It will work fine if you open the Window directly via $, but not if you use the Window in a TabGroup. The oncreateOptionsMenu() callback this generates will never be called when its part of a TabGroup. At least, not yet.

	<Window id="win" title="Window B">
		<Menu platform="android">
			<MenuItem title="Item" onClick="doItem" showAsAction="Ti.Android.SHOW_AS_ACTION_ALWAYS" />
		<RightNavButton platform="ios" title="Item" onClick="doItem" />
		<Label>Label B</Label>


All the magic is in the following (effectively) 12 lines of code for our TabGroup controller:


	$.tabGroup.addEventListener('open', function() {

		// When we are asked to create the TabGroup Action Bar menu
		$.tabGroup.activity.onCreateOptionsMenu = function(e) {
			// If the Window of the active Tab has defined a menu
			if ($.tabGroup.activeTab.window.activity.onCreateOptionsMenu) {
				// Pass the request on

	// When the active tab changes
	$.tabGroup.addEventListener('focus', function(e) {
		// Recreate the TabGroup Action Bar menu

For the first part we follow the Menus on Tab Groups section of the API Reference but instead of handling the creation of the menu here, we check if the Window of the activeTab has onCreateOptionsMenu defined and basically delegate the event.

When the user changes tabs, the TabGroup will fire its focus event. When this happens we invalidate the existing menu which will remove the existing menu items and call onCreateOptionsMenu(). That’s it!

Code Strong! 🚀

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×


  1. falko

    Clear and simple. Thx!

  2. Gerard

    IMHO there is 1 ) too many in line 7

    • You’re so right! Thanks for that – I fixed it.

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×