Problem
Not possible to make toolbars really transparent or with a specified alpha channel (translucent).
If barColor='transparent' (Test 1), toolbar is translucent (no control over opacity).
If barColor='#2fff' (Test 2), toolbar is completely opaque.
Test case 1
//Application Window Component Constructor
function ApplicationWindow() {
//load component dependencies
var FirstView = require('ui/common/FirstView');
//create component instance
var self = Ti.UI.createWindow({
backgroundColor : '#0cf'
});
//construct UI
var firstView = new FirstView();
self.add(firstView);
var button2 = Titanium.UI.createButton({
title:'test',
});
var toolbar = Titanium.UI.iOS.createToolbar({
items : [button2],
barColor:'transparent',
bottom : 0,
borderTop : true,
borderBottom : true
});
self.add(toolbar);
return self;
}
//make constructor function the public component interface
module.exports = ApplicationWindow;
Test case 2
//Application Window Component Constructor
function ApplicationWindow() {
//load component dependencies
var FirstView = require('ui/common/FirstView');
//create component instance
var self = Ti.UI.createWindow({
backgroundColor : '#0cf'
});
//construct UI
var firstView = new FirstView();
self.add(firstView);
var button2 = Titanium.UI.createButton({
title:'test',
});
var toolbar = Titanium.UI.iOS.createToolbar({
items : [button2],
barColor:'#2fff',
bottom : 0,
borderTop : true,
borderBottom : true
});
self.add(toolbar);
return self;
}
//make constructor function the public component interface
module.exports = ApplicationWindow;
I would expect to apply alpha channel to barColor property and make the toolbar completely background transparent. Instead, the SDK/API makes the toolbar completely opaque if barColor has an alpha channel, as can be seen on the second test case and screenshot I attached before (it becomes completely white, while it should be '#2fff"). In the first test case / screenshot, if barColor is set to 'transparent', it actually becomes translucent black, not completely transparent. For instance, native Weather iOS app has a completely transparent toolbar.