Nativescript: Implement CSS Box Shadow

[lscown]

Would be great to see a CSS3 style box shadow for UI elements.

Possible implementation:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[mischah]

Would love to have this too.
Is this on the roadmap? Since #191 is closed.

[jlooper]

I'd like to see this too, to make nice looking card interfaces. Pretty!

[lyonzy]

If anyone's interested, I've discovered this sort-of-hack:
view.android.setBackgroundResource(android.R.drawable.dialog_holo_light_frame)
which gives an alright drop shadow on Android.

However add my +1 to this as well, it would be great to have a customisable, cross platform solution!

[aliatsis]

+1

[tiagordc]

+1

[andreyluiz]

+1

[shantamg]

+1

[gabrielbiga]

+1

[arnolduis]

+1

[ljx0517]

+1

[treio]

+1

[burkeholland]

+1

[Premitium]

+1

[k3yb0ardn1nja]

+1

[JoshDSommer]

+1

[kamilmac]

+1

[vjoao]

+1

[hekigan]

+1

[JoshDrentlaw]

+1

[harvey-woo]

+1

[yezarela]

+1

[abinici]

I've found out how to achieve the box shadow effect on iOS, for example on a TextField:

    import {Color} from "color";
    import * as view from "ui/core/view";
    ...
    let myTextField = view.getViewById(this.page, 'myTextField');
    myTextField.ios.layer.masksToBounds = false;
    myTextField.ios.layer.shadowOpacity = 1.0;
    myTextField.ios.layer.shadowRadius = 0.0;
    myTextField.ios.layer.shadowColor = new Color('#000000').ios.CGColor;
    myTextField.ios.layer.shadowOffset = CGSizeMake(2.0, 2.0);

In order to reference this field from code you need to give the element an ID:

    <TextField id="myTextField"></TextField>

If you use TypeScript then you'll also need to declare some iOS-specific functions:

    declare var CGSizeMake: any;

[gabrielbiga]

@abinici is there some Android implementation?

[abinici]

@gabrielbiga, look higher up in this thread, @lyonzy suggests a solution for Android.

[elinswilberg]

+1

[maddy2get]

+1

[IvRRimum]

+1

[Hirbod]

+1

[chief10]

+1

[SjurWarEagle]

+1

[spstratis]

@lyonzy is it possible to adjust the color using your work around?

[lyonzy]

You can, but it's not super easy. You can either find another inbuilt drawable (instead of dialog_holo_light_frame) that does what you want, or make your own 9-patch pngs. If you create your own, you can start with one of the inbuilt ones (these are open source so they're usually available online) and tweak the colours, then add it to your apk and use it. Unfortunately though it doesn't play well with NativeScript Livesync, since they need to be built into the apk, so make sure you rebuild and redeploy.

[edelvalle]

+1

[valentinstoychev]

Thank you, everyone, for all the +1 and the comments! This issue is not implemented currently for two main reasons:

• shadows are not part of the native design guidelines
• it will be very very slow (that is why it is excluded from the design guidelines from Apple, Google, and Microsoft)

Given those two above, what would be the scenario to help us raise the priority on this issue? Why you struggle because of this missing functionality?

[edelvalle]

Because the TextField sets a underline shadow color that is different from the App theme; and looks bad.... So if I could tell, android, for example... hey I want this color in the theme color will be great.

[valentinstoychev]

hey @edelvalle - what you described smells more like a bug. Can you please provide a screenshot?

[lyonzy]

Aren't shadows a big part of Material Design?

[lyonzy]

https://material.google.com/material-design/elevation-shadows.html

[valentinstoychev]

@lyonzy - this is a good point! We are getting these shadows out of the box from the underlying native elements that implement the material design (in Android).

Do you want to be able to modify these shadows?

What about iOS - is there a real scenario there?

[lyonzy]

Ah ok - I should admit I haven't used {N} in a few months so I haven't tried lollipop elements. For iOS it's probably alright but I'm not that far into my project yet :)
As for modification, perhaps if we can use the android inbuilt ones it's not necessary. I'm not actively using NativeScript at the moment so I'll have to defer to some one the +1s above :P

[edelvalle]

@valentinstoychev ohh sorry, this is not what I'm talking about.... I'm talking about this.

Do you see the blue underline in the TextField? How do I change that color?

[tsonevn]

Hi @edelvalle,
You could change the blue color by setting the appropriate colors in your colors.xml files in app/App_Resources/Android/values and in app/App_Resources/Android/values-v21. You should change color value of ns_accent. I am attaching example:

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
  <StackLayout>
    <TextField id="textFieldid" hint="Sample text" text="" />
  </StackLayout>
</Page>

app/App_Resources/Android/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ns_primary">#F5F5F5</color>
    <color name="ns_primaryDark">#757575</color>
    <color name="ns_accent">#0d0d0d</color>
    <color name="ns_blue">#272734</color>
</resources>

app/App_Resources/Android/values-v21/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ns_accent">#0d0d0d</color>
</resources>

related with issue: #1698

I hope this is applicable for you.

[djlugade]

+1

[joshcomley]

+1

[timricker]

+1

[CodeXtinction]

+1

[maddy2get]

+1

[tempura-shrimp]

+1 useful in many scenarios

[vtvz]

+1

[viniciodeltoro]

+1

[haschu]

+1

[tybeck]

+1

[tskweres]

+1

[lukeramsden]

Any chance of this being done?

[Habeeb-mohamed]

+1

[danieloprado]

+1

[BenGermany]

Shadows are not more expensive than opacity.

But the problem (on Android) is that every view is an rectangle with no zone outside of this. So on Android we need an extra layer like elevation since API 21. This is expansive. The next problem is the rectangle - no chance for borderRadius and fully rounded images.

It's like the problems with svg - it could be so easy, but it is not.

But a core-implementation would be :1st_place_medal: for me, same like a error-free crossover svg support.

[talatccan]

+1

[lukeramsden]

Please stop commenting +1, we have GitHub reactions for that.

[0mkara]

+1

[silent-coder]

+1

[shypaLen]

Please stop commenting +1, we have GitHub reactions for that.

[silent-coder]

+1

[Pinny3]

Need this as soon as possible

+1

[purplerune]

+1

[Jaishankarb]

any update on this issue

[renatograel14]

+1

I'm trying to use setElevation() (Android.View). No success for now;/

let buttonView = this.addButton.nativeElement;
buttonView.android.setElevation(new java.lang.Float("50"));

let buttonView = this.addButton.nativeElement;
buttonView.android.setElevation(50);

[silent-coder]

+1

[anhtuan9113]

+1

[Macarthurval]

+1

[ChangJoo-Park]

+1

[AdityaChoudhary]

+1

[basketofsoftkittens]

+1

[mrhirsch]

+1

[kvzl]

+1

[sergebruni]

+1

[airandfingers]

+1

[silent-coder]

+1

[clever9]

1+

[yamaoto]

+1

[Nurgunkalol]

+10

[kalininskiy]

+1

[berardo]

In the meantime, for those who work with Angular, I've created a directive that deals with native shadows according to material design guidelines (even for iOS).
It can be as easy as a simple attribute:

<Label shadow="2"></Label>

If you guys want to check it out: https://github.com/Especializa/nativescript-ng-shadow

[silent-coder]

+1

[mathieuwinn]

+1 definitely a must-have

[GrEg00z]

@berardo : your plugin not compile, we get this error at pre-compilation :

https://github.com/Especializa/nativescript-ng-shadow/issues/4

[bnussey]

+1

[mudlabs]

@abinici Can you apply shadow to the StackLayout view?

I can't get it to work on anything other than a Label, which only works if there's no borderRadius. Or on a TextField, But that's always inset.

I'm trying to make a card that floats, a bit like the ones in the Today tab in the App Store (mobile).

[schoettler]

+1

[ghost]

+1

[suisseworks]

+1

[surafel-nigussie]

+1

[laimonas]

This is essential for good looking UI.

[ogmedia]

The nativescript-cardview plugin did it for me in the meantime.

[slasho]

+1

[leocaseiro]

@schoettler @suisseworks @surafel-nigussie @bhavincb @slasho @silent-coder @neillin

Have you guys ever seen that you could use emoji reaction instead of posting +1?

Everytime you comment +1, everyone in the thread gets notifications.

Also, most of the contributors prioritize issues to work on depending on 👍 reactions.

[silent-coder]

+1

[neillin]

+1

[Tyg-g]

I propose to implement a simplified alternative to CSS3 box-shadow:

box-shadow: none | shadow

When shadow is on , it uses the system-implemented shadow keeping the native UI look.

[tsili852]

+1

[silent-coder]

+1

[zeesulehria]

we can use shadow plugin but in some cases its result is not as what we desire so if it is possible to add css support then its a massive advantage .

[karim007]

+1

[clrh]

+1

[RichardM99]

+1

[tomcatmwi]

+0.99999894
Sorry I use an old Pentium!

[IAMtheIAM]

Until its supported natively, use nativescript-ng-shadow

[silent-coder]

When will this be natively supported, asking for a friend...

[kefahB]

👍

[dhananjaykumar880]

+1

[papmodern]

+1

[vondritz]

we need this please

[Tarens2]

+1

[jofftiquez]

@leocaseiro +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1

[EddyVerbruggen]

There's a 👍"reaction" icon at the first post ⬆️ up there. Use that to upvote instead of spamming every subscriber of this thread with a comment. Thanks!

And to get notified of changes/comments, hit that "Subscribe" button at the right, near the top:

[silent-coder]

+1

[eric-blue]

Until its supported natively, use nativescript-ng-shadow

Not for us poor Vue-ers :(

[mojimi]

Really could use this, specially for non-angular users as the only plugin is for angular...

[eric-blue]

For those wondering, I was able to hack a solution out of this:
https://github.com/bradmartin/nativescript-cardview

Basically, make every element that needs a shadow into a card.

[EddyVerbruggen]

@eric-blue OMG that's actually a very good idea!

For iOS, <CardView radius="3" shadowRadius="3" shadowOpacity="0.2" shadowOffsetHeight="0"> gives me this nice subtle shadow (which extends into the dark searchbar) to enhance the 'splitview' experience (on the left there's a scrollable list, on the right the details). Thanks! 💯

[JoshDSommer]

@edusperoni and I have been maintaining a fork of the nativescript-ng-shadow project that is bundled with ng-packagr so that it is compatible with bundling and aot. Along with some overall improvements to performance in list views and playing nicely with css.

https://github.com/TheOriginalJosh/nativescript-ngx-shadow
https://www.npmjs.com/package/nativescript-ngx-shadow

[mojimi]

nativescript-cardview is nice but doesn't work with border-radius, so no round buttons.

[eric-blue]

@mojimi give the param radius a try.

From the docs: https://github.com/bradmartin/nativescript-cardview

The default values are set to:
radius = 2;
shadowOffsetWidth = 0;
shadowOffsetHeight = 2;
shadowColor = new Color('#000').ios
shadowOpacity = 0.4;
shadowRadius = 1;

[EddyVerbruggen]

Hello my shadow-loving friends, I've been taking a stab at implementing this and came to the conclusion that full CSS box-shadow support is.. challenging. And I want to openly discuss a way forward with y'all.

The problem

Translating something like CSS's opacity property to native is quite trivial; on iOS you set UIView.alpha = value, and on Android it's android.view.View.setAlpha(value). Done.

CSS's box-shadow however is much more complex. Consider the spec:

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit

Parsing a value like box-shadow: 5px 5px 0px 10px rgb(0,255,0) into properties like h-shadow (horizontal offset), blur, and color is easy, but which native properties do we map these onto?

iOS

iOS has a few properties on UIView.layer that come in handy. We can map box-shadow's color onto UIView.layer.shadowColor, and UIView.layer.shadowOffset seems like a good candidate for h-shadow and v-shadow. And there's a few other native properties we can use to get as close to the Web implementation as possible (although it will never be perfect as we're trying to map properties with different semantics here).

Android

Android is actually worse, which came as a suprise to me because we've all seen Material Design demos having those cute little shadows all over the UI. It turns out those shadows are always grey (and don't have offsets), right? That's because there's no native color property to map onto.

I stumbled upon a hacky solution that renders an SVG below the view to pull off more advanced (and colored) shadows, but that sounds like a bad idea to me.

An alternative solution

Since Android supports elevation as part of Material Design anyway, we might as well expose that as a view property. It's also what the ng-shadow and card-view plugins leverage on the Android side.

But what do we do on iOS? Two options:

1. Either expose all those aforementioned native properties (like ng-shadow and card-view do), so you can set shadowOffset.X, shadowOffset.Y, shadowColor, shadowOpacity, shadowRadius, and a few others, or
2. Expose only elevation and have tns-core-modules take care of rendering the shadow as close to what Android does as possible.

I think the first option will confuse the hell out of people and still they would want to tweak those properties until the effect is similar to what Android does.

Please VOTE!

Use the 'Reactions' at the top-right of this post to express your needs:

• 👍 Adding a Material Design elevation property that renders shadows similar on both platforms would serve most of my shadow needs.
• 😕 Expose all platform-specific properties: elevation on Android (and ignore it on iOS), and a whole bunch of iOS-specific properties because I want a different appearance on each platforms.
• 👎 Don't bother doing 👍 nor 😕 - if I can't get full box-shadow support I don't want baked-in support for elevation/shadows at all.

[sitefinitysteve]

Nobody vote 👎 , why is that an option eddy

[tjvantoll]

I support 👍, but I’ll add that—since you’ve done some research here—a write up on 😕 would be super useful—just because some people will want that level of platform-specific configuration. Maybe even, I don’t know, a Marketplace code sample that shows a few of the options live 😉

[edusperoni]

@EddyVerbruggen IIRC, setting elevation on Android screws with the border-radius from Nativescript. We had to work around this on ngx-shadow.

I've already looked at this issue and couldn't find a solution that would fit all.

Currently, ngx-shadow generates consistent shadows across platforms. This was one of the main reasons we forked the project from ng-shadow. We do this by doing the following:

Android

• Creates 2 background classes extending: LayerDrawable for when we have an existing background and want to copy border-radius and etc. GradientDrawable for setting a simple background with border-radius.
• Extract border-radius from the view style and apply to a mask
• Add this mask to the layer along with the original background
• Set elevation, translationZ and StateListAnimator
• Some monkey patching so to not mess with Nativescript's background logic

Without LayerDrawable, setting elevation does not cast shadows on most of NS views.

iOS

• Wrap the element with StackLayout
• Apply shadow layer options to this StackLayout
  If you don't do this, elements inside the original element get individual shadows

---

An elevation property would probably be the best fit, but there are some inherent changes that must be made to make sure they look the same on both platforms.

I'm willing to help develop this feature

[farfromrefug]

@edusperoni have you tried with outline on android? this should work perfectly on post Lollipop and allow for all kind of transformation. should be dead easy to make it to work with border radius. Done it in another framework.
explanation

Edit: btw elevation + border radius works great on android if using same value for all corners. Using it heavily already

Edit2: @EddyVerbruggen i think with outline you should be able to do quite a lot. But If it is not enough(colored shadow for example) then I just found this

[edusperoni]

@farfromrefug that could work, have to see how it interacts with the rest of NS clipping/etc.

Some views (without a shape) don't work just by setting elevation :(

[farfromrefug]

@edusperoni can you give an example of view failing?

[edusperoni]

@farfromrefug
Check the just-elevation branch. https://github.com/edusperoni/nativescript-ngx-shadow/tree/just-elevation

Run npm i && tns run android --syncAllFiles

I've commented out everything about replacing the background, all I'm doing is: nativeView.setElevation(). It works for button, doesn't work for any other view.

Edit: also, I've added some console logs with: tnsView, tnsView.text, tnsView.android.getBackground().getClass()

[edusperoni]

Ok, I got it working with outline!

This is how to do it:

const MyProvider = android.view.ViewOutlineProvider.extend({
  getOutline: function(view, outline) {
    const outerRadii = Array.create("float", 8);
    outerRadii[0] = outerRadii[1] = Length.toDevicePixels(30, 0);
    outerRadii[2] = outerRadii[3] = Length.toDevicePixels(30, 0);
    outerRadii[4] = outerRadii[5] = Length.toDevicePixels(0, 0);
    outerRadii[6] = outerRadii[7] = Length.toDevicePixels(0, 0);
    const test = new android.graphics.Path();
    test.addRoundRect(new android.graphics.RectF(0, 0, view.getWidth(), view.getHeight()), outerRadii, android.graphics.Path.Direction.CW)
    test.close();
    // outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), view.getHeight() / 2);
    outline.setConvexPath(test);
  }
})

this allows a 30 topleft,topright border-radius and 0 bottomleft,bottomright radius. Then just set it as the outline provider and it's good to go.

Worth noting that we have to work around some views that already provide outlines (like button). Probably something like .getOutline().isEmpty() should do the trick.

I'll try to work on it tomorrow. If everything goes right I'll open a PR to nativescript-ngx-shadow.

[edusperoni]

Couldn't wait until tomorrow 😃 I've just updated my branch:
https://github.com/edusperoni/nativescript-ngx-shadow/tree/just-elevation

With this I can create a ViewOutline passing the current view as owner. It detects border-radius correctly and sets the outline as it should.

Things we could probably optimize/improve:

• do we need to calculate the outline every time getOutline is called? If we cache it, how to properly detect changes? (maybe storing width, height and each radius)
• detect when we don't need to set an Outline (button gets bugged). Maybe by doing view.getBackgroun().getOutline() and checking if it's empty?
• we could make BorderDrawable return the correct outline by overriding getOutline <- this is probably the best approach, as the default outline providers checks this

[edusperoni]

PR is out! https://github.com/NativeScript/tns-core-modules-widgets/pull/158

With this, we just have to check is if all views that have shadow must have backgrounds (maybe create transparent BorderDrawables if they don't?)

Is overriding the StateListAnimator out of the scope? (if the view is tappable, we can make it behave like the button)

@EddyVerbruggen Should we move this discussion to a [WIP] PR? Or slack, maybe

[nericode]

+1

[EthanSbbn]

+1

[demetrio812]

Hello, is the PR stuck for some reason?

[xitude]

+1

[bundyo]

This issue seems improperly closed by the bot, as only Android implementation landed?

[alexziskind1]

Should this issue be closed? The iOS version hasn't been implemented

[dschniepp]

@manoldonev was this issue closed accidentally, as iOS is not implemented yet? Thank you for clarification.

[manoldonev]

@dschniepp yup, reopened it now

[vahidvdn]

Any plan for iOS implementation?

[cherimo]

The designs that you can create with shadows effect is substantial, Really looking forward to this.. ps: Thx for the amazing NativeScript library ❤️

[bgrand-ch]

+1

[octavvartan]

+

[OPADA-Eng]

any news?

[darkyelox]

For me is worrying that the more I use NativeScript the more I see issues like this unclosed, there are plenty of required features that are ignored

[SmailHammour]

How is this issue still open?

[MrSnoozles]

The roadmap at https://www.nativescript.org/roadmap-and-releases#roadmap says more CSS properties are planned for 2019. I really hope this includes box shadow as it's crucial to implement most designs. NativeScript is a wonderful technology ❤️ but a lot of times it's frustrating to implement interface designs because of the limited CSS support

[thd-fox]

Is there any progress on this? -push-

[alqabali]

any news?

[vahidvdn]

@NathanWalker Any idea in order to make this work for both iOS and Android? (Since there is a new team and maybe new roadmaps)

[rigor789]

@vahidvdn I'm 💯 for adding shadows that work for both platforms, however last time I checked, customizing the shadows on Android is very limited to the elevation property.

I do think we should figure out a clever way to support both platforms using the standard css syntax, and try to find the closest match of elevation on Android until there's proper shadow support. This wouldn't be perfect though.

[iamabs2001]

Nativescript will be more powerful if we get almost all css properties in nativescript.
😀🔥

[vahidvdn]

@rigor789 Thanks. I think this is the most favorite feature that almost all of the nativescripters really love it and waiting for it.

[Tyler-V]

This would be awesome! +1

[steve-79]

+1

[kennethkeim]

Is there any estimate of when this might be a thing? We aren't deploying our app right away so can afford to wait for a bit, if someone could tell me if it's a few months out or more like a year, that would be super helpful.

Thanks to all of you who maintain NativeScript. ❤️

[kan101]

Try this https://market.nativescript.org/plugins/nativescript-vue-shadow/ There's an angular implementation too.

[NathanWalker]

Agreed here - we have often implemented this in angular projects via directives - will bring up in next weeks TSC meeting to put on the plan for 7.1 or shortly after, would be nice to close the loop here.

[oslc15]

@NathanWalker any news on this from the TSC meeting? :)

[NathanWalker]

Yes we are putting this on the 8.0 plan for sure however there may be an option to introduce in 7.x series.