Code Bites: Label Shadows for NativeScript on Android

view.css

.button {
    height: 34;
    background-color: #aeea00;
    color: #36505E;
    border-color: #80B808;
    border-width: 0.5;
    border-top-width: 0;
    border-bottom-width: 0;
    vertical-align: center;
    horizontal-align: stretch;
}

.buttonLabel {
    color: #36505E;
    font-weight: bold;
    font-size: 16;
    font-family: "Roboto-Bold";
    margin: 0;
    padding: 0;
    horizontal-align: center;
    vertical-align: center;
}

view.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
declare var android;

export function onLoaded(args: EventData) {
    let page = <Page>args.object;

    setLabelShadow(page, "button1Label");
    setLabelShadow(page, "button2Label");
    setLabelShadow(page, "button3Label");
}

function setLabelShadow(page: any, labelId: string) {
    var label = page.getViewById(labelId);
    var radius = 4;
    var xOffset = 0.1;
    var yOffset = 1;
    var color = android.graphics.Color.parseColor("#7f7f7f");

    // call native setShadowLayer method
    label.nativeView.setShadowLayer(radius, xOffset, yOffset, color);
}

view.xml

<!-- Row of buttons -->
<GridLayout rows="48" columns="*,*,*">  
    <StackLayout id="button1" class="button" row="0" col="0">
        <Label id="button1Label" class="buttonLabel" text="One" 
            horizontalAlignment="center" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout id="button2" class="button" row="0" col="1" text="2">
        <Label id="button2Label" class="buttonLabel" text="Two" 
            horizontalAlignment="center" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout id="button3" class="button" row="0" col="2" text="3">
        <Label id="button3Label" class="buttonLabel" text="Three"/>
    </StackLayout>
</GridLayout>