Wednesday, March 21, 2012

Titanium Android bottom tabgroup

Native android tab group is ALWAYS forced to the bottom by the OS (not by appcelerator). The following post explain how to achieve Bottom tabbar in Titanium(Android OS)

The first thing you want to remember is 90% of whatever you want to be changed using any native config, can be done in Ti by placing that file in the projects root, under whatever structer it was to have in native land. So if the file in a native app would be in '/foo/text.xml', in Ti you would place it in '%your apps project root%/foo/text.xml' Knowing that will help you with a lot of more advanced topics in Titanium dev.

Create a new project, and add the following xml into a file named 'titanium_tabgroup.xml' (without the quotes), inside a new project directory you will create called '%your apps project root%/platform/android/res/layout/' (again, without the quotes).

The XML you want to add is found in this gist

Then do a clean build of your app and run in android :)

Sample Output from Android Simulator

Here you can download the complete working project from my Github Android Bottom Tab Group

Reference Post : Matt Apperson Blog Post


Bottom Tabgroup will be supported up to Titanium 3.0,  it will not be supported for Titanium 3.X  


Before SDK 3.0, we used TabActivity to implement the TabGroup. Since TabActivity is deprecated, we now use TabHost to implement the TabGroup for API level < 11 in SDK 3.0. We define the TabHost layout in the code. That's why the custom TabHost layout xml file does not work anymore.
Based on the guideline of Pure Android, the bottom tab bars are not recommended. In addition, for API level >= 11 we use ActionBar to implement the TabGroup, in which case tab bars can only be on the top. In order to provide a consistent experience, we don't recommend using bottom tab bars.

AppC Jira Link :


  1. can you put a sample of a basic project with bottom tabgroup? thank you very much!

  2. Thanks for reading my blog.

    Here is the link for sample bottom tabgroub app

  3. Thank you very much for the sample! You really helped me!
    I was wondering if you ever did a ratting button? Something that works like a 5 stars rating...

  4. I will do(5 stars rating system), If I get free time

  5. 5 star rating system(source code) -

  6. Hello, first of all, congratulations for the blog. Very nice.
    I was trying to run the app you put in the github but i'm having some problems.
    My titanium studio can't "import" the project.
    Could you help me?

  7. It worked pretty well for me! Thanks again!
    When i finish the make up for my 5 stars screen i will send to you my source code!
    Hey man, another thing, can you give me a sample or something lie that to teach me how to handle with different resolutions?
    The components and the backgroundImages...

  8. Hello Karthi, I am new at this, I was wondering if we can do something like this image template... thanks a lot!

  9. Yes, Yo can. For that you have to create a re-usable header view and it should be called in all the windows(through the application)

  10. Karthi,

    This fix no longer works on Titanium 3.0.0.GA. Do you happen to know a temporary work around so I can get this fix into my client's app?


  11. if you guys find something, please let me know, I'm looking for something like this. Thanks !

  12. Woh je crois que tu es à SUP :) bon... on cherche le même fix on dirait.

  13. Leonardo Jorge Dias CarmoJanuary 30, 2013 at 4:06 AM

    How do i implement this with alloy framework ?

  14. Hey, I've being using this source code to have my bottom tabs, but, with the new realease for Titanium it doesn't work anymore. Do you have another solution? Thank you very much!

  15. Thank author:

    I have been downloaded your example and import into Titanium Studio 3.1.x.

    However, tab is on top, not on bottom.

  16. Hi Hoàng ,

    Sorry for the inconvenience.

    In Titanium bottom Tab bar will be supported up to only 3.0. Please see my updated post.

    At the mean while I will try to get the bottom Tab bar in Titanium, if I get success I will update in same post.

  17. Thank you so much, wait you post

  18. Hi Karthi, thanks for the post.
    Can you please tell me how I can get a bottom tabBar using Alloy.
    Thanks a lot in advance.

    SEGA GENESIS. GENESIS-HANDS. Genesis (JP-EU). NA. NA. NA. SEGA GENESIS-HANDS. 토토 NA. SEGA GENESIS. 바카라 사이트 NA. poormansguidetocasinogambling GENESIS-HANDS. NA.