feat(core): box-shadow support (#9161)

packages/core/ui/styling/background.android.ts

@@ -6,6 +6,9 @@ import { parse } from '../../css-value';
 import { path, knownFolders } from '../../file-system';
 import * as application from '../../application';
 import { profile } from '../../profiling';
+import { BoxShadow } from './box-shadow';
+import { Color } from '../../color';
+import { Screen } from '../../platform';
 export * from './background-common';
 
 interface AndroidView {
@@ -90,6 +93,11 @@ export namespace ad {
 			nativeView.setBackground(defaultDrawable);
 		}
 
+		const boxShadow = view.style.boxShadow;
+		if (boxShadow) {
+			drawBoxShadow(nativeView, boxShadow);
+		}
+
 		// TODO: Can we move BorderWidths as separate native setter?
 		// This way we could skip setPadding if borderWidth is not changed.
 		const leftPadding = Math.ceil(view.effectiveBorderLeftWidth + view.effectivePaddingLeft);
@@ -218,6 +226,24 @@ function createNativeCSSValueArray(css: string): androidNative.Array<org.natives
 	return nativeArray;
 }
 
+function drawBoxShadow(nativeView: android.view.View, boxShadow: BoxShadow) {
+	const color = boxShadow.color;
+	const shadowOpacity = color.a;
+	const shadowColor = new Color(shadowOpacity, color.r, color.g, color.b);
+	// TODO: corner radius here should reflect the view's corner radius
+	const cornerRadius = 0; // this should be applied to the main view as well (try 20 with a transparent background on the xml to see the effect)
+	const config = {
+		shadowColor: shadowColor.android,
+		cornerRadius,
+		spreadRadius: boxShadow.spreadRadius,
+		blurRadius: boxShadow.blurRadius,
+		offsetX: boxShadow.offsetX,
+		offsetY: boxShadow.offsetY,
+		scale: Screen.mainScreen.scale,
+	};
+	org.nativescript.widgets.Utils.drawBoxShadow(nativeView, JSON.stringify(config));
+}
+
 export enum CacheMode {
 	none,
 	memory,