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 `Orbiter`s.
`VerticalOrbiterProperties`	XR-specific properties for components that use vertically-aligned `Orbiter`s.
`XrComponentOverride`	The set of Material Components that can be overridden on XR.

Annotations

ExperimentalMaterial3XrApi

Top-level functions summary

`Unit`	`@ExperimentalMaterial3XrApi @Composable BasicAlertDialog( onDismissRequest: () -> Unit, properties: SpatialDialogProperties, content: @Composable () -> Unit )` Basic alert dialog dialog.
`Unit`	`@ExperimentalMaterial3XrApi @Composable EnableXrComponentOverrides( overrideEnabler: XrComponentOverrideEnabler, content: @Composable () -> Unit )` Clients can wrap their Compose hierarchy in this function to dynamically enable XR components when in the proper environment.
`Unit`	`@ExperimentalMaterial3XrApi @ExperimentalMaterial3ExpressiveApi @Composable HorizontalFloatingToolbar( expanded: Boolean, floatingActionButton: @Composable () -> Unit, modifier: Modifier, colors: FloatingToolbarColors, contentPadding: PaddingValues, floatingActionButtonPosition: FloatingToolbarHorizontalFabPosition, content: @Composable RowScope.() -> Unit )` A floating toolbar that displays horizontally.
`Unit`	`@ExperimentalMaterial3XrApi @ExperimentalMaterial3ExpressiveApi @Composable HorizontalFloatingToolbar( expanded: Boolean, modifier: Modifier, colors: FloatingToolbarColors, contentPadding: PaddingValues, scrollBehavior: FloatingToolbarScrollBehavior?, leadingContent: (@Composable RowScope.() -> Unit)?, trailingContent: (@Composable RowScope.() -> Unit)?, content: @Composable RowScope.() -> Unit )` A horizontal floating toolbar displays navigation and key actions in a `Row`.
`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 NavigationSuiteScaffold( navigationSuiteItems: NavigationSuiteScope.() -> Unit, modifier: SubspaceModifier, layoutType: NavigationSuiteType, navigationSuiteColors: NavigationSuiteColors, state: NavigationSuiteScaffoldState, content: @Composable () -> Unit )` XR-specific Navigation Suite Scaffold that wraps its content in a `SpatialPanel`.
`Unit`	`@ExperimentalMaterial3ExpressiveApi @ExperimentalMaterial3XrApi @Composable ShortNavigationBar( modifier: Modifier, containerColor: Color, contentColor: Color, content: @Composable () -> Unit )` XR-specific Material Design short navigation bar.
`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`.
`Unit`	`@ExperimentalMaterial3ExpressiveApi @ExperimentalMaterial3XrApi @Composable VerticalFloatingToolbar( expanded: Boolean, floatingActionButton: @Composable () -> Unit, modifier: Modifier, colors: FloatingToolbarColors, contentPadding: PaddingValues, floatingActionButtonPosition: FloatingToolbarVerticalFabPosition, content: @Composable ColumnScope.() -> Unit )` XR-specific Vertical Floating Toolbar that displays content in a `Column` in an end-aligned `VerticalOrbiter` alongside an adjacent floating action button.
`Unit`	`@ExperimentalMaterial3ExpressiveApi @ExperimentalMaterial3XrApi @Composable VerticalFloatingToolbar( expanded: Boolean, modifier: Modifier, colors: FloatingToolbarColors, contentPadding: PaddingValues, scrollBehavior: FloatingToolbarScrollBehavior?, leadingContent: (@Composable ColumnScope.() -> Unit)?, trailingContent: (@Composable ColumnScope.() -> Unit)?, content: @Composable ColumnScope.() -> Unit )` XR-specific Vertical Floating Toolbar that displays content in a `Column` in an end-aligned `VerticalOrbiter`.

Top-level properties summary

`HorizontalOrbiterProperties`	`DefaultHorizontalFloatingToolbarOrbiterProperties` The default `HorizontalOrbiterProperties` used by `HorizontalFloatingToolbar` if none is specified in `LocalHorizontalFloatingToolbarOrbiterProperties`.
`HorizontalOrbiterProperties`	`@ExperimentalMaterial3XrApi DefaultNavigationBarOrbiterProperties` The default `HorizontalOrbiterProperties` used by `NavigationBar` if none is specified in `LocalNavigationBarOrbiterProperties`.
`VerticalOrbiterProperties`	`@ExperimentalMaterial3XrApi DefaultNavigationRailOrbiterProperties` The default `VerticalOrbiterProperties` used by `NavigationRail` if none is specified in `LocalNavigationRailOrbiterProperties`.
`HorizontalOrbiterProperties`	`@ExperimentalMaterial3XrApi DefaultSingleRowTopAppBarOrbiterProperties` The default `HorizontalOrbiterProperties` used by XR `TopAppBar` if none is specified in `LocalSingleRowTopAppBarOrbiterProperties`.
`HorizontalOrbiterProperties`	`@ExperimentalMaterial3XrApi DefaultTwoRowsTopAppBarOrbiterProperties` The default `HorizontalOrbiterProperties` used by XR `TopAppBar` if none is specified in `LocalTwoRowsTopAppBarOrbiterProperties`.
`VerticalOrbiterProperties`	`DefaultVerticalFloatingToolbarOrbiterProperties` The default `VerticalOrbiterProperties` used by `VerticalFloatingToolbar` if none is specified in `LocalVerticalFloatingToolbarOrbiterProperties`.
`ProvidableCompositionLocal<HorizontalOrbiterProperties>`	`LocalHorizontalFloatingToolbarOrbiterProperties` The `HorizontalOrbiterProperties` used by `HorizontalFloatingToolbar`.
`ProvidableCompositionLocal<HorizontalOrbiterProperties>`	`@ExperimentalMaterial3XrApi LocalNavigationBarOrbiterProperties` The `HorizontalOrbiterProperties` used by `NavigationBar`.
`ProvidableCompositionLocal<VerticalOrbiterProperties>`	`@ExperimentalMaterial3XrApi LocalNavigationRailOrbiterProperties` The `VerticalOrbiterProperties` used by `NavigationRail`.
`ProvidableCompositionLocal<HorizontalOrbiterProperties>`	`@ExperimentalMaterial3XrApi LocalShortNavigationBarOrbiterProperties` The `HorizontalOrbiterProperties` used by `ShortNavigationBar`.
`ProvidableCompositionLocal<HorizontalOrbiterProperties>`	`@ExperimentalMaterial3XrApi LocalSingleRowTopAppBarOrbiterProperties` The `HorizontalOrbiterProperties` used by XR `TopAppBar`.
`ProvidableCompositionLocal<HorizontalOrbiterProperties>`	`@ExperimentalMaterial3XrApi LocalTwoRowsTopAppBarOrbiterProperties` The `HorizontalOrbiterProperties` used by XR `TopAppBar`.
`ProvidableCompositionLocal<VerticalOrbiterProperties>`	`LocalVerticalFloatingToolbarOrbiterProperties` The `VerticalOrbiterProperties` used by `VerticalFloatingToolbar`.

Top-level functions

BasicAlertDialog

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
@Composable
fun BasicAlertDialog(
    onDismissRequest: () -> Unit,
    properties: SpatialDialogProperties = SpatialDialogProperties(),
    content: @Composable () -> Unit
): Unit

Basic alert dialog dialog.

XR-specific Alert dialog that shows a basic alert dialog in a SpatialDialog.

Dialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.

This basic alert dialog expects an arbitrary content that is defined by the caller. Note that your content will need to define its own styling.

Parameters
`onDismissRequest: () -> Unit`	called when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the dismiss button is clicked.
`properties: SpatialDialogProperties = SpatialDialogProperties()`	typically platform specific properties to further configure the dialog.
`content: @Composable () -> Unit`	the content of the dialog

EnableXrComponentOverrides

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@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.

HorizontalFloatingToolbar

Artifact: androidx.xr.compose.material3:material3

View Source

@ExperimentalMaterial3XrApi
@ExperimentalMaterial3ExpressiveApi
@Composable
fun HorizontalFloatingToolbar(
    expanded: Boolean,
    floatingActionButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
    contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
    floatingActionButtonPosition: FloatingToolbarHorizontalFabPosition = FloatingToolbarHorizontalFabPosition.End,
    content: @Composable RowScope.() -> Unit
): Unit

A floating toolbar that displays horizontally. The bar features its content within a Row, and an adjacent floating icon button. It can be positioned anywhere on the screen, floating above other content, and even in a Scaffold's floating action button slot. Its expanded flag controls the visibility of the actions with a slide animations.

Note: This component will stay expanded to maintain the toolbar visibility for users with touch exploration services enabled (e.g., TalkBack).

In case the toolbar is aligned to the right or the left of the screen, you may apply a FloatingToolbarDefaults.floatingToolbarVerticalNestedScroll Modifier to update the expanded state when scrolling occurs, as this sample shows:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.FloatingToolbarDefaults
import androidx.compose.material3.FloatingToolbarDefaults.ScreenOffset
import androidx.compose.material3.FloatingToolbarDefaults.floatingToolbarVerticalNestedScroll
import androidx.compose.material3.FloatingToolbarExitDirection.Companion.Bottom
import androidx.compose.material3.FloatingToolbarExitDirection.Companion.End
import androidx.compose.material3.HorizontalFloatingToolbar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
import androidx.compose.ui.unit.dp

var expanded by rememberSaveable { mutableStateOf(true) }
val vibrantColors = FloatingToolbarDefaults.vibrantFloatingToolbarColors()
Scaffold { innerPadding ->
    Box(Modifier.padding(innerPadding)) {
        Column(
            Modifier.fillMaxWidth()
                .padding(horizontal = 16.dp)
                // Apply a floatingToolbarVerticalNestedScroll Modifier to the Column to toggle
                // the expanded state of the HorizontalFloatingToolbar.
                .floatingToolbarVerticalNestedScroll(
                    expanded = expanded,
                    onExpand = { expanded = true },
                    onCollapse = { expanded = false },
                )
                .verticalScroll(rememberScrollState())
        ) {
            Text(text = remember { LoremIpsum().values.first() })
        }
        HorizontalFloatingToolbar(
            expanded = expanded,
            floatingActionButton = {
                // Match the FAB to the vibrantColors. See also StandardFloatingActionButton.
                FloatingToolbarDefaults.VibrantFloatingActionButton(
                    onClick = { /* doSomething() */ }
                ) {
                    Icon(Icons.Filled.Add, "Localized description")
                }
            },
            modifier =
                Modifier.align(Alignment.BottomEnd)
                    .offset(x = -ScreenOffset, y = -ScreenOffset),
            colors = vibrantColors,
            content = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Person, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Edit, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "Localized description")
                }
            },
        )
    }
}

Note that if your app uses a Snackbar, it's best to position the toolbar in a Scaffold's FAB slot. This ensures the Snackbar appears above the toolbar, preventing any visual overlap or interference. See this sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingToolbarDefaults
import androidx.compose.material3.FloatingToolbarDefaults.floatingToolbarVerticalNestedScroll
import androidx.compose.material3.FloatingToolbarExitDirection.Companion.End
import androidx.compose.material3.HorizontalFloatingToolbar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
import androidx.compose.ui.unit.dp

var expanded by rememberSaveable { mutableStateOf(true) }
val vibrantColors = FloatingToolbarDefaults.vibrantFloatingToolbarColors()
Scaffold(
    floatingActionButton = {
        HorizontalFloatingToolbar(
            expanded = expanded,
            floatingActionButton = {
                // Match the FAB to the vibrantColors. See also StandardFloatingActionButton.
                FloatingToolbarDefaults.VibrantFloatingActionButton(
                    onClick = { expanded = !expanded }
                ) {
                    Icon(Icons.Filled.Add, "Localized description")
                }
            },
            colors = vibrantColors,
            content = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Person, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Edit, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "Localized description")
                }
            },
        )
    },
    // When setting this to `FabPosition.Start` remember to set a
    // `floatingActionButtonPosition = FloatingToolbarHorizontalFabPosition.Start` at the
    // HorizontalFloatingToolbar as well.
    floatingActionButtonPosition = FabPosition.End,
) { innerPadding ->
    Box(Modifier.padding(innerPadding)) {
        Column(
            Modifier.fillMaxWidth()
                .padding(horizontal = 16.dp)
                // Apply a floatingToolbarVerticalNestedScroll Modifier to the Column to toggle
                // the expanded state of the HorizontalFloatingToolbar.
                .then(
                    Modifier.floatingToolbarVerticalNestedScroll(
                        expanded = expanded,
                        onExpand = { expanded = true },
                        onCollapse = { expanded = false },
                    )
                )
                .verticalScroll(rememberScrollState())
        ) {
            Text(text = remember { LoremIpsum().values.first() })
        }
    }
}

Parameters
`expanded: Boolean`	whether the floating toolbar is expanded or not. In its expanded state, the FAB and the toolbar content are organized horizontally. Otherwise, only the FAB is visible.
`floatingActionButton: @Composable () -> Unit`	a floating action button to be displayed by the toolbar. It's recommended to use a `FloatingToolbarDefaults.VibrantFloatingActionButton` or `FloatingToolbarDefaults.StandardFloatingActionButton` that is styled to match the `colors`. Note that the provided FAB's size is controlled by the floating toolbar and animates according to its state. In case a custom FAB is provided, make sure it's set with a Modifier.fillMaxSize to be sized correctly.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this floating toolbar.
`colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors()`	the colors used for this floating toolbar. There are two predefined `FloatingToolbarColors` at `FloatingToolbarDefaults.standardFloatingToolbarColors` and `FloatingToolbarDefaults.vibrantFloatingToolbarColors` which you can use or modify. See also `floatingActionButton` for more information on the right FAB to use for proper styling.
`contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding`	the padding applied to the content of this floating toolbar.
`floatingActionButtonPosition: FloatingToolbarHorizontalFabPosition = FloatingToolbarHorizontalFabPosition.End`	the position of the floating toolbar's floating action button. By default, the FAB is placed at the end of the toolbar (i.e. aligned to the right in left-to-right layout, or to the left in right-to-left layout).
`content: @Composable RowScope.() -> Unit`	the main content of this floating toolbar. The default layout here is a `Row`, so content inside will be placed horizontally.

HorizontalFloatingToolbar

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
@ExperimentalMaterial3ExpressiveApi
@Composable
fun HorizontalFloatingToolbar(
    expanded: Boolean,
    modifier: Modifier = Modifier,
    colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
    contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
    scrollBehavior: FloatingToolbarScrollBehavior? = null,
    leadingContent: (@Composable RowScope.() -> Unit)? = null,
    trailingContent: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable RowScope.() -> Unit
): Unit

A horizontal floating toolbar displays navigation and key actions in a Row. It can be positioned anywhere on the screen and floats over the rest of the content.

Parameters
`expanded: Boolean`	whether the FloatingToolbar is in expanded mode, i.e. showing `leadingContent` and `trailingContent`. Note that the toolbar will stay expanded in case a touch exploration service (e.g., TalkBack) is active.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this FloatingToolbar.
`colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors()`	the colors used for this floating toolbar. There are two predefined `FloatingToolbarColors` at `FloatingToolbarDefaults.standardFloatingToolbarColors` and `FloatingToolbarDefaults.vibrantFloatingToolbarColors` which you can use or modify.
`contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding`	the padding applied to the content of this FloatingToolbar.
`scrollBehavior: FloatingToolbarScrollBehavior? = null`	a `FloatingToolbarScrollBehavior`. If null, this FloatingToolbar will not automatically react to scrolling.
`leadingContent: (@Composable RowScope.() -> Unit)? = null`	the leading content of this FloatingToolbar. The default layout here is a `Row`, so content inside will be placed horizontally. Only showing if `expanded` is true.
`trailingContent: (@Composable RowScope.() -> Unit)? = null`	the trailing content of this FloatingToolbar. The default layout here is a `Row`, so content inside will be placed horizontally. Only showing if `expanded` is true.
`content: @Composable RowScope.() -> Unit`	the main content of this FloatingToolbar. The default layout here is a `Row`, so content inside will be placed horizontally. TODO(kmost): Add a @sample tag and create a new sample project for XR.

NavigationBar

Artifact: androidx.xr.compose.material3:material3

View Source

@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 `NavigationBarItem`s

NavigationRail

Artifact: androidx.xr.compose.material3:material3

View Source

@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 `NavigationRailItem`s

NavigationSuiteScaffold

Artifact: androidx.xr.compose.material3:material3

View Source

@ExperimentalMaterial3XrApi
@Composable
fun NavigationSuiteScaffold(
    navigationSuiteItems: NavigationSuiteScope.() -> Unit,
    modifier: SubspaceModifier,
    layoutType: NavigationSuiteType,
    navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(),
    state: NavigationSuiteScaffoldState = rememberNavigationSuiteScaffoldState(),
    content: @Composable () -> Unit = {}
): Unit

XR-specific Navigation Suite Scaffold that wraps its content in a SpatialPanel.

The Navigation Suite Scaffold wraps the provided content and places the adequate provided navigation component on the screen according to the current NavigationSuiteType.

The navigation component can be animated to be hidden or shown via a NavigationSuiteScaffoldState.

Parameters
`navigationSuiteItems: NavigationSuiteScope.() -> Unit`	the navigation items to be displayed
`modifier: SubspaceModifier`	the `SubspaceModifier` to be applied to the navigation suite scaffold
`layoutType: NavigationSuiteType`	the current `NavigationSuiteType`
`navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors()`	`NavigationSuiteColors` that will be used to determine the container (background) color of the navigation component and the preferred color for content inside the navigation component
`state: NavigationSuiteScaffoldState = rememberNavigationSuiteScaffoldState()`	the `NavigationSuiteScaffoldState` of this navigation suite scaffold
`content: @Composable () -> Unit = {}`	the content of your screen

ShortNavigationBar

Artifact: androidx.xr.compose.material3:material3

View Source

@ExperimentalMaterial3ExpressiveApi
@ExperimentalMaterial3XrApi
@Composable
fun ShortNavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = ShortNavigationBarDefaults.containerColor,
    contentColor: Color = ShortNavigationBarDefaults.contentColor,
    content: @Composable () -> Unit
): Unit

XR-specific Material Design short navigation bar.

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

Short navigation bar with vertical items
image

Short navigation bar with horizontal items
image

The recommended configuration of the ShortNavigationBar in an XR environment is three to six ShortNavigationBarItems, each representing a singular destination.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationItemIconPosition
import androidx.compose.material3.ShortNavigationBar
import androidx.compose.material3.ShortNavigationBarArrangement
import androidx.compose.material3.ShortNavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)

Column {
    Text(
        "Note: this is configuration is better displayed in medium screen sizes.",
        Modifier.padding(16.dp),
    )

    Spacer(Modifier.height(32.dp))

    ShortNavigationBar(arrangement = ShortNavigationBarArrangement.Centered) {
        items.forEachIndexed { index, item ->
            ShortNavigationBarItem(
                iconPosition = NavigationItemIconPosition.Start,
                icon = {
                    Icon(
                        if (selectedItem == index) selectedIcons[index]
                        else unselectedIcons[index],
                        contentDescription = null,
                    )
                },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index },
            )
        }
    }
}

See ShortNavigationBarItem for configurations specific to each item, and not the overall ShortNavigationBar component.

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this navigation bar
`containerColor: Color = ShortNavigationBarDefaults.containerColor`	the color used for the background of this navigation bar. Use `Color.Transparent` to have no color
`contentColor: Color = ShortNavigationBarDefaults.contentColor`	the color for content inside this navigation bar.
`content: @Composable () -> Unit`	the content of this navigation bar, typically `ShortNavigationBarItem`s

ThreePaneScaffold

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@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.

VerticalFloatingToolbar

Artifact: androidx.xr.compose.material3:material3

View Source

@ExperimentalMaterial3ExpressiveApi
@ExperimentalMaterial3XrApi
@Composable
fun VerticalFloatingToolbar(
    expanded: Boolean,
    floatingActionButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
    contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
    floatingActionButtonPosition: FloatingToolbarVerticalFabPosition = FloatingToolbarVerticalFabPosition.Bottom,
    content: @Composable ColumnScope.() -> Unit
): Unit

XR-specific Vertical Floating Toolbar that displays content in a Column in an end-aligned VerticalOrbiter alongside an adjacent floating action button.

Note: This component will stay expanded to maintain the toolbar visibility for users with touch exploration services enabled (e.g., TalkBack).

Parameters
`expanded: Boolean`	whether the floating toolbar is expanded or not. In its expanded state, the FAB and the toolbar content are organized vertically. Otherwise, only the FAB is visible. Note that the toolbar will stay expanded in case a touch exploration service (e.g., TalkBack) is active.
`floatingActionButton: @Composable () -> Unit`	a floating action button to be displayed by the toolbar. It's recommended to use a `FloatingToolbarDefaults.VibrantFloatingActionButton` or `FloatingToolbarDefaults.StandardFloatingActionButton` that is styled to match the `colors`. Note that the provided FAB's size is controlled by the floating toolbar and animates according to its state. In case a custom FAB is provided, make sure it's set with a Modifier.fillMaxSize to be sized correctly.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this floating toolbar.
`colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors()`	the colors used for this floating toolbar. There are two predefined `FloatingToolbarColors` at `FloatingToolbarDefaults.standardFloatingToolbarColors` and `FloatingToolbarDefaults.vibrantFloatingToolbarColors` which you can use or modify. See also `floatingActionButton` for more information on the right FAB to use for proper styling.
`contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding`	the padding applied to the content of this floating toolbar.
`floatingActionButtonPosition: FloatingToolbarVerticalFabPosition = FloatingToolbarVerticalFabPosition.Bottom`	the position of the floating toolbar's floating action button. By default, the FAB is placed at the bottom of the toolbar (i.e. aligned to the bottom).
`content: @Composable ColumnScope.() -> Unit`	the main content of this floating toolbar. The default layout here is a `Column`, so content inside will be placed vertically.

VerticalFloatingToolbar

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3ExpressiveApi
@ExperimentalMaterial3XrApi
@Composable
fun VerticalFloatingToolbar(
    expanded: Boolean,
    modifier: Modifier = Modifier,
    colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
    contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
    scrollBehavior: FloatingToolbarScrollBehavior? = null,
    leadingContent: (@Composable ColumnScope.() -> Unit)? = null,
    trailingContent: (@Composable ColumnScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

XR-specific Vertical Floating Toolbar that displays content in a Column in an end-aligned VerticalOrbiter.

Note: This component will stay expanded to maintain the toolbar visibility for users with touch exploration services enabled (e.g., TalkBack).

Parameters
`expanded: Boolean`	whether the FloatingToolbar is in expanded mode, i.e. showing `leadingContent` and `trailingContent`. Note that the toolbar will stay expanded in case a touch exploration service (e.g., TalkBack) is active.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this FloatingToolbar.
`colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors()`	the colors used for this floating toolbar. There are two predefined `FloatingToolbarColors` at `FloatingToolbarDefaults.standardFloatingToolbarColors` and `FloatingToolbarDefaults.vibrantFloatingToolbarColors` which you can use or modify.
`contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding`	the padding applied to the content of this FloatingToolbar.
`scrollBehavior: FloatingToolbarScrollBehavior? = null`	a `FloatingToolbarScrollBehavior`. If null, this FloatingToolbar will not automatically react to scrolling. Note that the toolbar will not react to scrolling in case a touch exploration service (e.g., TalkBack) is active.
`leadingContent: (@Composable ColumnScope.() -> Unit)? = null`	the leading content of this FloatingToolbar. The default layout here is a `Column`, so content inside will be placed vertically. Only showing if `expanded` is true.
`trailingContent: (@Composable ColumnScope.() -> Unit)? = null`	the trailing content of this FloatingToolbar. The default layout here is a `Column`, so content inside will be placed vertically. Only showing if `expanded` is true.
`content: @Composable ColumnScope.() -> Unit`	the main content of this FloatingToolbar. The default layout here is a `Column`, so content inside will be placed vertically.

Top-level properties

DefaultHorizontalFloatingToolbarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

val DefaultHorizontalFloatingToolbarOrbiterProperties: HorizontalOrbiterProperties

The default HorizontalOrbiterProperties used by HorizontalFloatingToolbar if none is specified in LocalHorizontalFloatingToolbarOrbiterProperties.

DefaultNavigationBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val DefaultNavigationBarOrbiterProperties: HorizontalOrbiterProperties

The default HorizontalOrbiterProperties used by NavigationBar if none is specified in LocalNavigationBarOrbiterProperties.

DefaultNavigationRailOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val DefaultNavigationRailOrbiterProperties: VerticalOrbiterProperties

The default VerticalOrbiterProperties used by NavigationRail if none is specified in LocalNavigationRailOrbiterProperties.

DefaultSingleRowTopAppBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val DefaultSingleRowTopAppBarOrbiterProperties: HorizontalOrbiterProperties

The default HorizontalOrbiterProperties used by XR TopAppBar if none is specified in LocalSingleRowTopAppBarOrbiterProperties.

DefaultTwoRowsTopAppBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val DefaultTwoRowsTopAppBarOrbiterProperties: HorizontalOrbiterProperties

The default HorizontalOrbiterProperties used by XR TopAppBar if none is specified in LocalTwoRowsTopAppBarOrbiterProperties.

DefaultVerticalFloatingToolbarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

val DefaultVerticalFloatingToolbarOrbiterProperties: VerticalOrbiterProperties

The default VerticalOrbiterProperties used by VerticalFloatingToolbar if none is specified in LocalVerticalFloatingToolbarOrbiterProperties.

LocalHorizontalFloatingToolbarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

val LocalHorizontalFloatingToolbarOrbiterProperties: ProvidableCompositionLocal<HorizontalOrbiterProperties>

The HorizontalOrbiterProperties used by HorizontalFloatingToolbar.

LocalNavigationBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val LocalNavigationBarOrbiterProperties: ProvidableCompositionLocal<HorizontalOrbiterProperties>

The HorizontalOrbiterProperties used by NavigationBar.

LocalNavigationRailOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val LocalNavigationRailOrbiterProperties: ProvidableCompositionLocal<VerticalOrbiterProperties>

The VerticalOrbiterProperties used by NavigationRail.

LocalShortNavigationBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val LocalShortNavigationBarOrbiterProperties: ProvidableCompositionLocal<HorizontalOrbiterProperties>

The HorizontalOrbiterProperties used by ShortNavigationBar.

LocalSingleRowTopAppBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val LocalSingleRowTopAppBarOrbiterProperties: ProvidableCompositionLocal<HorizontalOrbiterProperties>

The HorizontalOrbiterProperties used by XR TopAppBar.

LocalTwoRowsTopAppBarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

@ExperimentalMaterial3XrApi
val LocalTwoRowsTopAppBarOrbiterProperties: ProvidableCompositionLocal<HorizontalOrbiterProperties>

The HorizontalOrbiterProperties used by XR TopAppBar.

LocalVerticalFloatingToolbarOrbiterProperties

Artifact: androidx.xr.compose.material3:material3

View Source

Added in 1.0.0-alpha10

val LocalVerticalFloatingToolbarOrbiterProperties: ProvidableCompositionLocal<VerticalOrbiterProperties>

The VerticalOrbiterProperties used by VerticalFloatingToolbar.