Modifier

Layout and decoration go through the modifier prop. Import Modifier from supernode/widget and build it by chaining calls. Widgets are rendered as RemoteViews, which store one value per property, so widget modifiers do not depend on order; see Order.

import { Modifier, Text } from "supernode/widget";

<Text modifier={Modifier.fillMaxWidth().background("#FFFFFF").cornerRadius(12).padding(16)}>
  Hello
</Text>

Like Modifier.padding in Compose, padding takes a number for all edges, an edge object { start, top, end, bottom }, or an axis object { horizontal, vertical }; one object cannot mix the two forms. start and end follow the layout direction. Numbers are in dp, matching widget.displaySize. Views size to their content by default.

Order

Padding always sits inside the background, and repeated padding calls add up. background, cornerRadius, the width (width, size, fillMaxWidth, fillMaxSize, and defaultWeight() inside a Row) and the height (height, size, fillMaxHeight, fillMaxSize, and defaultWeight() inside a Column) can each be set once per chain; widget.show() rejects a second value with the path of the view.

<Column>
  {/* Both chains render the same: padding is inner padding. */}
  <Text modifier={Modifier.padding(8).background("#FFE0E0")}>Padding</Text>
  <Text modifier={Modifier.background("#FFE0E0").padding(8)}>Padding</Text>
</Column>

To add space outside a background, wrap the view in a Box with its own padding.

defaultWeight

defaultWeight() is the only weight Glance supports: every child of a Row or Column with defaultWeight() gets an equal share of the remaining space along the main axis. It is only allowed on direct children of Column and Row (children of a fragment count as children of the enclosing container). It sets the width inside a Row and the height inside a Column, so it cannot be combined with another width or height on the same axis.

import { Modifier, Row, Spacer, Text } from "supernode/widget";

<Row verticalAlignment="center" modifier={Modifier.fillMaxWidth().padding(16)}>
  <Text>Title</Text>
  {/* Pushes "Edit" to the end of the row. */}
  <Spacer modifier={Modifier.defaultWeight()} />
  <Text>Edit</Text>
</Row>

Rounded corners

cornerRadius(radius) rounds the view's background and content. It applies on Android 12 (API 31) and later; earlier versions draw square corners.

Combining modifiers

Modifiers are immutable: every call returns a new chain. Use append to combine a modifier received from a parent with your own, or to add one conditionally. append only accepts a Modifier from supernode/widget.

import { Modifier, Text } from "supernode/widget";

function Tag({ label, selected, modifier = Modifier }: { label: string; selected: boolean; modifier?: Modifier }) {
  return (
    <Text modifier={modifier.padding({ horizontal: 8, vertical: 4 }).append(selected ? Modifier.background("#E0F0FF") : Modifier)}>
      {label}
    </Text>
  );
}