var buttonObjects = [
    { image:'../../images/bar_button_1.png', width:100 },
    { image:'../../images/bar_button_2.png', width:100 },
];
var myTabbedBar = Titanium.UI.createTabbedBar({
    labels:buttonObjects,
    style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
    height:30,
    bottom: 5, 
    width:200,
    index: 0
});

4 Answers

• Since setting images for the buttonObjects leaves a 1px gap inbetween them, compresses the buttons accordingly (and therefore messes up the graphics) and shows the actual background of the tabbedBar, I've played around with things like this:

  var buttonObjects = [
      { image:'../../images/bar_button_1.png', width:100 },
      { image:'../../images/bar_button_2.png', width:100 },
  ];
  var myTabbedBar = Titanium.UI.createTabbedBar({
      labels:buttonObjects,
      backgroundColor:'#000',
      height:30,
      bottom: 5, 
      width:201,
      index: 0
  });
  

  This setting increases the width of the gap to 5px and pushes the left button together to only 95px. WTF? – Don't mean to be ungrateful, but this state of guessing and experimenting is starting to get really exhausting.

  Also: Anyone who has manage to style a tabbedBar in some way care to share some wisdom?

  Cheers.

• Here's a (ridiculous) workaround I found, could probably be still streamlined a tad to make it more dynamic and definitely doesn't solve the issues described in my last "answer". Here's what I'm using now:

  var buttonObjects = [
      { image:'../../images/bar_button_1.png', width:100 },
      { image:'../../images/bar_button_2.png', width:100 },
  ];
  var myTabbedBar = Titanium.UI.createTabbedBar({
      labels:buttonObjects,
      style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
      height:30,
      bottom: 5, 
      width:200,
      index: 0
  });
  Ti.UI.currentWindow.add(myTabbedBar);
  myTabbedBar.addEventListener('click', function(e){
      switch(e.index) {
          case 0:
              buttonObjects[0].image = '../../images/bar_button_1_selected.png';
              buttonObjects[1].image = '../../images/bar_button_2.png';
              myTabbedBar.labels = buttonObjects;
              // ...
          break;
          case 1:
              buttonObjects[0].image = '../../images/bar_button_1.png';
              buttonObjects[1].image = '../../images/bar_button_1_selected.png';
              myTabbedBar.labels = buttonObjects;
              // ...
          break;
      }
  });
  

• boy this is driving me insane. have you ever figured out how to get rid of that gap!?

• I was racking my brain for days trying to make the tabbedBar look the way I want. Finally, I got fed up and created a module that allows you to completely customize a tabbedBar. If you want to use your own background image in a tabbedBar, you can use the module I created called Fancy Tabbed Bar. You can check it out here.