ToolBar for Android

You must Login before you can answer or comment on any questions.

I'm an iOS developer new to Titanium. I have an iPhone app that I would like to port to Android as a test case for using Titanium. The opening view of the app is an image with a ToolBar at the bottom. I would like to make the code as cross platform as possible. The attached code produces the correct view in the iPhone emulator but not the Android emulator or device. What am I doing wrong? Thanks for your help.

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;

2 Answers

Accepted Answer

Hi,

Sorry that I only just found your question two months later; you've probably already found the answer?

I resolved your problem by adding the toolbarView to the window and not the image view.

For some reason, in Android, nothing will appear on top of an imageView.

— answered 3 years ago by Chris Dunstall
answer permalink
1 Comment
  • Chris,

    Thanks for the info. Actually I didn't resolve the issue as I've been on another project but hope to get back to this shortly. It will be great to get this working.

    Bill

    — commented 3 years ago by William Kautter

The problem is that android does not have a native UI component for a toolbar, and hence Titanium cannot map your code to a native widget like it can with iOS. If you look closely at the top right of each API page such as the one for the Toolbar, there is only an apple icon and not an android icon.

This is the (all too subtle) indication it is only supported on iOS.

Under Android you have to roll your own view with the look you want.

— answered 3 years ago by Doug Handy
answer permalink
5 Comments
  • Doug, notice that he actually doesn't create UI component "toolbar" (he only call regular view that way). So, actual error is somewhere else. :)

    — commented 3 years ago by Ivan ┼ákugor

  • Doug,

    Thanks for the response. I thought I did "roll my own". I created a generic view and put two generic buttons in it.

    Bill

    — commented 3 years ago by William Kautter

  • I realize that win1.open should be win1.open();, that was a paste error, and also pixel values should be i.e. '200dp' rather than just plain 200. With these changes the results are the same. Any assistance would be greatly appreciated.

    — commented 3 years ago by William Kautter

  • Show 2 more comments

Your Answer

Think you can help? Login to answer this question!