Toolbars and other views in Titanium for Android

While doing some investigation for my own Titanium project, I came across someone who was having trouble putting a custom toolbar (because Ti.UI.Toolbar isn’t supported in Android) when using a full screen image view as a backdrop for their app.

This was the code that they posted (you can put this simply in your app.js):

Titanium.UI.setBackgroundColor('#000');

var win1 = Titanium.UI.createWindow({
    title:'Tool Bar From Scratch',
    backgroundColor:'#fff'
});

var toolBarView = Titanium.UI.createView({
    bottom:0,
    height:'40',
    width:'320',
    backgroundColor:'#777'
})

var aButton = Ti.UI.createButton({
    title:'My Sounds',
    height:'30',
    width:'100',
    top:'5',
    left:'20'
});

var bButton = Ti.UI.createButton({
    title:'Soundscape Sounds',
    height:'30',
    width:'170',
    top:'5',
    right:'20',
});

aButton.addEventListener("click", function(e){
    alert(e.source + "Was Clicked");
});

bButton.addEventListener("click", function(e){
    alert(e.source + "Was Clicked");
});

toolBarView.add(aButton);
toolBarView.add(bButton);

var imageView = Titanium.UI.createImageView({
    image:"/Images/SoundscapeImage320x460.png"
});
imageView.add(toolBarView);

win1.add(imageView);
win1.open;

As it was very close to something I was trying to achieve (I’m still new-ish to Titanium), I had a crack at solving it.  At first look, it seems that when deployed to Android, nothing will appear on top of an ImageView. Not even a Label.  So, my natural response was to reduce the ImageView size by the size of the toolbar and add the toolbar to the window instead, which was a success:

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff'
});

// Does not appear on top of the ImageView!
var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

var imageView = Ti.UI.createImageView({
    image: '/images/TestImage320x460.png',
    height: 460,
    width: 320
});

var toolBarView = Titanium.UI.createView({
    bottom:0,
    height:40,
    width:320,
    backgroundColor:'#777'
});

var aButton = Ti.UI.createButton({
    title:'My Sounds',
    height:30,
    width:100,
    top:5,
    left:20
});

// Add the button to the toolbar view
toolBarView.add(aButton);

// Adding the label to the image view - note that it doesn't appear
imageView.add(label1);

// Add the image view and toolbar view to the window
win1.add(imageView);
win1.add(toolBarView);

// open the window
win1.open();

Note: this is with Titanium SDK 1.7.3.

Advertisement