Skip to main content

Layout With Groups

Hosanna UI provides a powerful grouping system for building complex, flexible layouts. Groups allow you to organize UI elements (such as Labels, Images, Buttons, etc.) into logical containers, supporting both vertical and horizontal arrangements, nesting, and advanced focus management.

What is a Group?​

A Group is a container for other UI components. You can use different group types:

  • Group: Generic container, often used for absolute or custom layouts.
  • VGroup: Arranges children vertically.
  • HGroup: Arranges children horizontally.
tip

For most layouts, prefer using VGroup and HGroup for vertical and horizontal stacking, respectively.

Why Use Groups?​

  • Organization: Structure your UI into logical sections.
  • Nesting: Build complex layouts by nesting groups.
  • Focus Management: Control navigation and focus, especially for TV/remote interfaces.
  • Shared Styling: Apply common styles, padding, or backgrounds to all children.

Basic Example​

VGroup([
  Label({ text: 'Title' }),
  HGroup([
    Button({ text: 'Left' }),
    Button({ text: 'Right' })
  ])
])

Example

Layout Properties​

Groups support various layout and style properties:

  • padding, margin, backgroundColor
  • flexDirection (for custom Group)
  • gap (space between children)
  • alignItems, justifyContent (for alignment)
  • translation (for positioning)

Focus Management​

Set canReceiveFocus: true on child elements or groups to control focus navigation. This is essential for TV and remote navigation.

Best Practices​

  • Use VGroup and HGroup for most layouts.
  • Nest groups for complex UIs.
  • Apply shared styles at the group level.
  • Test focus navigation for a smooth user experience.

For more on UI structure and layout, see UI and Interaction Layout.