Layout Specs

DPI

Control the "DPI" scale by Scaling the root layer.

Kustom Setup

Make a global list: DPI, with options:

75##Tiny, 83.36##Small, 100##Regular, 112.5##Large, 125##Huge

Link the root layer scale to gv(dpi).

Do NOT scale komponents, only the root layer of the whole setup.


Width

The width of the root container is $si(rwidth)$. Use that formula to automatically adjust the width of objects.

Height

The height of the root container is $si(rheight)$. Use that formula to automatically adjust the height of objects.

Keep in mind the additional padding for the status and navigation bars.

Kustom Setup

Make two global numbers:

  • STB for the status bar padding/offset
  • NAV for the navigation bar padding/offset

For the height of fullscreen objects that don't span below status and navigation bar use the following formula:

$si(rheight)-gv(stb)-gv(nav)$

Example

The formula for the Image height is:

$si(rheight)-(40+32+24+96+24+200+48+96+24+gv(nav))$

or in short

$si(rheight)-584-gv(nav)$

That's how we can keep all the content visible on all aspect ratios - the image is automatically resized.