0

I've created 2 buttons:

<Button title="TEST"></Button>
<Button title="TEST" backgroundColor="red"></Button>

The first is a really simple default button. And the second I just added a red background color. The result is this:

enter image description here

As you can see from the picture, just adding a different background color changes the button a lot from it's "native" appearance. What I would expect is that the button will remain the same, just with a red background.

  1. The "styled" button is bigger (and as you can see I did not set up any dimensions).
  2. The "styled" button corners are no longer round.
  3. Most bothering - the "styled" button no longer has the android button ripple effect upon clicking.

Why is that? Can it be fixed?

developer82
  • 13,237
  • 21
  • 88
  • 153

1 Answers1

1

The native button (AppCompatButton) is a bit more complex and is not using the backgroundColor to show the actual color. I think it is using a 9-patch in the background so if you set a backgroundColor it will remove that and you end up with the box and the color.

Try using the tintColor to change the background color or you can fake it using:

  • borderRadius
  • elevation
  • touchFeedback
  • touchFeedbackColor
miga
  • 3,997
  • 13
  • 45
  • Currently there is a bug with buttons that have borderRadius + touchFeeback: https://jira.appcelerator.org/browse/AC-5140 but you could create a nested view where the outer view has a borderRadius and no color and the inner view a backgroundColor + feedback to emulate the behaviour – miga Aug 12 '17 at 19:02