/**
 * Create a semi transparent TabbedBar
 *
 * The TabbedBar looks best if the backround color is set to one of the colors
 * of the background image of the view beneath it.
 *
 * props:
 * - backgroundColor  string   Background color of TabbedBar
 * - buttonNames      array    Names for the labels of the TabbedBar
 * - height           number   Height of entire view
 * - opacity          decimal  Opacity level of TabbedBar and it's background
 *
 * @param   object  Dictionary of properties
 * @return  object  Titanium View
 */
function createTransparentTabbedBar (props)
{
 if (typeof(props.opacity) == 'undefined')
 props.opacity = 0.4;

 // wraps all the views
 var wrapper = Ti.UI.createView({
 top: 0,
 left: 0,
 right: 0,
 height: (typeof(props.height) != 'undefined' ? props.height : 30)
 }),
 // text overlay container
 overlay = Ti.UI.createView({
 zIndex: 3,
 touchEnabled: false
 }),
 labels = [],
 // bar background layer
 bar_bg = Ti.UI.createView({
 backgroundColor: '#000',
 opacity: props.opacity/2,
 top: 0,
 left: 0,
 right: 0,
 zIndex: 1
 })
 tabbed_bar = Ti.UI.iOS.createTabbedBar({
 backgroundColor: (typeof(props.backgroundColor) != 'undefined' ? props.backgroundColor : '#000'),
 opacity: props.opacity,
 style: Ti.UI.iPhone.SystemButtonStyle.BAR,
 top: 2,
 bottom: 2,
 left: 2,
 right: 2,
 zIndex: 2
 }),
 // button width = screen resolution-2px outer border-right/left margin-1px (border) for every button
 width = Math.ceil((318-tabbed_bar.left-tabbed_bar.right-props.buttonNames.length)/props.buttonNames.length);

 // loop all buttons
 for (var i = 0, l = props.buttonNames.length; i < l; i++)
 {
 // create an empty label for the tab bar
 labels.push('');

 // create a label for the text overlay
 var label = Ti.UI.createLabel({
 text: props.buttonNames[i],
 width: width,
 left: (width*i)+(i*1),
 touchEnabled: false,
 textAlign: 'center',
 color: '#FFF',
 shadowColor: '#000',
 shadowOffset: {x: 0, y: -1},
 font: {
 fontSize: 12,
 fontWeight: 'bold'
 }
 });
 overlay.add(label);
 }

 // add an array of empty labels to create the tabs
 tabbed_bar.labels = labels;

 // wrap everything in one view
 wrapper.add(tabbed_bar, bar_bg, overlay);
 return wrapper;
};



// usage
Ti.UI.setBackgroundImage('images/background.jpg');
var win = Ti.UI.createWindow({title: 'Tabbed Bar Test'});
 
var bar = createTransparentTabbedBar({
 backgroundColor: '#88502B',
 buttonNames: ['One', 'Two', 'Three'],
 height: 40,
 opacity: 0.4
 });
win.add(bar);
 
win.open();

/**
 * Create a semi transparent TabbedBar
 *
 * The TabbedBar looks best if the backround color is set to one of the colors
 * of the background image of the view beneath it.
 *
 * props:
 * - backgroundColor  string   Background color of TabbedBar
 * - buttonNames      array    Names for the labels of the TabbedBar
 * - height           number   Height of entire view
 * - opacity          decimal  Opacity level of TabbedBar and it's background
 *
 * @param   object  Dictionary of properties
 * @return  object  Titanium View
 */
function createTransparentTabbedBar (props)
{
 if (typeof(props.opacity) == 'undefined')
 props.opacity = 0.4;

 // wraps all the views
 var wrapper = Ti.UI.createView({
 top: 0,
 left: 0,
 right: 0,
 height: (typeof(props.height) != 'undefined' ? props.height : 30)
 }),
 // text overlay container
 overlay = Ti.UI.createView({
 zIndex: 3,
 touchEnabled: false
 }),
 labels = [],
 // bar background layer
 bar_bg = Ti.UI.createView({
 backgroundColor: '#000',
 opacity: props.opacity/2,
 top: 0,
 left: 0,
 right: 0,
 zIndex: 1
 })
 tabbed_bar = Ti.UI.createTabbedBar({
 backgroundColor: (typeof(props.backgroundColor) != 'undefined' ? props.backgroundColor : '#000'),
 opacity: props.opacity,
 style: Ti.UI.iPhone.SystemButtonStyle.BAR,
 top: 2,
 bottom: 2,
 left: 2,
 right: 2,
 zIndex: 2
 }),
 // button width = screen resolution-2px outer border-right/left margin-1px (border) for every button
 width = Math.ceil((318-tabbed_bar.left-tabbed_bar.right-props.buttonNames.length)/props.buttonNames.length);

 // loop all buttons
 for (var i = 0, l = props.buttonNames.length; i < l; i++)
 {
 // create an empty label for the tab bar
 labels.push('');

 // create a label for the text overlay
 var label = Ti.UI.createLabel({
 text: props.buttonNames[i],
 width: width,
 left: (width*i)+(i*1),
 touchEnabled: false,
 textAlign: 'center',
 color: '#FFF',
 shadowColor: '#000',
 shadowOffset: {x: 0, y: -1},
 font: {
 fontSize: 12,
 fontWeight: 'bold'
 }
 });
 overlay.add(label);
 }

 // add an array of empty labels to create the tabs
 tabbed_bar.labels = labels;

 // wrap everything in one view
 wrapper.add(tabbed_bar, bar_bg, overlay);
 return wrapper;
};



// usage
Ti.UI.setBackgroundImage('images/background.jpg');
var win = Ti.UI.createWindow({title: 'Tabbed Bar Test'});
 
var bar = createTransparentTabbedBar({
 backgroundColor: '#88502B',
 buttonNames: ['One', 'Two', 'Three'],
 height: 40,
 opacity: 0.4
 });
win.add(bar);
 
win.open();

http://www.chlab.ch/blog/archives/mobile-development/create-transparent-tabbedbar-titanium-mobile

We create a View with a background color, put a semi-transparent TabbedBar with empty button names on top of it, then add another layer of fully visible labels spaced to fit the TabbedBar beneath it. Everything is then wrapped in one View, which you can add to another View or Window.

Create a transparent TabbedBar for Titanium Mobile

mobile

JavaScript