var buttonFavorite = Titanium.UI.createButton({
  backgroundImage:'images/favorite.png',
  height:22,
  width:23
});

win.toolbar = [buttonFavorite];

buttonFavorite.addEventListener('click', function() {
  win.toolbar[0].backgroundImage='images/unfavorite.png';
  // or
  // buttonFavorite.backgroundImage='images/unfavorite.png'
});

2 Answers

• Thanks John, that was exactly what I was looking for; here is somewhat more complete example:

  
  var play = Titanium.UI.createButton({
      systemButton: Titanium.UI.iPhone.SystemButton.PLAY,
  });
  
  var pause = Titanium.UI.createButton({
      systemButton: Titanium.UI.iPhone.SystemButton.PAUSE,
  });
  
  MainTests.toolbar1 = Titanium.UI.createToolbar({
      items: [play],
      top: 0,
      borderTop: true,
      borderBottom: false,
      translucent: true,
      barColor: '#999'
  });
  
  MainTests.detailWindow.add(MainTests.toolbar1);
  
  play.addEventListener('click',
  function(e)
  {
      MainTests.toolbar1.items = [pause];
  });
  
  pause.addEventListener('click',
  function(e)
  {
      MainTests.toolbar1.items = [play];
  });
  

• I tried a couple ways to do this and I didn't find an elegant solution but this works. It seems the only way to force the image to change seems to be creating a new button and putting it back into the toolbar. BTW - I use the image properly, not backgroundImage when I put images into buttons.

  var buttonFavorite = Titanium.UI.createButton({
    image:'images/favorite.png',
    height:22,
    width:23
  });
  
  win.toolbar = [buttonFavorite];
  
  buttonFavorite.addEventListener('click', function() {
    var buttonFavorite = Titanium.UI.createButton({
      image:'images/unfavorite.png',
      height:22,
      width:23
    });
  
    win.toolbar = [buttonFavorite];
  });