Layout

How to place elements: flexbox, layers, grid, sizes, responsiveness.

Layout runs in two passes (measure, then arrange) and is recomputed only after something changes.

• Panel.column() / Panel.row() — flexbox: .gap(px), .justify(Justify.SPACE_BETWEEN), .align(Align.CENTER). Justify: START, CENTER, END, SPACE_BETWEEN, SPACE_AROUND, SPACE_EVENLY. Align: START, CENTER, END, STRETCH.
• Panel.box(layout) — a transparent container with no theme style, just for grouping.
• new Panel("card", StackLayout.centered()) — children stacked on top of each other (background, content, effects).
• new GridLayout(columns, gap) — a grid.
• ResponsivePanel and root.breakpoint() — layout that depends on screen width.
• Sizes: Dim.AUTO (fit content), Dim.px(n), Dim.percent(0..1), Dim.FILL.
• ScrollPanel(content) — vertical scrolling with smooth inertia; off-screen rows are not drawn.

Write your own layout by implementing the Layout interface (two methods: measure and arrange).

Responsiveness and scale (layout)

UiRoot reports a width class: root.breakpoint() (a signal), root.currentBreakpoint(): COMPACT (< 400), MEDIUM (< 640), WIDE; set the bounds with root.setBreakpoints(new Breakpoints(400, 640)).

ResponsivePanel.rowFrom(Breakpoint.MEDIUM, 8).add(a, b, c);   // a column when narrow, a row from MEDIUM
ResponsivePanel.columns(1, 2, 3, 8).add(cards);               // a 1/2/3-column grid
ResponsivePanel.columns(1, 2, 2, 6).byContainerWidth(true);   // by its own width instead of the root's
new Panel("grid", new GridLayout(3, 8, 6));                   // just equal columns

root.setScale(1.5f) enlarges the whole UI (0.25–4): layout is computed in logical pixels (root.width() = physical width / scale), mouse coordinates are divided by the scale, and the width class is recomputed too.

---

← Your First Screen · English home · Styles and Themes →