backgroundSelectedColor for Button is not working

Question

backgroundSelectedColor for Button is not working

You must Login before you can answer or comment on any questions.

Hi, I created a button with custom colors and I want the fonts and background color to change when the button is clicked. I am using selectedColor and backgroundSelectedColor(its not working). This is the code:

var likeButton = Titanium.UI.createButton({
                               font:{fontSize:14,fontWeight: 'bold'},
                                title:'Like it!',
                                backgroundColor:'00aeef',
                                buttonStyle:Titanium.UI.iPhone.SystemButtonStyle.PLAIN,
                                width:120,
                                height:35,
                                borderColor:'white',
                                borderRadius:6,
                                top:328,
                                left:15,
                                backgroundImage:'none',
                                backgroundSelectedColor :'ffffff',
                                selectedColor:'00aeef',
                                //backgroundSelectedImage:'none'
                          });

PS. I set the backgroundImage to none because of a bug of Titanium.

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Background selected color its only a property of android and mobile web if you want to change the color on iOS you need to do something like this

var button = Ti.UI.createButton({
            title:"I can blink",
            backgroundColor : 'blue',
            backgroundImage : 'none',
            color: 'white',
            selectedColor: 'green'
        });
        self.add(button)
        button.addEventListener('touchstart', function(){
            this.setBackgroundColor('red');
        });
        button.addEventListener('touchend', function(){
            this.setBackgroundColor('blue');
        });

and the backgroundImage = none its not bug you just need to overwrite the property

Answer 2

Hi Michael

As Arian has said the backgroundSelectedColor property is only available for Android and HTML5 projects. This also includes anything including ..selected.. in it.

But there is a work around, you can use the touchstart and touchend events to manage the state for you.

Quick example - plus I tidied your code.

var likeButton = Titanium.UI.createButton({
    backgroundColor: '#00aeef',
    borderColor: 'white',
    borderRadius: 6,
    color: '#fff',
    font:{
        fontSize: 14,
        fontWeight: 'bold'
    },
    height: 35,
    left: 15,
    style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,  // there is no property called buttonStyle
    title: 'Like it!',
    top: 328,
    width: 120
});
likeButton.addEventListener('touchstart', function (e) {
    e.source.setBackgroundColor('#c60000'); // just for effect
});
likeButton.addEventListener('touchend', function (e) {
    e.source.setBackgroundColor('#00aeef');
});

Whatever issue the need to hack the backgroundImage:'none', does not appear to be needed anymore - I have certainly not needed it. I am assuming you are using the SDK verions 2.0 or higher and hopefully 2.1.1.

Hope this helps.