8.8 released—CSS Media Query support, SF Symbols and much more...
Learn more

The <AbsoluteLayout> container is the simplest layout container in NativeScript.

<AbsoluteLayout> has the following behavior:

  • Uses a pair of absolute top/left coordinates to position its children.
  • Doesn't enforce any layout constraints on its children.
  • Doesn't resize its children at runtime when its size changes.

Creating a simple grid-like layout

The following example creates a simple grid.

xml
<AbsoluteLayout backgroundColor="#eef7ff">
  <Label
    text="10, 10"
    left="10"
    top="10"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="120, 10"
    left="120"
    top="10"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="10, 120"
    left="10"
    top="120"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="120, 120"
    left="120"
    top="120"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
</AbsoluteLayout>

Note

This example shows building a grid-like layout, this mainly serves as an example to illustrate how <AbsoluteLayout> works. In most cases building this UI will be better served by using a GridLayout.

Overlapping elements

The following example creates a group of overlapping items.

xml
<AbsoluteLayout backgroundColor="#eef7ff">
  <Label
    text="10, 10"
    left="10"
    top="10"
    width="100"
    height="100"
    backgroundColor="#0089ca"
  />
  <Label
    text="30, 40"
    left="30"
    top="40"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
</AbsoluteLayout>

Note

If you need to build more complex UIs with overlapping elements, consider using a GridLayout for greater flexibility.

AbsoluteLayout Reference

Props

NameTypeDescription
N/AN/ANone.
...InheritedInheritedAdditional inherited properties not shown. Refer to the API Reference

Children props

When an element is a direct child of <AbsoluteLayout>, you can set the following additional properties.

NameTypeDescription
topNumberGets or sets the distance, in pixels, between the top edge of the child and the top edge of its parent.
leftNumberGets or sets the distance, in pixels, between the left edge of the child and the left edge of its parent.
Previous
DockLayout