Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Flipboard style tabgroup indicator for iOS. Drop tabIndicator.js into your Alloy lib folder, then add the module tag to your tabgroup and parameters to override the defaults. As you click on each tab, the indicator will slide across. VIDEO
<!-- note the ONLY change to this is the additional module="tabIndicator"
attribute + properties to override indicator defaults //-->
<TabGroup module="tabIndicator" tabsBackgroundColor="#000" tabIndicatorHeight="1" tabIndicatorColor="white" tabIndicatorWidth="75%">
<Tab title="Tab 1" icon="/images/icons/519-tools-1.png" activeIcon="/images/icons/519-tools-1_active.png" color="#555" activeColor="#fff">
<Window title="Tab 1" barColor="black" navTextColor = "#fff">
<Label onClick="openWin1">Tab 1</Label>
<Tab title="Tab 2" icon="/images/icons/516-archive-box.png" activeIcon="/images/icons/516-archive-box_active.png" color="#555" activeColor="#fff">
<Window title="Tab 2" barColor="green" navTextColor = "red">
<Label onClick="openWin2">Tab 2</Label>
<Tab title="Tab 3" icon="/images/icons/522-floppy-disk.png" activeIcon="/images/icons/522-floppy-disk_active.png" color="#555" activeColor="#fff">
<Window title="Tab 3">
<Label >Tab 3</Label>
// put me in /app/lib
exports.createTabGroup = function(args) {
// create base tabgroup
var tabGroup = Ti.UI.createTabGroup(args);
if (OS_IOS) {
// get the display width and calc the tab width
var deviceWidth = Ti.Platform.displayCaps.platformWidth;
var tabWidth = deviceWidth / tabGroup.tabs.length;
var indicatorWrapper = Ti.UI.createView({
width : tabWidth,
height : args.tabIndicatorHeight || 1.5,
left : 0,
bottom : 0,
// create the base indicator, takes args for height, width, color
var indicator = Ti.UI.createView({
height : Ti.UI.FILL,
backgroundColor : args.tabIndicatorColor || "red",
width : args.tabIndicatorWidth || tabWidth
// trap the focus event and animate the indicator
tabGroup.addEventListener("focus", function(e) {
left : tabWidth * e.index,
duration : 100
// add the indicator and return the tabgroup
return tabGroup;

This comment has been minimized.

Copy link

@brexis brexis commented Nov 11, 2014


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment