How to layer items in 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" />
            padding="10" row="1" col="0"
            backgroundColor="rgba(64, 153, 255, 0.6)">
            <Label class="fa" color="#FFFFFF" id="userName" text=""></Label>
            <Label class="footnote" id="userEmail" text=""></Label>

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

Hope this helps :slight_smile:

AbsoluteLayout -- how absolute is it? :)

Very Useful tip Shiv. Keep it up



thanks @multishiv19, that’s really helpful!

Can I actually control the sequence of layers with something comparable to z-index? Or is that approach complete nonsense? :thinking:

Best wishes,


The sequence of layers is fixed I guess. Haven’t thought of it that way. Coming to think of it, if we can change the sequence dynamically, it will be useful. I’ll let you know if I find I way. I got something in mind.

Update: Something cool coming your way. wait for it.


Perfect! Looking forward to it


you can change the order dynamically. e.g. android




Made a separate post for it, you can see it here,