Tutorial about how layouts works

Hay there. Just wondering if there is a good tutorial about how items are drawn on the screens. I’m struggling with laying out components and having them size and layout correctly. I’m sure I just be getting some aspect wrong and seems to be going round in circles

1 Like

Hi @rkeehan,

Welcome to the club :wink: There is no comprehensive tutorial for this, as I know. Unfortunately, one needs to find the best working layout with trial and error.

There are some hints and observations which I’ve made:

  • to preserve the screen elements’ proportions and locations, you can use rectangles as a “containers”, where you put the other UI elements. Don’t forget to move these rectangles “to the bottom” of the screen (left pane → Screens → Components), so that other elements will be clickable
  • also you can use rectangles as “fillers”, so that you keep the space aligned. Don’t forget to make them “touch” each others’ borders and screen edges.
  • if you are having 2 elements with conditional visibility (like custom radiobuttons), in order for them to appear in one place, try to put one right above the other (not overlap, but on top).
  • The layout rules for “Fixed to None” and “Fixed to Top”,“Fixed to bottom” may depend on each other, but indirectly. So theoretically you could build different layout rules for app bar and for the content.
  • if you don’t have the “Edit style” for a particular element, and you’d like to have it fixed to top for example, create a group out of it.

Hope this will be useful :slight_smile:

If you have any specific layout problem - you could ask for help here in the forum (better with the screenshot/examples).

Best regards, Victor.


Hey @Victor @rkeehan I’ve just made this video about layouts, let me know if it helps!