Ads

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

Updated:

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

Reason:

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 : https://jira.appcelerator.org/browse/TIMOB-12220

22 comments:

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

    ReplyDelete
  2. Thanks for reading my blog.


    Here is the link for sample bottom tabgroub app https://github.com/railskarthi/android-bottom-tab-bar

    ReplyDelete
  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...

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

    ReplyDelete
  5. 5 star rating system(source code) - https://github.com/appcelerator-developer-relations/Forging-Titanium/tree/master/ep-003/CustomComponents

    ReplyDelete
  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?
    Thanks

    ReplyDelete
  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...
    Thanks

    ReplyDelete
  8. Hello Karthi, I am new at this, I was wondering if we can do something like this image template... http://sdrv.ms/OHAdu1 thanks a lot!

    ReplyDelete
  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)

    ReplyDelete
  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?


    -John

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

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

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

    How do i implement this with alloy framework ?

    ReplyDelete
  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!

    ReplyDelete
  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.

    ReplyDelete
  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.

    ReplyDelete
  17. Thank you so much, wait you post

    ReplyDelete
  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.

    ReplyDelete