Implementa Material Design para XR

Material Design proporciona componentes y diseños que se adaptan a XR. Con la biblioteca de Material 3 existente, los componentes y los diseños adaptables se mejoran con comportamientos de IU espaciales.

Puedes adaptar tu implementación actual de M3 agregando el wrapper EnableXrComponentOverrides. Agrega la biblioteca Material3 de XR Compose a las dependencias de tu app.

Usa EnableXrComponentOverrides para adaptar tu app existente

Toda la IU de Compose de M3 dentro del wrapper EnableXrComponentOverrides se adaptará en dispositivos XR. Este wrapper te permite elegir los componentes que deseas excluir de este comportamiento.

Agrega el wrapper EnableXrComponentOverrides para adaptar tu app a Material Design para XR.

El riel de navegación en cualquier diseño de Compose, incluido NavigationSuiteScaffold, se adaptará automáticamente a XR Orbiter. Para obtener más información, lee los Lineamientos de Material Design.

Riel de navegación no espacializado

Riel de navegación no espacializado

Riel de navegación espacializado (adaptado a XR)

Riel de navegación espacializado (adaptado a XR)

La barra de navegación en cualquier diseño de Compose, incluido NavigationSuiteScaffold, se adaptará automáticamente al orbitador de XR. Para obtener más información, lee los Lineamientos de Material Design.

Barra de navegación no espacializada

Barra de navegación no espacializada

Barra de navegación espacializada (adaptada a XR)

Barra de navegación espacializada (adaptada a XR)

Diálogos

Un BasicAlertDialog se adaptará a la XR y agregará elevación al componente.

Obtén más información sobre los diálogos y los lineamientos de diseño adaptable.

Diálogo no espacializado

Diálogo no espacializado

Diálogo espacializado (adaptado a XR)

Diálogo espacializado (adaptado a XR)

Barras superiores de la app

Un TopAppBar se adaptará automáticamente al orbitador de XR.

Obtén más información sobre las barras superiores de la app y los lineamientos de diseño adaptable.

Barra superior de la app no espacializada

Barra superior de la app no espacializada

Barra superior de la app espacializada (adaptada a XR)

Barra superior de la app espacializada (adaptada a XR)

Diseño de lista-detalles para XR

Los diseños adaptables de Material 3 de Compose en XR tienen una asignación 1:1 en la que cada panel se coloca dentro de su propio panel espacial de XR. Obtén más información sobre ListDetailPaneScaffold y los lineamientos de diseño adaptable.

ListDetailPaneScaffold no espacializado

ListDetailPaneScaffold no espacializado

ListDetailPaneScaffold espacializado (adaptado a XR)

ListDetailPaneScaffold espacializado (adaptado a XR)

Diseño de panel complementario para XR

Los diseños adaptables de Material 3 de Compose en XR tienen una asignación 1:1 en la que cada panel se coloca dentro de su propio panel espacial de XR. Obtén más información sobre SupportingPaneScaffold y los lineamientos de diseño adaptable.

SupportingPaneScaffold no espacializado

SupportingPaneScaffold no espacializado

SupportingPaneScaffold espacializado (adaptado a XR)

SupportingPaneScaffold espacializado (adaptado a XR)

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

Collage de elementos del kit de diseño de Material 3

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

Consulta también