ps: I’m not sure why ur nesting every Image, Label … inside StackLayout or GridLayout? in Nativescript drawing every component cost you, especially when you deep nest (You should not rely on the same mentality of using <div> in html ). So you can use row, col, rowSpan, colSpan on the components directly and utilize css to control other aspects e.g. height, width …etc.

Out of all of the layouts (excluding the WrapLayout), I would recommend using AbsoluteLayout the least. The actual applicable use-cases for it, are quite narrow.

Anything that deals with alignment (in your case centering your element to another container), the GridLayout or FlexLayout is normally your best bet. The only exception is using verticalAlignment or horizontalAlignment styling properties to align the children content.

In your example, you could have the thumbs-up button on row 0 and horizontal align it to the right, vertical alignment to the top of the container. Use margins/paddings to offset any differences caused by your container.

Good feedback, thanks. To simplify the question – given you have a GridLayout with 4 rows and 2 columns, how can I place an image (or Label) on the top-right corner of that GridLayout so that it looks like it’s overlaying it?

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="rg…