4. Layouts

What you’ll learn: how CrossFly positions things, and the technique of nesting layouts to build real screens. Prerequisites: Thinking in components.

Complete example (copy, paste, and run)

The definitive structure of the list screen, nesting layouts: header in a HorizontalLayout (auto height), elastic content with LAY_FILL, and an auto footer — all in a VerticalLayout. Compiles as is.

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout(Position.START, Position.START));

      // header: HorizontalLayout, natural height (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // icon
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // title absorbs the width
      add(LAY_AUTO, header);

      // content: the "elastic" — absorbs the remaining height
      Component conteudo = new Component();
      conteudo.setLayout(new VerticalLayout());
      conteudo.add(LAY_AUTO, new Label("Item 1"));
      conteudo.add(LAY_AUTO, new Label("Item 2"));
      conteudo.add(LAY_AUTO, new Label("Item 3"));
      add(LAY_FILL, conteudo);

      // footer: natural height
      add(LAY_AUTO, new Button("Adicionar"));
   }
}

The snippets below show only the core (what goes inside onShow()). To run them, put them in the MainWindow skeleton above.

The six layouts

add(size, comp) — the three cases

add(LAY_AUTO, comp);   //  0f → content's natural size
add(LAY_FILL, comp);   // -1f → fills the remaining space (the "elastic")
add(0.3f, comp);       // >0  → 30% of the container's dimension

The key technique: nesting layouts

Real screens are built by composing containers with different layouts. Header in a HorizontalLayout (auto), content in LAY_FILL, all in a VerticalLayout:

setLayout(new VerticalLayout(Position.START, Position.START));

Component header = new Component();
header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // icon
header.add(LAY_FILL, new Label("Minhas tarefas"));         // title absorbs the width
add(LAY_AUTO, header);                                      // header: natural height

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // list: absorbs the height

What you build in this step

The definitive structure of the list screen: header (auto) + list (LAY_FILL) + footer.

Recap

add(0f|-1f|fraction, comp); one LAY_FILL per axis is the elastic one; nest layouts for real screens.

Next steps

→ Styling and themes

See also

• Layouts (ui) · Concept: Layout and the Relative model