The vast majority of iPhone applications have a tab named “More” which holds the rest of the tabs which are not displayed in the tab bar. This design is done by default by the application when there are more tabs that the tab bar could display.

Android, on the other hand, crowds all the tabs together and scrolls the tab title if necessary. Although some may prefer this design, we like the way iPhone handles it.

We decided to simulate this design on Android, which is in particular useful if you have to implement the same application on both platforms.

Check the code snippet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
 
var isAndroid = false;
 
if (Ti.Platform.name === 'android') {
	isAndroid = true;
}
 
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
// create base UI tab and root window
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
 
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
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 win3 = Titanium.UI.createWindow({  
    title:'Tab 3',
    backgroundColor:'#fff'
});
 
var tab3 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 3',
    window:win3
});
 
var win4 = Titanium.UI.createWindow({  
    title:'Tab 4',
    backgroundColor:'#fff'
});
 
var tab4 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 4',
    window:win4
});
 
var win5 = Titanium.UI.createWindow({  
    title:'Tab 4',
    backgroundColor:'#fff'
});
 
var tab5 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 5',
    window:win5
});
 
var win6 = Titanium.UI.createWindow({  
    title:'Tab 5',
    backgroundColor:'#fff'
});
 
var tab6 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 6',
    window:win6
});
 
if (isAndroid) {
	var moreWin = Ti.UI.createWindow({
		title:'More',
		url:'more_window.js',
		backgroundColor:'#fff'
	});
	
	var moreTab = Ti.UI.createTab({
		icon:'KS_nav_ui.png',
		title:'More',
		window:moreWin
	});
}
 
//  add tabs
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
tabGroup.addTab(tab3);
tabGroup.addTab(tab4);
 
if (isAndroid) {
	tabGroup.addTab(moreTab);
} else {
	tabGroup.addTab(tab5);
	tabGroup.addTab(tab6);
}
 
// open tab group
tabGroup.open();
view raw app.js This Gist brought to you by GitHub.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
var win = Ti.UI.currentWindow;
 
var tabsData = [
	{title: 'Tab 5', hasChild: true, url: 'window5.js'},
	{title: 'Tab 6', hasChild: true, url: 'window6.js'}
];
 
var tabsTableView = Ti.UI.createTableView({
	data: tabsData
});
 
tabsTableView.addEventListener('click', function (e) {
	if (e.rowData.hasChild) {
		var newWin = Ti.UI.createWindow({
			title: e.rowData.title,
			url: e.rowData.url
		});
		
		Ti.UI.currentTab.open(newWin);	
	}
});
 
win.add(tabsTableView);
view raw more_window.js This Gist brought to you by GitHub.