18 Answers

• I found this thread b/c i was having the same problem. Don't know if everyone has found their own answer by now but setting the background image to 'none' fixes the white background problem.

  This is my button code that works for me…hope it helps!

  var saveNewUser = Titanium.UI.createButton({
      borderRadius: 2,
      height: 25,
      right: 10,
      title: 'Add user',
      top: 175,
      width: 100,
      backgroundColor: '#000000',
      borderColor: '#1c1d1c',
      color: '#ffffff',
      borderWidth: '2',
      backgroundImage: 'none'
  });
  

• The following worked for me. i think the none has to be in capital letters (NONE)

  var comboRadio = Ti.UI.createButton ({
              color: '#9CC1E6',
              title:'Combination',
              borderRadius: 15,
              borderWidth: 1,
              borderColor: '#9CC1E6',
              backgroundColor: 'white',
              backgroundImage: 'NONE',
              width: 280,
              font: {
                  fontSize: 15,
                  fontWeight: 'bold'
              },
              height: 30,
              top:140,
              value:false
  });
  

• Workaround: You can use the ButtonBar. The important thing to remember, is to specify the style!

  Example:

    var newButton = Titanium.UI.createButtonBar({
      labels:[{title:'Some title', width:100}],
      style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
      backgroundColor:'#f4a010',
      top:5,
      left:5,
      height:40,
      width:'auto'
    });
  

• All buttons are white for me as well

  var searchBtn = Titanium.UI.createButton({
      backgroundColor: '#666',
      title:'Search',
      color: '#ccc',
      top:100,
      left:30,
      height:53,
      width:250
  });
  

• The following worked for me. i think the none has to be in capital letters (NONE)

  var comboRadio = Ti.UI.createButton ({
              color: '#9CC1E6',
              title:'Combination',
              borderRadius: 15,
              borderWidth: 1,
              borderColor: '#9CC1E6',
              backgroundColor: 'white',
              backgroundImage: 'NONE',
              width: 280,
              font: {
                  fontSize: 15,
                  fontWeight: 'bold'
              },
              height: 30,
              top:140,
              value:false
  });
  

• I can't believe this problem still exists. How disappointing to have a fully functional app in Android, only to fire it up on iPhone for the first time, and it looks like complete crap. Finally found this issue, and the backgroundImage: 'NONE' fix mercifully makes it respect your backgroundColor settings.

  However, in my case, although the bg changed, the text wasn't visible anywhere, even when set to white on a black bg. The fix turns out to be specifying an explicit height, then the text shows up. Hopefully this will help someone else down the road who might have the same issue.

• Bug filed:

  https://appcelerator.lighthouseapp.com/projects/32238-titanium-mobile/tickets/1727-button-backgroundcolor-does-not-work

  If you are having this issue as well, please follow this ticket so that it gets fixed.

• This works

  Ti.UI.createButton({
      backgroundColor: '#FF0000',
      backgroundImage: 'none',
  });
  

• Hi,

  Have you checked to see if Ti.App.Properties.getString('default_text_color') actually returns something?

  The whole Properties thing is a mystery to me. I'd like to see some documentation on it.

• I agree that the backgroundColor doesn't seem to be working on buttons.

• I'm finding backgroundColor working with no issues - I've got a button set to #fff so that it has no apparent background, and it works, and 6-digit colours are also fine. Images, now, they're a problem. :-)

• John-

  Try changing the background to another color besides #fff. This is the default color that we are all seeing with this issue.

• If you set the property 'borderRadius:0' on the button, you will notice that the background colour is being applied to a rectangle behind the button.

• I second that, not working as expected.

• Is there any news on this? I am almost ready with my app and hope to release next week, if only this would be solved :|

• Ya, I can't get the background image to work too :-(

• I'm finding that backgroundColor is broken in 1.4.0 as well (even using some of the examples here).

  As a workaround, you could make a ButtonBar with just one entry to it:

  var myButton = Ti.UI.createButtonBar({
      labels:['ButtonText'],
      backgroundColor: 'green'
  });
  

  Then just hook into the click event like normal (buttonbars ship an index property over that tells you which entry in the bar was clicked, but since we just have one it doesn't matter).

• The following worked for me. i think the none has to be in capital letters (NONE)

  var comboRadio = Ti.UI.createButton ({
              color: '#9CC1E6',
              title:'Combination',
              borderRadius: 15,
              borderWidth: 1,
              borderColor: '#9CC1E6',
              backgroundColor: 'white',
              backgroundImage: 'NONE',
              width: 280,
              font: {
                  fontSize: 15,
                  fontWeight: 'bold'
              },
              height: 30,
              top:140,
              value:false
  });