Adding a center button on your iOS Ti.UI.TabGroup

Remember the original “big center button” of the Instagram app?  Although this design language isn’t cutting edge anymore it still can be useful for a class of apps.  In this post we will explore how through a few lines of code you can create a center action button using the Titanium Alloy framework by Appcelerator.

View Code

To get started, first you need to create a Ti.UI.TabGroup with five Ti.UI.Tab’s.  You might notice that only four of the five Ti.UI.Tab’s are visible, but the hidden Ti.UI.Tab is needed to maintain spacing.  In the below snippet I’ve named and labeled each tab by number.  In our case, the third Ti.UI.Tab is the place-holder.

<Alloy>
	<TabGroup id="tbgroup">
		<Tab icon="KS_nav_views.png">
			<Window title="Tab 1">
				<Label>I am Window 1</Label>
			</Window>
		</Tab>
		<Tab icon="KS_nav_views.png">
			<Window title="Tab 2">
				<Label>I am Window 2</Label>
			</Window>
		</Tab>
		<Tab icon="KS_nav_views.png">
			<Window title="Tab 3">
				<Label>I am Window 3</Label>
			</Window>
		</Tab>		
		<Tab icon="KS_nav_views.png">
			<Window title="Tab 4">
				<Label>I am Window 4</Label>
			</Window>
		</Tab>	
		<Tab icon="KS_nav_views.png">
			<Window title="Tab 5">
				<Label>I am Window 5</Label>
			</Window>
		</Tab>			
	</TabGroup>
</Alloy>

Controller Code

Next alittle controller magic is needed.  Since Alloy does not allow for a Ti.UI.Button to be added to a Ti.UI.TabGroup in our view xml we need to do this programmatically in the controller.  The following snippet shows how a Ti.UI.Button named btnAction is created then added to the Ti.UI.TabGroup. 

var btnAction = Ti.UI.createButton({
	title:"I'm a button",
	backgroundColor:"#e7e7e8",
	width:85, height:55, bottom:0, borderColor:"#999"
});
 
$.tbgroup.add(btnAction);
$.tbgroup.open();

Since no position is provided, Titanium will automatically center the btnAction control within the boundary of the Ti.UI.TabGroup it is attached.  You just need to make sure the Ti.UI.Button you are attaching is larger then the Ti.UI.Tab place-holder in order to avoid incorrect touch events from firing.

What will we end up with?

The combination of the view and controller code creates the following screen with an oversized center action button.  Since these are just Titanium UI components you can style them and use event listeners as needed.