Implementa Material Design para tu IU espacial

Material Design proporciona componentes y diseños para la realidad extendida. Con la biblioteca de Material 3, los diseños adaptables y la biblioteca de Material 3 de Compose para XR, puedes compilar comportamientos de IU espacial en tu app de Compose.

Agrega la biblioteca de Material 3 de Compose para XR a las dependencias de tu app para usar Material 3 para componentes de XR o coloca componentes estándar de Material 3 directamente dentro de Jetpack Compose para contenedores de XR, como Orbiter, SpatialDialog y SpatialPanel.

Usa componentes de Material 3 para XR

La biblioteca androidx.xr.compose.material3 proporciona componentes de Material 3 para XR para patrones de IU espacial comunes, como rieles y barras de navegación, barras de la app superiores, barras de herramientas flotantes, diálogos, diseños de lista-detalles y un botón de activación para alternar entre el espacio principal y el espacio completo. Los elementos de componibilidad Spatial* espacializados de esta biblioteca son experimentales y requieren que se habiliten con @OptIn(ExperimentalMaterial3XrApi::class).

Verifica LocalSpatialCapabilities.current.isSpatialUiEnabled para renderizar componentes de Material 3 para XR cuando la IU espacial está habilitada y componentes estándar de Material 3 cuando la IU espacial no está habilitada. Para obtener más información, consulta Cómo verificar las capacidades espaciales.

Riel de navegación

Usa SpatialNavigationRail o SpatialWideNavigationRail para mostrar un riel de navegación de Material 3 en un Orbiter alineado al inicio cuando la IU espacial está habilitada. Para obtener más información, consulta los lineamientos de Material Design.

Barra de navegación

Usa SpatialNavigationBar o SpatialShortNavigationBar para mostrar una barra de navegación de Material 3 en un Orbiter alineado en la parte inferior cuando la IU espacial esté habilitada. Para obtener más información, consulta los lineamientos de Material Design.

Diálogos

Usa SpatialBasicAlertDialog para mostrar un diálogo de alerta básico dentro de un SpatialDialog con elevación espacial o une el contenido del diálogo estándar de Material 3 directamente en SpatialDialog.

Para obtener más información, consulta Diálogos y los lineamientos de diseño adaptable.

Barras superiores de la app

Usa SpatialTopAppBar o SpatialTwoRowsTopAppBar para mostrar una barra superior de la app de Material 3 dentro de un Orbiter alineado en la parte superior cuando la IU espacial esté habilitada.

Para obtener más información, consulta Barras superiores de la app y los lineamientos de diseño adaptable.

Diseño de lista-detalles para realidad extendida

Usa SpatialListDetailPaneScaffold cuando la IU espacial esté habilitada para mostrar un diseño de lista-detalles adaptativo de Material 3 en el que cada panel se coloque dentro de su propio SpatialPanel. Cuando la IU espacial no esté habilitada, usa ListDetailPaneScaffold. Para obtener más información, consulta Diseño de lista-detalles y los lineamientos de diseño adaptable.

Diseño del panel de asistencia para realidad extendida

Cuando la IU espacial esté habilitada, coloca el panel principal y el panel complementario en contenedores SpatialPanel separados dentro de un SpatialRow en un Subspace. Cuando la IU espacial no esté habilitada, usa SupportingPaneScaffold. Para obtener más información, consulta Panel de apoyo y los lineamientos de diseño adaptable.

Comienza a diseñar con el kit de diseño de Material 3 para Figma

Descarga el kit de diseño de Material 3 para comenzar

Consulta también

• Desarrolla IU con Jetpack Compose para realidad extendida
• Cómo pasar del espacio principal al espacio completo
• Lineamientos de diseño de la IU espacial