Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Customize the look of the tab bar in iOS Appcelerator Titanium
This is a typical new project -- a tab group with three tabs.
var tabGroup = Ti.UI.createTabGroup();
Tab 1.
var win1 = Ti.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' });
var tab1 = Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: win1
var button1 = Ti.UI.createButton({
title: 'Open Sub Window',
width: 200, height: 40
button1.addEventListener('click', function (evt) {{ title: 'Tab 1 Sub Window', backgroundColor: '#fff' }));
Tab 2.
backgroundImage: 'appicon.jpg',
window: Ti.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' })
Tab 3.
backgroundImage: 'appicon.png',
window: Ti.UI.createWindow({ title: 'Tab 3', backgroundColor: '#fff' })
Now call the overrideTabs function, and we're done!
tabGroup, // The tab group
{ backgroundColor: '#f00' }, // View parameters for the background
{ backgroundColor: '#999', color: '#000', style: 0 }, // View parameters for selected tabs
{ backgroundColor: '#333', color: '#888', style: 0 } // View parameters for deselected tabs
* Override a tab group's tab bar on iOS.
* NOTE: Call this function on a tabGroup AFTER you have added all of your tabs to it! We'll look at the tabs that exist
* to generate the overriding tab bar view. If your tabs change, call this function again and we'll update the display.
* @param tabGroup The tab group to override
* @param backgroundOptions The options for the background view; use properties like backgroundColor, or backgroundImage.
* @param selectedOptions The options for a selected tab button.
* @param deselectedOptions The options for a deselected tab button.
function overrideTabs(tabGroup, backgroundOptions, selectedOptions, deselectedOptions) {
// a bunch of our options need to default to 0 for everything to position correctly; we'll do it en mass: = deselectedOptions.bottom
= = selectedOptions.bottom
= backgroundOptions.left = backgroundOptions.right = backgroundOptions.bottom = 0;
// create the overriding tab bar using the passed in background options
backgroundOptions.height = 50;
var background = Ti.UI.createView(backgroundOptions);
// pass all touch events through to the tabs beneath our background
background.touchEnabled = false;
// create our individual tab buttons
var increment = 100 / tabGroup.tabs.length;
deselectedOptions.width = selectedOptions.width = increment + '%';
for (var i = 0, l = tabGroup.tabs.length; i < l; i++) {
var tab = tabGroup.tabs[i];
// position our views over the tab.
selectedOptions.left = deselectedOptions.left = increment * i + '%';
// customize the selected and deselected based on properties in the tab.
selectedOptions.title = deselectedOptions.title = tab.title;
if (tab.backgroundImage) {
selectedOptions.backgroundImage = deselectedOptions.backgroundImage = tab.backgroundImage;
if (tab.selectedBackgroundImage) {
selectedOptions.backgroundImage = tab.selectedBackgroundImage;
if (tab.deselectedBackgroundImage) {
deselectedOptions.backgroundImage = tab.deselectedBackgroundImage;
selectedOptions.visible = false;
background.add(tab.deselected = Ti.UI.createButton(deselectedOptions));
background.add(tab.selected = Ti.UI.createButton(selectedOptions));
// update the tab group, removing any old overrides
if (tabGroup.overrideTabs) {
else {
tabGroup.addEventListener('focus', overrideFocusTab);
tabGroup.overrideTabs = background;
function overrideFocusTab(evt) {
if (evt.previousIndex >= 0) {
evt.source.tabs[evt.previousIndex].selected.visible = false;
} = true;


I want to be able to simulate the behavior of the normal tab when you press it a second time and the tab group returns to the root window. I have tries several ways but failed so far. Do you know how to do this?


Jonathan Carter

I don't get it. I've manipulated this code and it didn't work. I've pasted this code in verbatim and it didn't work. I've even just downloaded this code and created a new project. I keep getting "Could not find the file overrideTabs.js". I've placed it in the same file as my app.js, I've put it in my resources file, I've put them both out in my main, I'm lost.

Can anyone tell me where the files are supposed to be located and if the are calling to each other appropriately? I've even changed line Ti.include line to be anatomocally correct: Ti.include('resources/overrideTabs.js') so that it points to wherever I've adjusted the file.

Any assist? Thanks in advance.



Hello Thanks for this wonderful code. Works great for me. I have only one question.. When I have 4 tabs and each tab name length is 4 or 5 chars. I feel fontsize is bigger. Is there anyway we can decrease the fond size .. please help me..

This needs a screenshot. All UI code does, really.
I have no idea what you're trying to do or what you achieved.

karaoak commented Dec 21, 2015

Thank you for your snippet illustrating the undocumented TabGroup.overrideTabs property. Didn't know this was accessible. Thanks for sharing.

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