Titanium Tips

Tab Bar Icons

Close-up of a tab bar based app
If you're making a standard iPhone or iPad app that uses a tab bar, then you are likely to need some icons for that tab bar at some point or other.

The tab bar is the bottom strip along the base of the iPhone screen that includes nice icons to tap on. When you create a new iPhone or iPad app using Titanium Mobile, it automatically creates an app with a tab bar and two different tabs.

Read on to learn how to create a tab bar with custom icons or in-built system icons...
You set your tab bar icons in your app.js file, like so...
var tabGroup = Ti.UI.createTabGroup();

var win1 = Ti.UI.createWindow({
        title:"Home Page"
});

var tab1 = Ti.UI.createTab({
        icon:"tabbaricons/light_home.png",
        title:"Home",
        window:win1
});
tabGroup.addTab(tab1);


var win2 = Ti.UI.createWindow({
        title:"Bookmarks Page"
});

var tab2 = Ti.UI.createTab({
        icon:Titanium.UI.iPhone.SystemIcon.BOOKMARKS,
        window:win2
});
tabGroup.addTab(tab2);

tabGroup.open();


Custom Tab Bar Icons

Note that for Tab 1, I have used a custom tab bar icon, named “light_home.png” and have included it inside an “tabbaricons” folder inside the “Resources” folder. I got this icon from Appcelerator’s very own tab bar icon set, which has a great selection of tab bar icons that are free to use.

Other great sites for finding tab bar icons include:

Many of these icons are free to use with attribution, but some cost a few dollars as well. If you wish to support the iPhone 4 Retina display in your apps, be sure to get icons that include Hi-Res @2x versions. In this case, I put the Hi-Res icon “light_home@2x.png” inside my “tabbaricons” folder (along with the normal-sized “light_home.png” icon) and it worked nicely.



System Tab Bar Icons

For Tab 2, I have used one of Apple’s built-in tab bar icons, all of which are listed in the table below. You are free to use these Apple-supplied icons, but you must use them for their intended purpose and you have to use the names Apple gives them (e.g. the ‘Bookmarks’ icon is an open book, but you can't change the name of that icon and use it for something else like 'Literature'). The name is automatically applied, so when using one of Apple’s System Icons, specifying a ‘title’ is redundant.

The built-in system icons provided by Apple

Icon Name Code
bookmarks tab bar icon Bookmarks Ti.UI.iPhone.SystemIcon.BOOKMARKS
contacts tab bar icon Contacts Ti.UI.iPhone.SystemIcon.CONTACTS
downloads tab bar icon Downloads Ti.UI.iPhone.SystemIcon.DOWNLOADS
favorites tab bar icon Favorites Ti.UI.iPhone.SystemIcon.FAVORITES
featured tab bar icon Featured Ti.UI.iPhone.SystemIcon.FEATURED
history tab bar icon History Ti.UI.iPhone.SystemIcon.HISTORY
more tab bar icon More Ti.UI.iPhone.SystemIcon.MORE
most recent tab bar icon Most Recent Ti.UI.iPhone.SystemIcon.MOST_RECENT
most viewed tab bar icon Most Viewed Ti.UI.iPhone.SystemIcon.MOST_VIEWED
recents tab bar icon Recents Ti.UI.iPhone.SystemIcon.RECENTS
search tab bar icon Search Ti.UI.iPhone.SystemIcon.SEARCH
tor rated tab bar icon Top Rated Ti.UI.iPhone.SystemIcon.TOP_RATED