Titanium Community Questions & Answer Archive

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

Toolbar icons in landscape view is disorted

I'm having my own icons in the toolbar, but if I'm using landscape view my icons gets disorted, really weird.

This is my code:

bookmarkButton = Titanium.UI.createButton({

shareFacebook = Titanium.UI.createButton({

shareTwitter = Titanium.UI.createButton({

shareEmail = Titanium.UI.createButton({


Works great in portrait mode, but in landscape the icons looks weird.

— asked November 29th 2010 by Ted Sundin

3 Answers

  • Ted

    Your icons are being stretched when the width of the screen gets larger, which is normal.

    In your case, I think all you need to do is define a width for each of your buttons.

    If you want your buttons to properly adapt to the change in orientation, investigate orientationchange event of Titanium.Gesture, and change the image property of the buttons.

    — answered November 29th 2010 by Paul Dowsett
  • Yes I have the orientationchange function which works great. But if I'm already in landscape view and goes to that window they are getting disorted.

    I have this function if the user change orientation when they are at the window.

     container.contentWidth = 'auto';
     container.contentHeight = 'auto';
     shareFacebook.image = 'images/TOOLBAR-Facebook.png';
     shareTwitter.image = 'images/TOOLBAR-Twitter.png';
     shareEmail.image = 'images/TOOLBAR-Epost.png';
     if(newsisbookmarked == 0) {
         bookmarkButton.image = 'images/TOOLBAR-Favorit-1.png';
     } else {
         bookmarkButton.image = 'images/TOOLBAR-Favorit-2.png';

    But if I set a fixed width/height on my icons, I must make them smaller in portrait mode then? Because the landscape toolbar is smaller in height?

    — answered November 29th 2010 by Ted Sundin
    1 Comment
    • It depends on how you are creating your toolbar, Ted. If it's a custom view, you could set a defined height for that also.

      — commented November 29th 2010 by Paul Dowsett
  • 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
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.