androidx.xr.compose.material3

Compose Material3 XR

Interfaces

XrComponentOverrideEnabler

Interface that a client can provide to enable/disable XR overrides on a per-component basis.

XrComponentOverrideEnablerContext

Information about the current XR environment.

Classes

HorizontalOrbiterProperties

XR-specific properties for components that use horizontally-aligned Orbiters.

VerticalOrbiterProperties

XR-specific properties for components that use vertically-aligned Orbiters.

XrComponentOverride

The set of Material Components that can be overridden on XR.

Annotations

Top-level functions summary

Unit

Clients can wrap their Compose hierarchy in this function to dynamically enable XR components when in the proper environment.

Unit
@ExperimentalMaterial3XrApi
@Composable
NavigationBar(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    content: @Composable RowScope.() -> Unit
)

Material Design bottom navigation bar.

Unit
@ExperimentalMaterial3XrApi
@Composable
NavigationRail(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    header: (@Composable ColumnScope.() -> Unit)?,
    content: @Composable ColumnScope.() -> Unit
)

Material Design bottom navigation rail.

Unit
@ExperimentalMaterial3XrApi
@Composable
ThreePaneScaffold(
    modifier: SubspaceModifier,
    scaffoldDirective: PaneScaffoldDirective,
    paneOrder: ThreePaneScaffoldHorizontalOrder,
    secondaryPane: @Composable () -> Unit,
    tertiaryPane: (@Composable () -> Unit)?,
    primaryPane: @Composable () -> Unit
)

A pane scaffold composable that can display up to three panes in the order that ThreePaneScaffoldHorizontalOrder specifies, and allocate margins and spacers according to PaneScaffoldDirective.

Top-level properties summary

Top-level functions

EnableXrComponentOverrides

@ExperimentalMaterial3XrApi
@Composable
fun EnableXrComponentOverrides(
    overrideEnabler: XrComponentOverrideEnabler = DefaultXrComponentOverrideEnabler,
    content: @Composable () -> Unit
): Unit

Clients can wrap their Compose hierarchy in this function to dynamically enable XR components when in the proper environment.

The overrideEnabler param determines whether each component will use an XR version.

@ExperimentalMaterial3XrApi
@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design bottom navigation bar.

XR-specific Navigation bar that shows a Navigation bar in a bottom-aligned Orbiter.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

NavigationBar should contain three to five NavigationBarItems, each representing a singular destination.

See NavigationBarItem for configuration specific to each item, and not the overall NavigationBar component.

Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this navigation bar

containerColor: Color = NavigationBarDefaults.containerColor

the color used for the background of this navigation bar. Use Color.Transparent to have no color.

contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this navigation bar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

tonalElevation: Dp = NavigationBarDefaults.Elevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

content: @Composable RowScope.() -> Unit

the content of this navigation bar, typically 3-5 NavigationBarItems

@ExperimentalMaterial3XrApi
@Composable
fun NavigationRail(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationRailDefaults.ContainerColor,
    contentColor: Color = contentColorFor(containerColor),
    header: (@Composable ColumnScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Material Design bottom navigation rail.

XR-specific Navigation rail that shows a Navigation rail in a start-aligned Orbiter.

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

The navigation rail should be used to display three to seven app destinations and, optionally, a FloatingActionButton or a logo header. Each destination is typically represented by an icon and an optional text label.

NavigationRail should contain multiple NavigationRailItems, each representing a singular destination.

See NavigationRailItem for configuration specific to each item, and not the overall NavigationRail component.

Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this navigation rail

containerColor: Color = NavigationRailDefaults.ContainerColor

the color used for the background of this navigation rail. Use Color.Transparent to have no color.

contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this navigation rail. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

header: (@Composable ColumnScope.() -> Unit)? = null

optional header that may hold a FloatingActionButton or a logo

content: @Composable ColumnScope.() -> Unit

the content of this navigation rail, typically 3-7 NavigationRailItems

@ExperimentalMaterial3XrApi
@Composable
fun ThreePaneScaffold(
    modifier: SubspaceModifier,
    scaffoldDirective: PaneScaffoldDirective,
    paneOrder: ThreePaneScaffoldHorizontalOrder,
    secondaryPane: @Composable () -> Unit,
    tertiaryPane: (@Composable () -> Unit)? = null,
    primaryPane: @Composable () -> Unit
): Unit

A pane scaffold composable that can display up to three panes in the order that ThreePaneScaffoldHorizontalOrder specifies, and allocate margins and spacers according to PaneScaffoldDirective.

ThreePaneScaffold is the base composable functions of adaptive programming. Developers can freely pipeline the relevant adaptive signals and use them as input of the scaffold function to render the final adaptive layout.

Parameters
modifier: SubspaceModifier

The modifier to be applied to the layout.

scaffoldDirective: PaneScaffoldDirective

The top-level directives about how the scaffold should arrange its panes.

paneOrder: ThreePaneScaffoldHorizontalOrder

The horizontal order of the panes from start to end in the scaffold.

secondaryPane: @Composable () -> Unit

The content of the secondary pane that has a priority lower then the primary pane but higher than the tertiary pane.

tertiaryPane: (@Composable () -> Unit)? = null

The content of the tertiary pane that has the lowest priority.

primaryPane: @Composable () -> Unit

The content of the primary pane that has the highest priority.

Top-level properties

LocalNavigationBarOrbiterProperties

@ExperimentalMaterial3XrApi
val LocalNavigationBarOrbiterPropertiesProvidableCompositionLocal<HorizontalOrbiterProperties?>

The HorizontalOrbiterProperties used by NavigationBar.

If null, DefaultNavigationBarOrbiterProperties will be used.

TODO(b/387339197): Make this non-null and default to DefaultNavigationBarXrProperties

LocalNavigationRailOrbiterProperties

@ExperimentalMaterial3XrApi
val LocalNavigationRailOrbiterPropertiesProvidableCompositionLocal<VerticalOrbiterProperties?>

The VerticalOrbiterProperties used by NavigationRail.

If null, DefaultNavigationRailOrbiterProperties will be used.

TODO(b/387339197): Make this non-null and default to DefaultNavigationRailXrProperties