How to Layer items in NativeScript

Category: #nativescript

Here’s a useful tip,

In Grid layout of NativeScript, you can place multiple UI items on the same row and column,

the one that was placed last, will be at the top.

so, let’s say you write something like this

<GridLayout height="180" rows="*, auto" columns="*">
    <Image
        row="0"
        rowSpan="2"
        col="0"
        stretch="aspectFill"
        height="180"
        src="url to some image"
        id="userIcon" />
    <StackLayout
        padding="10"
        row="1"
        col="0"
        backgroundColor="rgba(64, 153, 255, 0.6)" >
        <Label class="fa" color="#FFFFFF" id="userName" text="" />
        <Label class="footnote" id="userEmail" text="" />
    </StackLayout>
</GridLayout>;

Result

You will get a layered effect, see how the stackLayout got overLayed on top. :)

Hope this helps ^_^

Written on November 27, 2017