XML Themes

XML themes define native Suduxu user interfaces using a declarative component system.

Each XML node is parsed into an internal UI tree and rendered directly into Jetpack Compose components on the device.

XML Theme
  → Parsed into UINode tree
  → Component mapping layer
  → Jetpack Compose rendering

This makes XML themes lightweight, fast, and tightly integrated with Android rendering.

Core Concept

Every XML element is treated as a UI component declaration.

Each component:

• has a fixed name (Button, Row, Column, ...)
• accepts a set of typed properties
• can contain child components
• maps 1:1 (or near 1:1) to a Compose implementation

Component System Overview

Common Structure

All components follow this structure:

• Props (attributes) → configuration values
• Children → nested UI nodes
• Runtime rendering → Jetpack Compose function

<UINode>
  name: "Button"
  props: { label, onClick, ... }
  children: [...]

Components Reference

Layout Components

<Column hAlign="center" spacing="8">
    <Text text="Hello" />
    <Text text="World" />
</Column>

<Row hArrangement="spaceBetween" vAlign="center">
    <Text text="Left" />
    <Text text="Right" />
</Row>

UI Components

<Button label="Press Me" onClick="handlePress" />

<Text text="Suduxu UI" fontWeight="bold" />

Input Components

<SuduxuButton label="A" buttonInput="A" />

<SuduxuDPad size="200" />

<SuduxuJoystick size="200" knobRatio="0.5" />

Spacer Component

<Spacer height="16" />

Layout Utilities

These modifiers affect all components:

Padding

padding="8"

Or directional:

padding="{ start: 8, top: 4, end: 8, bottom: 4 }"

Fill behavior

fillMaxSize="true"
fillMaxWidth="true"
fillMaxHeight="true"

Execution Model

XML → UINode tree → Renderer → Compose runtime

Key points:

• UI is tree-based
• Rendering is recursive
• Props are loosely typed maps
• Callbacks are resolved at runtime