ActionBar drop shadow lost with background-color

Please, provide the details below:

When applying the backgroundColor to the Android <ActionBar> you lose the drop-shadow which I believe comes from the elevation property on Android.

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes

Which platform(s) does your issue occur on?

Android

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

1.7 - think it's bee an issue prior also. Just never brought it up.

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

Create a new NS app for android, run it. You'll notice the drop shadow from the elevation is visible, I think it defaults to 4dp. If you then set a backgrounColor on the ActionBar you will lose the drop shadow/elevation.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Just backgroundColor on actionbar.

👍

@bradmartin

@bradmartin I managed to invent a fix. Here are several different images which you can compare.

ActionBar with no background color (for reference):
ActionBar with background color BEFORE I applied the fix (the drop-shadow is gone):
ActionBar with background color AFTER I applied the fix (the drop-shadow is now visible):
An image containing the difference between 2 and 3:

Now, the only thing I am concerned about is that the tint of the drop-shadow is still gray and not blue-ish, but I am not sure what color it has to be. I suppose it does not need to be tinted in blue.

@bradmartin

@bradmartin Do you like how image 3 looks? Is this the correct way it should look? If so, I will go ahead and apply the fix.

@bradmartin

Image 3 looks how it should :) very nice.

On Thu, Nov 3, 2016, 9:31 AM Rossen Hristov notifications@github.com
wrote:

@bradmartin https://github.com/bradmartin Do you like how image 3
looks? Is this the correct way it should look? If so, I will go ahead and
apply the fix.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1799 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhPM6u66JXbssGXA1A6s6JCMk3h9-ks5q6fA4gaJpZM4H0A-q
.

Nice work!

example from slack app. Shadow doesn't need to be tintedx

Nice. I will push the changes in a bit. I am sure I will "break" a lot of UI Tests :) :)

Have in mind that this fix will work if the ActionBar has only background-color set. If you throw in background-image, -size, -repeat, -position, or -clip-path, the entire background of the Toolbar will be rendered with our BorderDrawable and the drop-shadow might disappear again. Until we find a way to fix this as well.

Fix: Enhancement: Android Actionbar elevation lost with background-color

With the change I have made, on API Levels < 21, the ActionBar will no longer color its background since setColorFilter does not work for some reason on those lower API Levels. So for API Levels < 21 I will return the old code that creates a brand new drawable and sets it as a background of the ActionBar.

https://code.google.com/p/android/issues/detail?id=60183

I'm having a similar problem but when i try to set the background as transparent the shadow is not removed i'm using the masters atm

@triniwiz

@triniwiz The bug was that the shadow IS removed and after fixing the bug the shadow is no longer removed. In order to force the action bar to replace its background drawable with a new one and remove the shadow, you will need to set something else besides background-color, for example set border width to 1 and border color to transparent. This will cause the code to go a different route and create a brand new drawable for the action bar. This in fact is the bug that the others complained about. If you are interested, here is the source code: https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/styling/background.android.ts#L61

Idea... What about a superficial property on the AB that forces this? showBorder=false or something? Would help avoid this question over and over again (which I could see happening)... although I suppose border:none is the same, or box-shadow (if it existed) perhaps I'd try too

@sitefinitysteve

@sitefinitysteve The ideal fix would be to draw the shadow by hand when we are drawing our BorderDrawable here. I am not sure how to do this though. The quick and dirty fix I did was to use the setColorFilter method of the ActionBar background drawable if and only if it has background-color set and nothing else from the background. Ugly, I know, but made some people happy.

@triniwiz

With the latest version of tns-core-modules I'm having the same problem of @triniwiz

I can't remove the shadow

@eduardoturconi

I'm having the same concern as @eduardoturconi. After updating to NS 2.5, I can no longer remove the shadow. Is there a work around or a hack that anyone is aware of that would allow me to do so. I've tried the following, in which I set the border-color to match the bg color in hopes this would cause a new draw but that hasn't worked. I've also tried several other border properties through CSS and none have been successful @hamorphis

action-bar {
    background-color: #EEEEEF;    
    color: #ED5B2A;       
    border-width: 1;
    border-color: #EEEEEF;
}

I have even tried updating these values from the JS code and that also did not work.

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.

Navigation Menu

Repository navigation

ActionBar drop shadow lost with background-color #1799

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Which platform(s) does your issue occur on?

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

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

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ActionBar drop shadow lost with background-color #1799

Description

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Which platform(s) does your issue occur on?

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

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

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Activity

BenElliottBV commented on Mar 21, 2016

hamorphis commented on Nov 3, 2016

hamorphis commented on Nov 3, 2016

bradmartin commented on Nov 3, 2016

sitefinitysteve commented on Nov 3, 2016

bradmartin commented on Nov 3, 2016

hamorphis commented on Nov 3, 2016

hamorphis commented on Nov 3, 2016

1 remaining item

hamorphis commented on Nov 7, 2016

triniwiz commented on Nov 7, 2016

hamorphis commented on Nov 8, 2016

sitefinitysteve commented on Nov 8, 2016

hamorphis commented on Nov 8, 2016

eduardoturconi commented on Feb 2, 2017

spstratis commented on Feb 10, 2017

lock commented on Aug 28, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions