Overlapping two elements with AbsoluteLayout on Android

android

#1

I want two overlap two elements like in the image bellow

but on Android I’m getting the following result.

On iOS this works as it is expected.

Environment:
nativescript │ 3.4.0
tns-core-modules │ 3.4.0
tns-android │ 3.4.0
tns-ios │ 3.4.0

Angular: 4.4.6


#2

I would recommend gridLayout inside absolute layout.
GridLayout has better overlapping support.

Here’s an article where i show how to do it


#3

If you just want to bring the blue view to front, set z-index to 1 or add it as last child to it’s parent.


#4

@multishiv19, I have to say I disagree. You show how you can cause one element to appear above another. You do not cover the case where that element is being placed above the boundary of and overlapping the top of another. The element above both of them tends to hide the “blue square.”

After a lot of fussing with z-indexes (which do not at all work as on a browser) and top and left properties, I thought of a much easier way to accomplish this kind of effect.

Make an AbsoluteLayout to hold everything. In it, place first the bottom-layer element (red shapes) and then the top-layer element (blue square). Give the lower layer (red shapes) a margin-top of 30 or something. That’s it.

<AbsoluteLayout>
  <red-squares marginTop="30"></red-squares>
  <blue-square></blue-square>
</AbsoluteLayout>

(Excuse the abstract element names–I’m just trying to get the point across. In my case, they were StackLayouts.)

First, NativeScript will render the red squares, since they come first in the HTML. Then it will render the blue square on top, since it comes next in the HTML. Because they’re in an AbsoluteLayout, both are rendered at exactly the same y-coordinate, but the margin-top of the red squares will push them down.