Appcelerator Blog

The Leading Resource for All Things Mobile

Customized TabBar for iOS in pure JS

0 Flares 0 Flares ×
Back when I first started using Titanium, I was working on an app that I wanted to have a color button (aka not use the gradient that iOS uses by default). To do this I hacked away for days to come up with a solution, and I found it! but repeating this look in new apps meant starting from zero time and again. Fast forward about a year and I come on board Appcelerator and I vowed to get this script finished and out in the wild! Why? Two reasons, the first is its a cool script (if I do say so myself) But also it proves a point, that you can do a lot with the bare APIs in Titanium. Screen Shot 2011-09-26 at 4.56.36 PM.png So lets go through this shall we? What does this script provide?
  • A drop in replacement for the default tabGroup, that with less then 3 lines of JS can get you started with adding these cool features to your already started app.
  • The ability to have large (bigger then the default tabbar height) full color tabs to enhance your UI using the new tabHeight and tabWidth properties on your tab.
  • An onClick property for your tabs so tabs can be more then just a window, for example a tab could end up being a reload button, or open the camera view…
  • A modal property to open your window in a modal window
  • A currentTab property to access the currently active tab off the tabGroup object
  • A currentTabIndex to access the index of the current tab off the tabGroup object
  • hideTabBar and showTabBar methods off of the tab group to hide and show the tabBar
  • selectedImage property to use an image for the highlighted bg of the currently selected tab
  This code is compatible with all iOS devices ONLY, android is not supported at this time. So how do we set it up? Simple! Simply copy the files from the customTabBar Github repo to the Resources dir of your project, then replace your Ti.UI.createTabGroup(); code in your app with: [gist id=1243429] and add your newly available properties as desired! (for more advanced details on usage, checkout this file in the repo) Have any questions? hit me up in the comments!
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×


  1. Skoua

    Nice !

  2. Shamsul

    Awesome! Having portability to Android would be a fantastic feature.

  3. Jeff

    Awesome. Will it just use the default tabs on Android or what is the Android fallback?

    • Matt Apperson

      Currently there is no android fallback, you have to do that manually, I plan on adding that soon though.

  4. Nice work Matt. I can’t see in the readme how to set the highlight colour of an icon. Is this a supported feature? If so, how does one do it?

    Thanks in advance…


    • Matt Apperson

      setting the selectedImage property on any tab with the custom:true property will do this for you.

  5. steve

    Is there a listing of properties? The example app.js is a bit confusing and requires me to build it.

    You mention selectedImage, and there is backgroundColor, what else?

  6. Cameron

    Any way to change the tab-bar background image?

    • Kevin Whinnery
    • Matt Apperson

      This will only change the background of custom tabs that were not selected… so this will only work if ALL tabs in your tabBar are set to custom:true… That said the reason for this project was to allow customizing of the existing tabbar/tabgroup… I plan to soon create a custom tabgroup for iOS and android that will be 100% custom, this one is simply customized. Does that make sense?

  7. Jason

    This is great! How would I hide the tab bar on child windows?

  8. Alfredo

    Hi Matt, thats code is great, but how can we change the state of a tab with a hightlight image?
    If i use the tab property selectedImage when a tab is focused two images are shown, image and selectedImage, and this one has another size resulting strange.
    this is my code:
    icon: ‘/images/search_tab.png’,
    selectedIcon: ‘/images/search_tab_HL.png’,
    selectedImage: ‘/images/search_tab_HL.png’,
    custom: true,

    i tried everything and none works

    Thks in advanced

  9. Foroct Fralion


    I almost have this working but there is one problem. I have 5 tabs the center one I want to make big (think instagram or foursquare). Visually I can do this by adding custom: true and tabHeight: 60 to my Tu.UI.createTab. The problem is that my 4th and 5th windows no longer show any content. I’m also getting the following error [ERROR] While executing Timer, received script error. ‘Result of expression ‘tabbar.tabs[i]’ [undefined] is not an object. at customTabBar.js (line 224)’

    Any thoughts?

  10. André

    I just need the selected background color to be changed (from blue to green). All icons should be the same. How do I do this with this script? Or is there any other solution?
    Thx so far …

  11. This could be exactly what I’m looking for. I need a button in the tabGroup that has a seperate action (ie not changing the active tab) what event do I need to listen out for and do I need to suppress the change within the group?

  12. Ah think I’ve found what I need in the app.js *duh*

  13. siamiam

    I’m not able to get this to work within my existing project or by running the demo project downloaded from github, both throw “CustomTabGroup error: badges can not be set on custom tabs”. I’m not sure what this is indicating is wrong … any help would be greatly appreciated. thanks!

  14. Gary

    @siamiam – I had that too so added
    in the create tab properties which made the error go away.

    My question is can I make the tab bar smaller? Or is the iOS background always going to be present? I’ve tried altering the fixed values (49) in the module (as well as setting the tabHeight obviously) but no joy.


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 ×