Responsiveness: one UI for every screen

In CrossFly, responsiveness is not a separate feature — it’s a consequence of measuring by relationships. If you follow the principles below, the screen re-adapts to size, density (DPI), font scale, and orientation without media queries and without recalculating by hand. This page is the task-oriented cut of Chapter 36; the “why” is in Layout and the Relative model.

The 5 principles

1. Never position in fixed pixels. Use fractions, Relative, and LAY_FILL/LAY_AUTO.
2. Let the layout measure. LAY_AUTO/Relative.AUTO/RelSize.AUTOSIZE report the natural size.
3. Spacing scales too. ingap/outgap via Gap.ofFont(...), never pixels.
4. One elastic area per axis. Mark one component with LAY_FILL to absorb the slack.
5. Resize is automatic — if you did the above. Only manual setBounds requires code.

The toolbox

Breakpoints with Screen.minSize

Use the shorter side (Screen.minSize), not width — it’s stable when the device rotates:

boolean tablet = Screen.minSize >= 600;   // decides 1 vs 2 columns, for example

When (rarely) to change the arrangement: onReposition()

If the layout must change structure by orientation, override Window.onReposition():

@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 columns
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 column
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}

Responsiveness checklist

• Zero fixed ofPixels/setBounds (barring a justified exception).
• Exactly one LAY_FILL per elastic axis.
• Spacing with Gap.ofFont/ofScreen.
• Squares/icons with ofScreen(v, ScreenSize.MIN).
• Breakpoints with Screen.minSize.

Anti-patterns

See also

• Canonical source: Chapter 36 · Concept: Layout and Relative
• Layouts · Responsiveness (ui)