Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Strange behaviour when using custom images for buttons in lanscape mode

I have a toolbar using the following code

var bottomBarPlay = Titanium.UI.createToolbar({
    barColor: '#000',
    opacity: 0.6,

Without setting a width - the toolbar will automatically extend when in landscape mode but the height of the bar reduces and any non Titanium.UI.iPhone.SystemButtons (ie any images that are used instead) will get distorted as demonstrated in the screenshot.

portrait mode

alt text

landscape mode

alt text

Setting a toolbar width using

bottomBarPlay.width = 320;

Will fix the issue but in landscape mode the bar will only only ever be 320px of the available 480px

alt text

I'm using the images and following the scroll_views_scrollable.js. However, in that example it's setting the window toolbar which I'm assumming is handling the width and height. I'm using


not like the example which sets the window toolbar using


Whats the best way to fix this issue?

— asked April 2nd 2010 by Phi Chong
  • createtoolbar
  • landscape
  • portrait
  • toolbar

2 Answers

  • The solution i've found:
    Make the button image a backgroundImage, and then set width/height of the button. This stops the weird distortion.

    — answered March 26th 2012 by mitchell amihod
    1 Comment
    • bonus points: use the backgroundDisabledImage and you can continue to use button.enabled property to turn icon grey when disabled.

      — commented March 27th 2012 by mitchell amihod
  • Solution to this problem here.

    — answered March 29th 2011 by Sky Apperley
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.