androidx.xr.glimmer

Kotlin |Java

UI components for building augmented Android XR experiences

Classes

`ButtonSize`	ButtonSize represents the different size variants of a `Button`.
`Colors`	A set of named color parameters for a `GlimmerTheme`.
`Depth`	Depth establishes a sense of hierarchy by using shadows to occlude content underneath.
`DepthLevels`	Glimmer components can use `Depth` to establish a sense of hierarchy.
`GlimmerTheme`	Glimmer contains different theme subsystems to allow visual customization across an application.
`IconSizes`	A set of named icon sizes.
`Shapes`	Glimmer surfaces can use different shapes.
`SurfaceDepth`	Represents the `Depth` used by a `surface` in different states.
`Typography`	The Glimmer type scale includes a range of contrasting styles that support the needs of your product and its content.

Objects

`ButtonDefaults`	Default values used for `Button`.
`CardDefaults`	Default values used for `Card`
`ListItemDefaults`	Default values used for `ListItem`
`SurfaceDefaults`	Default values used for `surface`.
`TitleChipDefaults`	Default values used for `TitleChip`.

Top-level functions summary

`Unit`	`@Composable Button( onClick: () -> Unit, modifier: Modifier, enabled: Boolean, buttonSize: ButtonSize, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable RowScope.() -> Unit )` Button is a component used for exposing actions to a user.
`Unit`	@Composable Card( action: @Composable () -> Unit, modifier: Modifier, title: (@Composable () -> Unit)?, subtitle: (@Composable () -> Unit)?, header: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, content: @Composable () -> Unit ) Card is a component used to group related information into a single digestible unit.
`Unit`	@Composable Card( modifier: Modifier, title: (@Composable () -> Unit)?, subtitle: (@Composable () -> Unit)?, header: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit ) Card is a component used to group related information into a single digestible unit.
`Unit`	@Composable Card( onClick: () -> Unit, modifier: Modifier, title: (@Composable () -> Unit)?, subtitle: (@Composable () -> Unit)?, header: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit ) Card is a component used to group related information into a single digestible unit.
`Unit`	`@Composable GlimmerTheme( colors: Colors, typography: Typography, content: @Composable () -> Unit )` Glimmer contains different theme subsystems to allow visual customization across an application.
`Unit`	`@Composable Icon(bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier)` An icon component that draws `bitmap`, with a default size of `LocalIconSize`, and applies a content color tint.
`Unit`	`@Composable Icon( imageVector: ImageVector, contentDescription: String?, modifier: Modifier )` An icon component that draws `imageVector`, with a default size of `LocalIconSize`, and applies a content color tint.
`Unit`	`@Composable Icon(painter: Painter, contentDescription: String?, modifier: Modifier)` An icon component that draws `painter`, with a default size of `LocalIconSize`, and applies a content color tint.
`Unit`	`@Composable Icon( bitmap: ImageBitmap, tint: Color, contentDescription: String?, modifier: Modifier )` An icon component that draws `bitmap`, with a default size of `LocalIconSize`, and applies a tint of `tint`.
`Unit`	`@Composable Icon( imageVector: ImageVector, tint: Color, contentDescription: String?, modifier: Modifier )` An icon component that draws `imageVector`, with a default size of `LocalIconSize`, and applies a tint of `tint`.
`Unit`	`@Composable Icon( painter: Painter, tint: ColorProducer?, contentDescription: String?, modifier: Modifier )` An icon component that draws `painter`, with a default size of `LocalIconSize`, and applies a tint of `tint`.
`Unit`	`@Composable ListItem( modifier: Modifier, supportingLabel: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit )` ListItem is a component used to represent a single item in a `androidx.xr.glimmer.list.VerticalList`.
`Unit`	`@Composable ListItem( onClick: () -> Unit, modifier: Modifier, supportingLabel: (@Composable () -> Unit)?, leadingIcon: (@Composable () -> Unit)?, trailingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable () -> Unit )` ListItem is a component used to represent a single item in a `androidx.xr.glimmer.list.VerticalList`.
`Unit`	@Composable Text( text: String, modifier: Modifier, color: Color, fontSize: TextUnit, fontStyle: FontStyle?, fontWeight: FontWeight?, fontFamily: FontFamily?, letterSpacing: TextUnit, textDecoration: TextDecoration?, textAlign: TextAlign, lineHeight: TextUnit, overflow: TextOverflow, softWrap: Boolean, maxLines: @IntRange(from = 1) Int, minLines: @IntRange(from = 1) Int, onTextLayout: ((TextLayoutResult) -> Unit)?, autoSize: TextAutoSize?, style: TextStyle ) High level element that displays text and provides semantics / accessibility information.
`Unit`	@Composable Text( text: AnnotatedString, modifier: Modifier, color: Color, fontSize: TextUnit, fontStyle: FontStyle?, fontWeight: FontWeight?, fontFamily: FontFamily?, letterSpacing: TextUnit, textDecoration: TextDecoration?, textAlign: TextAlign, lineHeight: TextUnit, overflow: TextOverflow, softWrap: Boolean, maxLines: @IntRange(from = 1) Int, minLines: @IntRange(from = 1) Int, inlineContent: Map<String, InlineTextContent>, onTextLayout: ((TextLayoutResult) -> Unit)?, autoSize: TextAutoSize?, style: TextStyle ) High level element that displays text and provides semantics / accessibility information.
`Unit`	`@Composable TitleChip( modifier: Modifier, leadingIcon: (@Composable () -> Unit)?, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, contentPadding: PaddingValues, content: @Composable RowScope.() -> Unit )` Title Chip is a component used to provide context for associated content, such as a `Card`.
`Color`	`calculateContentColor(backgroundColor: Color)` Calculates the preferred content color for `backgroundColor`.

Extension functions summary

`Modifier`	`Modifier.contentColorProvider(contentColor: Color)` Provides `contentColor` for text and iconography to consume.
`Modifier`	`Modifier.depth(depth: Depth?, shape: Shape)` Renders shadows for the provided `depth`.
`Modifier`	`Modifier.onIndirectPointerGesture( enabled: Boolean, onClick: () -> Unit, onSwipeForward: () -> Unit, onSwipeBackward: () -> Unit )` A `Modifier` that listens for and detects high-level gestures from an `IndirectPointerEvent` source.
`Modifier`	`@Composable Modifier.surface( focusable: Boolean, shape: Shape, color: Color, contentColor: Color, depth: SurfaceDepth?, border: BorderStroke?, interactionSource: MutableInteractionSource? )` A surface is a fundamental building block in Glimmer.
`Modifier`	`@Composable Modifier.surface( enabled: Boolean, shape: Shape, color: Color, contentColor: Color, depth: SurfaceDepth?, border: BorderStroke?, interactionSource: MutableInteractionSource?, onClick: () -> Unit )` A surface is a fundamental building block in Glimmer.

Top-level properties summary

`ProvidableCompositionLocal<Dp>`	`LocalIconSize` CompositionLocal containing the preferred size of an icon.
`ProvidableCompositionLocal<TextStyle>`	`LocalTextStyle` CompositionLocal containing the preferred `TextStyle` that will be used by `Text` components by default.

Top-level functions

Button

Artifact: androidx.xr.glimmer:glimmer

View Source

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    buttonSize: ButtonSize = ButtonSize.Medium,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.large,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ButtonDefaults.contentPadding(buttonSize),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Button is a component used for exposing actions to a user.

import androidx.xr.glimmer.Button
import androidx.xr.glimmer.Text

Button(onClick = {}) { Text("Send") }

Buttons can use icons to provide more context about the action:

import androidx.xr.glimmer.Button
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("Send")
}

There are multiple button size variants - providing a different ButtonSize will affect default values used inside this button, such as the minimum height and the size of icons inside this button. Note that you can still provide a size modifier such as androidx.compose.foundation.layout.size to change the layout size of this button, buttonSize affects default values and values internal to the button.

import androidx.xr.glimmer.Button
import androidx.xr.glimmer.ButtonSize
import androidx.xr.glimmer.Text

Button(onClick = {}, buttonSize = ButtonSize.Large) { Text("Send") }

Parameters
`onClick: () -> Unit`	called when this button is clicked
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this button
`enabled: Boolean = true`	controls the enabled state of this button. When `false`, this button will not respond to user input
`buttonSize: ButtonSize = ButtonSize.Medium`	the size variant of this button, represented as a `ButtonSize`. Changing `buttonSize` will affect some default values used by this button - but the final resulting size of the button will still be calculated based on the content of the button, and any provided size modifiers such as `androidx.compose.foundation.layout.size`. For example, setting a 100.dp size using a size modifier will result in the same layout size regardless of `buttonSize`, but the provided `buttonSize` will affect other properties such as padding values and the size of icons.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before the `content`. This is typically an `Icon`.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after the `content`. This is typically an `Icon`.
`shape: Shape = GlimmerTheme.shapes.large`	the `Shape` used to clip this button, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this button
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this button
`contentPadding: PaddingValues = ButtonDefaults.contentPadding(buttonSize)`	the spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable RowScope.() -> Unit`	the main content, typically `Text`, to display inside this button

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Card(
    action: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    header: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    content: @Composable () -> Unit
): Unit

Card is a component used to group related information into a single digestible unit. A card can adapt to display a wide range of content, from simple text blurbs to more complex summaries with multiple elements. A card contains text content, and may also have any combination of title, subtitle, leadingIcon, and trailingIcon. If specified, title is placed on top of the subtitle, which is placed on top of the content. A card fills the maximum width available by default.

This Card contains an action that is placed on the center of the bottom edge of the card. The action should be a Button, and represents the action that will be performed when this card is interacted with. The main card itself is not focusable - the action takes the focus instead.

For more documentation and samples of the other card parameters, see the other card overload without an action.

import androidx.xr.glimmer.Button
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(action = { Button(onClick = {}) { Text("Send") } }, title = { Text("Title") }) {
    Text("This is a card with a title and action")
}

Parameters
`action: @Composable () -> Unit`	the action for this card. This should be a `Button`, and represents the action performed when a user interacts with this card. The action is placed overlapping the bottom edge of the card.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to the outer layout containing the card and action
`title: (@Composable () -> Unit)? = null`	optional title to be placed above `subtitle` and `content`, below `header`
`subtitle: (@Composable () -> Unit)? = null`	optional subtitle to be placed above `content`, below `title`
`header: (@Composable () -> Unit)? = null`	optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using `androidx.compose.ui.layout.ContentScale.FillWidth`. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as `androidx.compose.foundation.layout.fillMaxSize` will result in an image that fills the maximum aspect ratio.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`shape: Shape = CardDefaults.shape`	the `Shape` used to clip this card, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this card
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, `title` and `subtitle`.
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this card
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
`content: @Composable () -> Unit`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Card(
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    header: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This Card is focusable - see the other Card overload for a clickable Card.

Cards can also be combined with a TitleChip. See the documentation for TitleChip for more information / sample code.

A simple Card with just text:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card { Text("This is a card") }

A Card with a trailing icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("This is a card with a trailing icon")
}

A Card with a title, subtitle, and a leading icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is a card with a title, subtitle, and leading icon")
}

A card with a title and a header image:

import androidx.compose.foundation.Image
import androidx.compose.ui.layout.ContentScale
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(
    title = { Text("Title") },
    header = {
        Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
    },
) {
    Text("This is a card with a title and header image")
}

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this card
`title: (@Composable () -> Unit)? = null`	optional title to be placed above `subtitle` and `content`, below `header`
`subtitle: (@Composable () -> Unit)? = null`	optional subtitle to be placed above `content`, below `title`
`header: (@Composable () -> Unit)? = null`	optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using `androidx.compose.ui.layout.ContentScale.FillWidth`. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as `androidx.compose.foundation.layout.fillMaxSize` will result in an image that fills the maximum aspect ratio.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`shape: Shape = CardDefaults.shape`	the `Shape` used to clip this card, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this card
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, `title` and `subtitle`.
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this card
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable () -> Unit`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    header: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This Card is focusable and clickable - see the other Card overload for a Card that is only focusable.

Cards can also be combined with a TitleChip. See the documentation for TitleChip for more information / sample code.

A simple clickable Card with just text:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(onClick = {}) { Text("This is a card") }

A clickable Card with a trailing icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("This is a card with a trailing icon")
}

A clickable Card with a title, subtitle, and a leading icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(
    onClick = {},
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is a card with a title, subtitle, and leading icon")
}

A clickable Card with a title and a header image:

import androidx.compose.foundation.Image
import androidx.compose.ui.layout.ContentScale
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(
    onClick = {},
    title = { Text("Title") },
    header = {
        Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
    },
) {
    Text("This is a card with a title and header image")
}

Parameters
`onClick: () -> Unit`	called when this card item is clicked
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this card
`title: (@Composable () -> Unit)? = null`	optional title to be placed above `subtitle` and `content`, below `header`
`subtitle: (@Composable () -> Unit)? = null`	optional subtitle to be placed above `content`, below `title`
`header: (@Composable () -> Unit)? = null`	optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using `androidx.compose.ui.layout.ContentScale.FillWidth`. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as `androidx.compose.foundation.layout.fillMaxSize` will result in an image that fills the maximum aspect ratio.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`shape: Shape = CardDefaults.shape`	the `Shape` used to clip this card, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this card
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, `title` and `subtitle`.
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this card
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable () -> Unit`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

GlimmerTheme

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun GlimmerTheme(
    colors: Colors = GlimmerTheme.colors,
    typography: Typography = GlimmerTheme.typography,
    content: @Composable () -> Unit
): Unit

Glimmer contains different theme subsystems to allow visual customization across an application.

Components use properties provided here when retrieving default values.

Any values that are not set will inherit the current value from the theme, falling back to the defaults if there is no parent GlimmerTheme. This allows using a GlimmerTheme at the top of your application, and then separate GlimmerTheme(s) for different screens / parts of your UI, overriding only the parts of the theme definition that need to change.

Parameters
`colors: Colors = GlimmerTheme.colors`	`Colors` used by components within this hierarchy
`typography: Typography = GlimmerTheme.typography`	`Typography` used by components within this hierarchy
`content: @Composable () -> Unit`	The content that can retrieve values from this theme

Icon

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

An icon component that draws bitmap, with a default size of LocalIconSize, and applies a content color tint. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. The recommended icon sizes can be retrieved using GlimmerTheme.Companion.iconSizes. A size can be set explicitly using size, and components can use LocalIconSize to set the preferred size for any Icons inside the component. The content color used to tint this icon is provided by surface. To set a custom tint color, use the Icon overload with a tint parameter. For multicolored icons and icons that should not be tinted, use the overload and set Color.Unspecified as the tint color. For generic images that should not be tinted, and should not use the provided icon size, use the generic androidx.compose.foundation.Image instead.

Parameters
`bitmap: ImageBitmap`	`ImageBitmap` to draw inside this icon
`contentDescription: String?`	text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this icon

See also
`LocalIconSize`
`iconSizes`

Icon

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

An icon component that draws imageVector, with a default size of LocalIconSize, and applies a content color tint. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. The recommended icon sizes can be retrieved using GlimmerTheme.Companion.iconSizes. A size can be set explicitly using size, and components can use LocalIconSize to set the preferred size for any Icons inside the component. The content color used to tint this icon is provided by surface. To set a custom tint color, use the Icon overload with a tint parameter. For multicolored icons and icons that should not be tinted, use the overload and set Color.Unspecified as the tint color. For generic images that should not be tinted, and should not use the provided icon size, use the generic androidx.compose.foundation.Image instead.

Parameters
`imageVector: ImageVector`	`ImageVector` to draw inside this icon
`contentDescription: String?`	text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this icon

See also
`LocalIconSize`
`iconSizes`

Icon

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

An icon component that draws painter, with a default size of LocalIconSize, and applies a content color tint. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. The recommended icon sizes can be retrieved using GlimmerTheme.Companion.iconSizes. A size can be set explicitly using size, and components can use LocalIconSize to set the preferred size for any Icons inside the component. The content color used to tint this icon is provided by surface. To set a custom tint color, use the Icon overload with a tint parameter. For multicolored icons and icons that should not be tinted, use the overload and set null for the tint parameter. For generic images that should not be tinted, and should not use the provided icon size, use the generic androidx.compose.foundation.Image instead.

Parameters
`painter: Painter`	`Painter` to draw inside this icon
`contentDescription: String?`	text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this icon

See also
`LocalIconSize`
`iconSizes`

Icon

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Icon(
    bitmap: ImageBitmap,
    tint: Color,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

An icon component that draws bitmap, with a default size of LocalIconSize, and applies a tint of tint. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. The recommended icon sizes can be retrieved using GlimmerTheme.Companion.iconSizes. A size can be set explicitly using size, and components can use LocalIconSize to set the preferred size for any Icons inside the component. Use the other overload of Icon without a tint parameter to apply the recommended content color provided by a surface. For multicolored icons and icons that should not be tinted, set tint to Color.Unspecified. For generic images that should not be tinted, and should not use the provided icon size, use the generic androidx.compose.foundation.Image instead.

Parameters
`bitmap: ImageBitmap`	`ImageBitmap` to draw inside this icon
`tint: Color`	tint to be applied to `bitmap`. If `Color.Unspecified` is provided, then no tint is applied.
`contentDescription: String?`	text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this icon

See also
`LocalIconSize`
`iconSizes`

Icon

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Icon(
    imageVector: ImageVector,
    tint: Color,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

An icon component that draws imageVector, with a default size of LocalIconSize, and applies a tint of tint. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. The recommended icon sizes can be retrieved using GlimmerTheme.Companion.iconSizes. A size can be set explicitly using size, and components can use LocalIconSize to set the preferred size for any Icons inside the component. Use the other overload of Icon without a tint parameter to apply the recommended content color provided by a surface. For multicolored icons and icons that should not be tinted, set tint to Color.Unspecified. For generic images that should not be tinted, and should not use the provided icon size, use the generic androidx.compose.foundation.Image instead.

Parameters
`imageVector: ImageVector`	`ImageVector` to draw inside this icon
`tint: Color`	tint to be applied to `imageVector`. If `Color.Unspecified` is provided, then no tint is applied.
`contentDescription: String?`	text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this icon

See also
`LocalIconSize`
`iconSizes`

Icon

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Icon(
    painter: Painter,
    tint: ColorProducer?,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

An icon component that draws painter, with a default size of LocalIconSize, and applies a tint of tint. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. The recommended icon sizes can be retrieved using GlimmerTheme.Companion.iconSizes. A size can be set explicitly using size, and components can use LocalIconSize to set the preferred size for any Icons inside the component. Use the other overload of Icon without a tint parameter to apply the recommended content color provided by a surface. For multicolored icons and icons that should not be tinted, set tint to null. For generic images that should not be tinted, and should not use the provided icon size, use the generic androidx.compose.foundation.Image instead.

Parameters
`painter: Painter`	`Painter` to draw inside this icon
`tint: ColorProducer?`	tint to be applied to `painter`. If null, then no tint is applied.
`contentDescription: String?`	text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this icon

See also
`LocalIconSize`
`iconSizes`

ListItem

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun ListItem(
    modifier: Modifier = Modifier,
    supportingLabel: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

ListItem is a component used to represent a single item in a androidx.xr.glimmer.list.VerticalList. A ListItem has a primary label content, and may also have any combination of supportingLabel, leadingIcon, and trailingIcon. The supporting label is displayed below the primary label and can be used to provide additional information. A ListItem fills the maximum width available by default.

This ListItem is focusable - see the other ListItem overload for a clickable ListItem.

A simple ListItem with just a primary label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem { Text("Primary Label") }

A ListItem with a primary and supporting label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(supportingLabel = { Text("Supporting Label") }) { Text("Primary Label") }

A ListItem with a primary label, a supporting label, and a leading icon:

import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(
    supportingLabel = { Text("Supporting Label") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("Primary Label")
}

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this list item
`supportingLabel: (@Composable () -> Unit)? = null`	optional supporting label to be placed underneath the primary label `content`
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before the primary label `content`. This is typically an `Icon`.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after the primary label `content`. This is typically an `Icon`.
`shape: Shape = GlimmerTheme.shapes.medium`	the `Shape` used to clip this list item, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this list item
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, and `supportingLabel`.
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this list item
`contentPadding: PaddingValues = ListItemDefaults.ContentPadding`	the spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable () -> Unit`	the main content / primary label to display inside this list item

ListItem

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun ListItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    supportingLabel: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This ListItem is focusable and clickable - see the other ListItem overload for a ListItem that is only focusable.

A simple clickable ListItem with just a primary label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(onClick = {}) { Text("Primary Label") }

A clickable ListItem with a primary and supporting label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(onClick = {}, supportingLabel = { Text("Supporting Label") }) { Text("Primary Label") }

A clickable ListItem with a primary label, a supporting label, and a leading icon:

import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(
    onClick = {},
    supportingLabel = { Text("Supporting Label") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("Primary Label")
}

Parameters
`onClick: () -> Unit`	called when this list item is clicked
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this list item
`supportingLabel: (@Composable () -> Unit)? = null`	optional supporting label to be placed underneath the primary label `content`
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before the primary label `content`. This is typically an `Icon`.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after the primary label `content`. This is typically an `Icon`.
`shape: Shape = GlimmerTheme.shapes.medium`	the `Shape` used to clip this list item, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this list item
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, and `supportingLabel`.
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this list item
`contentPadding: PaddingValues = ListItemDefaults.ContentPadding`	the spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable () -> Unit`	the main content / primary label to display inside this list item

Text

Artifact: androidx.xr.glimmer:glimmer

View Source

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign = TextAlign.Unspecified,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: @IntRange(from = 1) Int = Int.MAX_VALUE,
    minLines: @IntRange(from = 1) Int = 1,
    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
    autoSize: TextAutoSize? = null,
    style: TextStyle = LocalTextStyle.current
): Unit

High level element that displays text and provides semantics / accessibility information.

The default style uses the LocalTextStyle provided by the GlimmerTheme / components. If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

If a parameter is explicitly set here (i.e, it is not null or an unspecified type), then this parameter will always be used.
If a parameter is not set, (null or unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then the content color provided by the nearest surface will be used.

Parameters
`text: String`	the text to be displayed
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this layout node
`color: Color = Color.Unspecified`	`Color` to apply to the text. If `Color.Unspecified`, and `style` has no color set, this will be the content color provided by the nearest `surface`.
`fontSize: TextUnit = TextUnit.Unspecified`	the size of glyphs to use when painting the text. See `TextStyle.fontSize`.
`fontStyle: FontStyle? = null`	the typeface variant to use when drawing the letters (e.g., italic). See `TextStyle.fontStyle`.
`fontWeight: FontWeight? = null`	the typeface thickness to use when painting the text (e.g., `FontWeight.Bold`).
`fontFamily: FontFamily? = null`	the font family to be used when rendering the text. See `TextStyle.fontFamily`.
`letterSpacing: TextUnit = TextUnit.Unspecified`	the amount of space to add between each letter. See `TextStyle.letterSpacing`.
`textDecoration: TextDecoration? = null`	the decorations to paint on the text (e.g., an underline). See `TextStyle.textDecoration`.
`textAlign: TextAlign = TextAlign.Unspecified`	the alignment of the text within the lines of the paragraph. See `TextStyle.textAlign`.
`lineHeight: TextUnit = TextUnit.Unspecified`	line height for the `Paragraph` in `TextUnit` unit, e.g. SP or EM. See `TextStyle.lineHeight`.
`overflow: TextOverflow = TextOverflow.Clip`	how visual overflow should be handled.
`softWrap: Boolean = true`	whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If `softWrap` is false, `overflow` and TextAlign may have unexpected effects.
`maxLines: @IntRange(from = 1) Int = Int.MAX_VALUE`	An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to `overflow` and `softWrap`. It is required that 1 <= `minLines`<= `maxLines`.
`minLines: @IntRange(from = 1) Int = 1`	The minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`.
`onTextLayout: ((TextLayoutResult) -> Unit)? = null`	callback that is executed when a new text layout is calculated. A `TextLayoutResult` object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
`autoSize: TextAutoSize? = null`	Enable auto sizing for this text composable. Finds the biggest font size that fits in the available space and lays the text out with this size. This performs multiple layout passes and can be slower than using a fixed font size. This takes precedence over sizes defined through `fontSize` and `style`. See `TextAutoSize`.
`style: TextStyle = LocalTextStyle.current`	style configuration for the text such as color, font, line height etc.

Text

Artifact: androidx.xr.glimmer:glimmer

View Source

@Composable
fun Text(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign = TextAlign.Unspecified,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: @IntRange(from = 1) Int = Int.MAX_VALUE,
    minLines: @IntRange(from = 1) Int = 1,
    inlineContent: Map<String, InlineTextContent> = emptyMap(),
    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
    autoSize: TextAutoSize? = null,
    style: TextStyle = LocalTextStyle.current
): Unit

High level element that displays text and provides semantics / accessibility information.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.
If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then the content color provided by the nearest surface will be used.

Parameters
`text: AnnotatedString`	the text to be displayed
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this layout node
`color: Color = Color.Unspecified`	`Color` to apply to the text. If `Color.Unspecified`, and `style` has no color set, this will be the content color provided by the nearest `surface`.
`fontSize: TextUnit = TextUnit.Unspecified`	the size of glyphs to use when painting the text. See `TextStyle.fontSize`.
`fontStyle: FontStyle? = null`	the typeface variant to use when drawing the letters (e.g., italic). See `TextStyle.fontStyle`.
`fontWeight: FontWeight? = null`	the typeface thickness to use when painting the text (e.g., `FontWeight.Bold`).
`fontFamily: FontFamily? = null`	the font family to be used when rendering the text. See `TextStyle.fontFamily`.
`letterSpacing: TextUnit = TextUnit.Unspecified`	the amount of space to add between each letter. See `TextStyle.letterSpacing`.
`textDecoration: TextDecoration? = null`	the decorations to paint on the text (e.g., an underline). See `TextStyle.textDecoration`.
`textAlign: TextAlign = TextAlign.Unspecified`	the alignment of the text within the lines of the paragraph. See `TextStyle.textAlign`.
`lineHeight: TextUnit = TextUnit.Unspecified`	line height for the `Paragraph` in `TextUnit` unit, e.g. SP or EM. See `TextStyle.lineHeight`.
`overflow: TextOverflow = TextOverflow.Clip`	how visual overflow should be handled.
`softWrap: Boolean = true`	whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If `softWrap` is false, `overflow` and TextAlign may have unexpected effects.
`maxLines: @IntRange(from = 1) Int = Int.MAX_VALUE`	An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to `overflow` and `softWrap`. It is required that 1 <= `minLines`<= `maxLines`.
`minLines: @IntRange(from = 1) Int = 1`	The minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`.
`inlineContent: Map<String, InlineTextContent> = emptyMap()`	a map storing composables that replaces certain ranges of the text, used to insert composables into text layout. See `InlineTextContent`.
`onTextLayout: ((TextLayoutResult) -> Unit)? = null`	callback that is executed when a new text layout is calculated. A `TextLayoutResult` object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
`autoSize: TextAutoSize? = null`	Enable auto sizing for this text composable. Finds the biggest font size that fits in the available space and lays the text out with this size. This performs multiple layout passes and can be slower than using a fixed font size. This takes precedence over sizes defined through `fontSize` and `style`. See `TextAutoSize`.
`style: TextStyle = LocalTextStyle.current`	style configuration for the text such as color, font, line height etc.

TitleChip

Artifact: androidx.xr.glimmer:glimmer

View Source

@Composable
fun TitleChip(
    modifier: Modifier = Modifier,
    leadingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.large,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = TitleChipDefaults.contentPadding(hasIcon = leadingIcon != null),
    content: @Composable RowScope.() -> Unit
): Unit

Title Chip is a component used to provide context for associated content, such as a Card. They are designed for brief information, typically a short title, name, or status. Title chips are not focusable, and not interactable.

import androidx.xr.glimmer.Text
import androidx.xr.glimmer.TitleChip

TitleChip { Text("Messages") }

Title chips may have a leading icon to provide more context:

import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.TitleChip

TitleChip(leadingIcon = { Icon(FavoriteIcon, "Localized description") }) { Text("Messages") }

To use a title chip with another component, place the title chip TitleChipDefaults.AssociatedContentSpacing above the other component. For example, to use a title chip with a card:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.TitleChip
import androidx.xr.glimmer.TitleChipDefaults

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    TitleChip { Text("Title Chip") }
    Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
    Card(
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("Card Content")
    }
}

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this title chip
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before the `content`. This is typically an `Icon`.
`shape: Shape = GlimmerTheme.shapes.large`	the `Shape` used to clip this title chip, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this title chip
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this title chip
`contentPadding: PaddingValues = TitleChipDefaults.contentPadding(hasIcon = leadingIcon != null)`	the spacing values to apply internally between the container and the content
`content: @Composable RowScope.() -> Unit`	the main content, typically `Text`, to display inside this title chip

calculateContentColor

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

fun calculateContentColor(backgroundColor: Color): Color

Calculates the preferred content color for backgroundColor. This will return either Color.White or Color.Black, depending on the luminance of the background color.

See also
`surface`
`contentColorProvider`

Extension functions

contentColorProvider

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

fun Modifier.contentColorProvider(contentColor: Color): Modifier

Provides contentColor for text and iconography to consume. Content color is provided automatically by surface - contentColorProvider can be used for cases where some text or icons inside a surface require a different color for emphasis.

Parameters
`contentColor: Color`	the content color to provide for descendants

See also
`surface`
`calculateContentColor`

depth

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

fun Modifier.depth(depth: Depth?, shape: Shape): Modifier

Renders shadows for the provided depth.

Parameters
`depth: Depth?`	Depth to render shadows for. If `null`, no shadows will be rendered.
`shape: Shape`	`Shape` of the shadows

onIndirectPointerGesture

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

fun Modifier.onIndirectPointerGesture(
    enabled: Boolean = true,
    onClick: () -> Unit = {},
    onSwipeForward: () -> Unit = {},
    onSwipeBackward: () -> Unit = {}
): Modifier

A Modifier that listens for and detects high-level gestures from an IndirectPointerEvent source. The component (or one of its descendants) using this modifier must be focused to intercept and process indirect pointer events.

This modifier is designed to be used near the top of the composable hierarchy to handle gestures.

import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusTarget
import androidx.xr.glimmer.onIndirectPointerGesture

Box(
    modifier =
        Modifier.onIndirectPointerGesture(
                enabled = true,
                onClick = { /* onClick */ },
                onSwipeForward = { /* onSwipeForward */ },
                onSwipeBackward = { /* onSwipeBackward */ },
            )
            .focusTarget()
) {
    // App()
}

Parameters
`enabled: Boolean = true`	Controls whether gesture detection is active. When `false`, this modifier has no effect and no callbacks will be invoked.
`onClick: () -> Unit = {}`	Invoked when a successful click is detected.
`onSwipeForward: () -> Unit = {}`	Invoked when a successful forward swipe is detected.
`onSwipeBackward: () -> Unit = {}`	Invoked when a successful backward swipe is detected.

surface

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Modifier.surface(
    focusable: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    depth: SurfaceDepth? = null,
    border: BorderStroke? = SurfaceDefaults.border(),
    interactionSource: MutableInteractionSource? = null
): Modifier

A surface is a fundamental building block in Glimmer. A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. A surface is responsible for:

Clipping: a surface clips its children to the shape specified by shape
Border: a surface draws an inner border to emphasize the boundary of the component.
Background: a surface has a background color of color.
Depth: a surface can have different Depth shadows for different states, as specified by depth.
Content color: a surface provides a contentColor for text and icons inside the surface. By default this is calculated from the provided background color.
Interaction states: when focused, a surface displays draws a wider border with a focused highlight on top. When pressed, a surface draws a pressed overlay. This happens for interactions emitted from interactionSource, whether this surface is focusable or not.

This surface is focusable by default - set focusable to false for un-interactive / decorative surfaces. For handling clicks, use the other surface overload with an onClick parameter.

Simple usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
    Text("This is a surface")
}

For custom gesture handling, add the gesture modifier after this surface, and provide a shared MutableInteractionSource to enable this surface to handle focus / press states. You should also pass false for focusable if that modifier already includes a focus target by default. For example, to create a toggleable surface:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.toggleable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

var checked by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }
Box(
    Modifier.surface(
            // Disable focus on the surface, since toggleable is already focusable
            focusable = false,
            // Provide the same interaction source here and to toggleable to make sure that
            // surface appears focused and pressed when interacted with
            interactionSource = interactionSource,
        )
        .toggleable(
            value = checked,
            interactionSource = interactionSource,
            onValueChange = { checked = it },
        )
        .padding(horizontal = 24.dp, vertical = 20.dp)
) {
    Text("Checked: $checked")
}

Parameters
`focusable: Boolean = true`	whether this surface is focusable, true by default. Most surfaces should be focusable to allow navigation between surfaces in a screen. Unfocusable surfaces may be used for decorative only elements, such as surfaces used in a compound component with a separate focusable area.
`shape: Shape = GlimmerTheme.shapes.medium`	the `Shape` used to clip this surface, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	the background `Color` for this surface
`contentColor: Color = calculateContentColor(color)`	the `Color` for content inside this surface
`depth: SurfaceDepth? = null`	the `SurfaceDepth` for this surface, representing the `Depth` shadows rendered in different states.
`border: BorderStroke? = SurfaceDefaults.border()`	an optional inner border for this surface
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this surface. Note that if `null` is provided, interactions will still happen internally.

surface

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
fun Modifier.surface(
    enabled: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    depth: SurfaceDepth? = null,
    border: BorderStroke? = SurfaceDefaults.border(),
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit
): Modifier

A surface is a fundamental building block in Glimmer. A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. A surface is responsible for:

Clipping: a surface clips its children to the shape specified by shape
Border: a surface draws an inner border to emphasize the boundary of the component. When focused, a surface draws a wider border with a focused highlight on top to indicate the focus state.
Background: a surface has a background color of color.
Depth: a surface can have different Depth shadows for different states, as specified by depth.
Content color: a surface provides a contentColor for text and icons inside the surface. By default this is calculated from the provided background color.
Interaction states: when focused, a surface displays draws a wider border with a focused highlight on top. When pressed, a surface draws a pressed overlay. This happens for interactions emitted from interactionSource, whether this surface is enabled or not.

This surface is focusable and handles clicks. For non-clickable surfaces, use the other overload of surface instead. For surfaces with custom gesture handling, refer to the sample and guidance on the other overload of surface.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

Box(Modifier.surface(onClick = {}).padding(horizontal = 24.dp, vertical = 20.dp)) {
    Text("This is a clickable surface")
}

Parameters
`enabled: Boolean = true`	whether this surface is enabled, true by default. When false, this surface will not respond to user input, and will not be focusable.
`shape: Shape = GlimmerTheme.shapes.medium`	the `Shape` used to clip this surface, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	the background `Color` for this surface
`contentColor: Color = calculateContentColor(color)`	the `Color` for content inside this surface
`depth: SurfaceDepth? = null`	the `SurfaceDepth` for this surface, representing the `Depth` shadows rendered in different states.
`border: BorderStroke? = SurfaceDefaults.border()`	an optional inner border for this surface
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this surface. Note that if `null` is provided, interactions will still happen internally.
`onClick: () -> Unit`	callback invoked when this surface is clicked

Top-level properties

LocalIconSize

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

val LocalIconSize: ProvidableCompositionLocal<Dp>

CompositionLocal containing the preferred size of an icon. This value will be used by Icon by default - it can be overridden with a size modifier.

LocalTextStyle

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

val LocalTextStyle: ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default.