Custom tabbar for ios (iphone and ipad) that was built of the custom tabgroup found here : gist.github.com/853935 Added a larger middle icon that sticks above tabgroup

gistfile1.txt

function customTabView(tabGroup) {
  var isIPad = Ti.Platform.osname === 'ipad';
	var maxWidth = isIPad ? 70 : 100;

	var container = Ti.UI.createView({
		width : '100%',
		height : 80,
		bottom : 0,
		touchEnabled : false
	});

	var background = Ti.UI.createView({
		width : '100%',
		height : 50,
		bottom : 0,
		backgroundImage : 'footer.png',
		layout : 'horizontal',
		tabs : [],
		touchEnabled : false
	});
	container.add(background);

	var icons = [{
		image : 'tabicon_appointments.png',
		title : 'Appointments',
		width : '40%',
		top : 7,
		left : isIPad ? '15%' : 0
	}, {
		image : 'tabicon_clock.png',
		title : 'History',
		width : '50%',
		top : 4,
		left : 0
	}, {
		image : 'tabicon_home.png',
		title : 'Home',
		width : '60%',
		top : 4,
		left : 0
	}, {
		image : 'tabicon_mydoctor.png',
		title : 'My Doctor',
		width : '50%',
		top : 4,
		left : 0
	}, {
		image : 'tabicon_myprofile.png',
		title : 'My Profile',
		width : '50%',
		top : 4,
		left : 0
	}]
	
	if(tabGroup.tabs[1].title == 'Create'){
		icons[1].image = 'plus.png';
		icons[1].title = 'Create';
		icons[1].width = '50%';
		icons[1].top = 4;
		icons[1].left = 0;
	}

	var tabWidth = maxWidth / icons.length + '%';
	for (var i = 0; i < icons.length; i++) {
		var tab = tabGroup.tabs[i];
		if (i != 2) {
			var tabEntity = Ti.UI.createView({
				width : tabWidth,
				height : 50,
				index : i,
				touchEnabled : false,
				left : icons[i].left
			});

			var selected = Ti.UI.createView({
				width : '95%',
				height : '76%',
				backgroundImage : 'tab_selectedbg.png',
				index : i,
				visible : false,
				touchEnabled : false,
				bottom : 3
			});
			selected.add(Ti.UI.createImageView({
				top : icons[i].top,
				image : icons[i].image,
				height : icons[i].width,
				touchEnabled : false
			}));
			selected.add( label = Ti.UI.createLabel({
				text : icons[i].title,
				bottom : 1,
				color : 'white',
				touchEnabled : false,
				font : {
					fontSize : 9
				}
			}));

			var deselected = Ti.UI.createView({
				width : '95%',
				height : '76%',
				index : i,
				visible : true,
				touchEnabled : false,
				bottom : 3
			});
			deselected.add(Ti.UI.createImageView({
				top : icons[i].top,
				image : icons[i].image,
				height : icons[i].width,
				touchEnabled : false
			}));
			deselected.add( label = Ti.UI.createLabel({
				text : icons[i].title,
				bottom : 1,
				color : 'white',
				touchEnabled : false,
				font : {
					fontSize : 9
				}
			}));

			tabEntity.add(selected);
			tabEntity.add(deselected)
			background.add(tabEntity);
			tab.selected = selected;
			tab.deselected = deselected;
		} else {
			//tab placeholder for spacing
			var tabBlank = Ti.UI.createView({
				width : tabWidth,
				height : 50,
				index : i,
				touchEnabled : false
			});
			background.add(tabBlank);
			//main image button
			var tabContainer = Ti.UI.createView({
				width : tabWidth,
				top : 0,
				index : i,
				touchEnabled : false
			});

			var icon = Ti.UI.createImageView({
				image : icons[i].image,
				touchEnabled : false
			});
			tabContainer.add(icon);
			container.add(tabContainer);
		}
	}
	tabGroup.add(container);

	function overrideFocusTab(evt) {
		if (evt.previousIndex >= 0 && evt.source.tabs[evt.previousIndex].selected) {
			evt.source.tabs[evt.previousIndex].selected.visible = false;
		}
		if (evt.tab.selected)
			evt.tab.selected.visible = true;
	}


	tabGroup.addEventListener('focus', overrideFocusTab);
}