2 tab groups in one 1 window

You must Login before you can answer or comment on any questions.

hi does anybody know if its possible to have 2 tabgroups in one 1 window.

so you got your default tab group at the bottom of your iPhone

and then one tab group in the middle of your screen. same idea like the app Untappd

— asked 8 months ago by Napp Dev
4 Comments
  • yes is posibble.

    — commented 8 months ago by kim huat

  • how should i go about it because Anthony Decena says you can only have 1 tab group

    — commented 8 months ago by Napp Dev

  • @Kim - thank you, that was very insightful.

    @Napp - If you try and add a tabgroup to an existing window, that tabgroup will get added, but it WILL break your app. It does not work as you would expect it to work (one tabgroup positioned within the other). If you need proof of that, here is a screenshot of a second tabgroup attached to the second window of the first tabgroup: http://f.cl.ly/items/2K2l1x2C343l3o1N441R/Screen%20Shot%202012-10-06%20at%209.31.57%20AM.PNG

    So you can spend a bunch of time trying to figure out a way to get a second tabgroup added to your app, or you can resign yourself to the simple idea that you will have to use a button bar or customize your own tabgroup-like component just as Untappd did in order to accomplish the same thing.

    I'll save you some time, create a view, the same height as a tab bar, and fill it with icon images horizontally. Index them 0 to whatever. Create a window/view for each one of those icons and index them accordingly. when one of the icons gets clicked on, show the window/view that is attached to that icon. There you have it, tabgroup in a box.

    — commented 8 months ago by Anthony Decena

  • Show 1 more comment

2 Answers

No, you can only have one tabgroup. The Untappd app looks like they have a main tab group and then a custom tab bar that controls the inner views. You'll have to build out this functionality on your own.

Hello Napp,

You want like this ???

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
 
var tabGroup = Titanium.UI.createTabGroup({
    left : 0,
    width : 155
});
 
var win1 = Titanium.UI.createWindow({  
    title:'TabGroup 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
 
win1.add(label1);
 
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});
 
var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 2',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
 
win2.add(label2);
 
 
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
 
tabGroup.open();
 
 
 
var tabGroup2 = Titanium.UI.createTabGroup({
    left : 160,
    width : 160
});
 
var win1 = Titanium.UI.createWindow({  
    title:'TabGroup 2',
    backgroundColor:'pink'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 3',
    window:win1
});
 
var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 3',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
 
win1.add(label1);
 
var win2 = Titanium.UI.createWindow({  
    title:'Tab 4',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 4',
    window:win2
});
 
var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 4',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
 
win2.add(label2);
 
tabGroup2.addTab(tab1);  
tabGroup2.addTab(tab2);  
 
tabGroup2.open();

— answered 8 months ago by Ritesh .
answer permalink
2 Comments
  • i tried that but it only displays one tab group (the default one at the bottom of the iPhone)

    — commented 8 months ago by Napp Dev

  • What good is posting all this code if its not even tested. All you did was copy and paste the default project twice. You changed the titles that are displayed but you didn't even bother to change the variable names, so even if this was possible it wouldn't work.

    — commented 8 months ago by Anthony Decena

Your Answer

Think you can help? Login to answer this question!