How to layer items in NativeScript

layereditems

#1

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>
            <Label class="footnote" id="userEmail" text=""></Label>
        </StackLayout>
    </GridLayout>

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? :)
#2

Very Useful tip Shiv. Keep it up


#3

Hi,

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,
BEN


#4

@kommitareeben
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.


#5

Perfect! Looking forward to it


#6

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

page.getViewById("myLabel").android.bringToFront();


#7

@kommitareeben

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