The TabbedBar is often used to choose between one of several content views on one screen. The problem is, the design possibilities are very limited. There’s no real way to redesign it except set a background color, which doesn’t look too great. So I figured making it semi-transparent would make it blend in nicely with the rest of the design. The problem is, you can’t just set the background color to transparent. There is a way to make it work though.

Pretty sweet eh? The solution I used is to make the TabbedBar transparent to the level to which you want it, then create a layer of fully visible Labels over the TabbedBar to create the illusion of a semi-transparent background. I wrote a function for this, feel free to use it if you like:

/**
 * 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;
}

So 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.

Here is an example how to use it:

// point the path to the image you want to use
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();

Have fun with your transparent TabbedBar!

iPhone Screenshot background from iphone4wallpaper.com.