How do you create a raised tab bar item, like the

Question

I am trying to create a menu like the one on Instragram, with the central item using a special design, but the Titanium Documentation does not provide information about this kind of feature

There's an example with an already answered question in here: How do you create a raised tab bar item, like is found in Instagram? but I need it working on titanium, any clues?

Answer 1

I don't know for which platform Instragram is developed in Titanium but I know about this type of tabs. I have created similar type of tab for one of my project so i can say that this is not built in tab you have to create it at your own.

you have to design icons, backgrounds, raised background and write logic to get this work same as Tab using available UI widgets like views, imageview and labe.

Hope you will be able write logic for this. According to my knowledge this is not built in tab, it's a custom tab.

Answer 2

You can mimic that by following these steps; (This is hackish but the only way for now)

1. Create the tab group

   var tabGroup = Titanium.UI.createTabGroup({
       id:"bottomTabs", 
       bottom:-50
   });
   

2. Add tabs as much as you need

   var tabTimeline = Titanium.UI.createTab({  
       icon:"icons/[e-mail]",
       title:"Timeline",
   });
   

3. Create a button without a title to mimic the raised tab bar like in Instagram.

   var btnScan = Titanium.UI.createButton({
       backgroundImage:'icons/btn_action.png',
       width:46,
       height:46,
       title:'',
       bottom:0
   });
   

4. Add that button to the tab group.

   tabGroup.add(btnScan);
   

(hope someday titanium supports more low level APIs as well)

Answer 3

I believe Instagram is written in Objective-C. Creating a custom tab bar as they have made involves subclassing the native tab bar, but you don't have the ability to do that with just JS and Titanium.

Here's a tutorial for faking a custom tab bar in Titanium, which involves creating a window with buttons that controls the real tab bar.

http://www.samjordan.co.uk/2011/02/tutorial-custom-iphone-tabbar-using-appcelerator-titanium/