feat(android): elevation shadow support (#7136)

apps/app/ui-tests-app/css/elevation.css

@@ -0,0 +1,43 @@
+Label, Button {
+    text-align: center;
+    padding: 10;
+    margin: 16;
+    background-color: #bbb;
+}
+
+.elevation-0 {
+    android-elevation: 0;
+}
+
+.elevation-2 {
+    android-elevation: 2;
+}
+
+.elevation-4 {
+    android-elevation: 4;
+}
+
+.elevation-4:highlighted {
+    android-elevation: 2;
+}
+
+.elevation-8 {
+    android-elevation: 8;
+}
+
+.elevation-10 {
+    android-elevation: 10;
+}
+
+.pressed-z-10 {
+    android-dynamic-elevation-offset: 10;
+}
+
+.round {
+    color: #fff;
+    background-color: #ff1744;
+    border-radius: 50%; /* TODO kills elevation */
+    width: 80;
+    height: 80;
+    android-elevation: 8;
+}

apps/app/ui-tests-app/css/elevation.ts

@@ -0,0 +1,20 @@
+import { Button } from "tns-core-modules/ui/button/button";
+import { EventData } from "tns-core-modules/ui/page/page";
+
+const states = [
+    { class: "", text: "default elevation" },
+    { class: "elevation-10", text: "elevetion 10" },
+    { class: "elevation-10 pressed-z-10", text: "elevetion 10 pressed-z 10" },
+    { class: "elevation-0", text: "elevetion 0" },
+]
+let currentState = 0;
+
+export function buttonTap(args: EventData) {
+    let btn: Button = args.object as Button;
+    currentState++;
+    if (currentState >= states.length) {
+        currentState = 0;
+    }
+    btn.className = states[currentState].class;
+    btn.text = states[currentState].text;
+}

apps/app/ui-tests-app/css/elevation.xml

@@ -0,0 +1,25 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
+    <ScrollView>
+        <StackLayout backgroundColor="aliceblue" androidElevation="2" padding="10" margin="20">
+            <Button text="default elevation" tap="buttonTap"/>
+
+            <Button class="elevation-0" text="elevation 0"/>
+
+            <Label class="elevation-2" text="Label with elevation 2"/>
+
+            <StackLayout androidElevation="4" backgroundColor="#ff1744" horizontalAlignment="center" margin="20">
+                <Button class="elevation-2" text="elevation 2"/>
+                <Button class="elevation-4" text="elevation 4"/>
+            </StackLayout>
+
+            <StackLayout orientation="horizontal" horizontalAlignment="center">
+                <Button class="round" androidElevation="4" text="el. 4"/>
+                <Button class="elevation-8 round" text="el. 8"/>
+            </StackLayout>
+
+            <Label class="elevation-8" text="elevation 8"/>
+            <Button class="elevation-8" text="elevation 8, with radius" borderRadius="4"/>
+            <Button class="elevation-10" text="elevation 10"/>
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/css/main-page.ts

@@ -38,6 +38,7 @@ export function loadExamples() {
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
     examples.set("padding-and-border", "css/padding-and-border");
     examples.set("combinators", "css/combinators");
+    examples.set("elevation", "css/elevation");
     examples.set("styled-formatted-text", "css/styled-formatted-text");
     examples.set("non-uniform-radius", "css/non-uniform-radius");
     examples.set("missing-background-image", "css/missing-background-image");