Titanium JIRA Archive
Appcelerator Community (AC)

[AC-560] Setting backgroundColor on a Ti.UI.Button causes it to lose default styling of border radius & active state

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionNot Our Bug
Resolution Date2016-01-11T09:34:53.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsn/a
ReporterTerry Morgan
AssigneeShak Hossain
Created2016-01-08T14:50:46.000+0000
Updated2016-01-11T09:34:53.000+0000

Description

By default, Android buttons are have grey background, white text, round corners, a drop shadow and circular animation effect when tapped. I would expect when setting the backgroundColor, the button would retains borderRadius and active state animation. Instead, setting a backgroundColor causes the button to lose the rounded corners & active animation effect. Test case:
var win1 = Ti.UI.createWindow({
    title:'Button test',
    backgroundColor:'#fff'
});
var button = Ti.UI.createButton({
    //backgroundColor: "red", // uncomment to lose borderRadius + active effect
    title: "Click me"
});

win1.add(button);
win1.open();

Comments

  1. Sharif AbuDarda 2016-01-10

    Hello, This is not a bug, This is a default behavior. By setting the background color of a button, you replace the background with all the nice Material effects with a solid color. Now to get rounded borders, you need to use borderRadius. This is Android defaults behavior. Here is a [link](http://stackoverflow.com/questions/26686250/material-effect-on-button-with-background-color) to the issue in native Android. Hope this helps. Thanks.

JSON Source