Nativescript: ActionBar drop shadow lost with background-color

[bradmartin]

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.

[BenElliottBV]

:+1:

[hamorphis]

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

1. ActionBar with no background color (for reference):
   
2. ActionBar with background color BEFORE I applied the fix (the drop-shadow is gone):
   
3. ActionBar with background color AFTER I applied the fix (the drop-shadow is now visible):
   
4. 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.

[hamorphis]

@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 [email protected]
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
https://github.com/NativeScript/NativeScript/issues/1799#issuecomment-258158545,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhPM6u66JXbssGXA1A6s6JCMk3h9-ks5q6fA4gaJpZM4H0A-q
.

[sitefinitysteve]

Nice work!

[bradmartin]

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

[hamorphis]

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

[hamorphis]

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.

[bradmartin]

Works for me. Think this will satisfy most cases and I'm thinking a lot of
people never even noticed considering how subtle the shadow is :)

On Thu, Nov 3, 2016, 9:48 AM Rossen Hristov [email protected]
wrote:

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
https://github.com/NativeScript/tns-core-modules-widgets/blob/master/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java
and the drop-shadow will not be seen again.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/NativeScript/issues/1799#issuecomment-258163709,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhKqHWdGG-XeozNuA0w-FqDS2eiBZks5q6fQogaJpZM4H0A-q
.

[hamorphis]

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

[triniwiz]

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

[hamorphis]

@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

[sitefinitysteve]

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

[hamorphis]

@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.

[eduardoturconi]

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

I can't remove the shadow

[spstratis]

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.

[swlemp]

@spstratis In the interim, use something like this (example in TS):

class Shadow {
    elevation: number = 0;

    get editor(page: Page) {
        let toolbar = page.actionBar._nativeView,
            compat = android.support.v4.view.ViewCompat;

        if (android.os.Build.VERSION.SDK >= 21) {
            return {
                add: () => {
                    if (!compat.getElevation(toolbar)) {
                        compat.setElevation(toolbar, this.elevation);
                    }
                },

                remove: () => {
                    if (this.elevation = compat.getElevation(toolbar)) {
                        compat.setElevation(toolbar, 0);
                    }
                }
            };
        }

        // elevation doesn't exist pre-lollipop/21
        return { add: () => {}, remove: () => {} };
    }
}

Shadow.editor.add(page); // adds shadow if not set
Shadow.editor.remove(page); // removes shadow if set

[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.