Nativescript: Button background has a transparency effect

[rwngallego]

When I try to set the background color of a button it's having a transparency effect and the color is not the real one, it's faded. However when I press and hold the button the color is displayed as it should. It's creating misleading button colors in all over the project. How can I remove that transparency?

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.1
• Cross-platform modules:
  "@angular/common": "2.1.2",
  "@angular/compiler": "2.1.2",
  "@angular/core": "2.1.2",
  "@angular/forms": "2.1.2",
  "@angular/http": "2.1.2",
  "@angular/platform-browser": "2.1.2",
  "@angular/platform-browser-dynamic": "2.1.2",
  "@angular/router": "3.1.2",
  "nativescript-angular": "1.1.2",
  "nativescript-telerik-ui": "^1.5.1",
  "nativescript-theme-core": "^0.1.3",
  "reflect-metadata": "~0.1.8",
  "rxjs": "5.0.0-beta.12",
  "tns-core-modules": "^2.4.1"
• Runtime(s): 2.4.1
• Plugin(s): none

Please tell us how to recreate the issue in as much detail as possible.

````
In the HTML:

In the CSS:
Button{
background-color: red;
}
````
Normal button:

Pressed and held:

[tsonevn]

Hi @rwngallego,
Thank you for your interest in NativeScript.
I tested your scenario and on my side everything seems to work as expected and the Button background-color has been applied as expected. This behavior could be related with some another style set in your project CSS file. it would help if you could give us some more info about the problem or if you could send us sample project, which could be debugged locally.

Thank you for your cooperation in advance.
Regards,
@tsonevn

[dhanalakshmitawwa]

Hi @rwngallego ,

In css place border-radius - 1;
.Button{
background-color: red;
border-radius: 1;
margin: 10
}

[rwngallego]

@dhanalakshmitawwa Yes, using border-radius: 1 did the trick. However if this is going to be the desired behavior we should need to add this to the docs in the Button section.

[danielgek]

@tsonevn @dhanalakshmitawwa i don't like that much of the border-radius: 1; because on more recent versions of android this makes the button lose the ripple effect

[tsonevn]

Hi @danielgek,
For the ripple effect you could use nativescript-ripple plugin and for further help you could review the demo app here.

Hope this helps.

[danielgek]

@tsonevn i do know that plugin, but it would be nice if {N} handle it out of the box xD i'm not complaining, it's just an opinion ;)

[leonardocaldas]

Any news on this bug?

[tsonevn]

the issue with the background-color is not reproducible with modules 4.1

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.