bookmarkButton = Titanium.UI.createButton({
                    image:setBookmarkIcon
                });

shareFacebook = Titanium.UI.createButton({
                      image:'images/TOOLBAR-Facebook.png'
                });

shareTwitter = Titanium.UI.createButton({
                      image:'images/TOOLBAR-Twitter.png'
                });

shareEmail = Titanium.UI.createButton({
                      image:'images/TOOLBAR-Epost.png'
                });    

win.setToolbar([bookmarkButton,flexSpace,shareTwitter,shareFacebook,shareEmail]);

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.

• 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.

  Ti.Gesture.addEventListener('orientationchange',function(e){
   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?

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