Implementar o Material Design para XR

O Material Design oferece componentes e layouts que se adaptam a XR. Usando a biblioteca Material 3, os componentes e os layouts adaptáveis são aprimorados com comportamentos espaciais da interface.

É possível adaptar sua implementação atual do M3 adicionando o wrapper EnableXrComponentOverrides.

Usar EnableXrComponentOverrides para adaptar seu app

Toda a interface do Compose M3 dentro do wrapper EnableXrComponentOverrides será adaptada em dispositivos XR. Esse wrapper permite que você escolha os componentes que quer excluir desse comportamento.

Adicione o wrapper EnableXrComponentOverrides para adaptar seu app ao Material Design para XR.

A barra de navegação em qualquer layout do Compose, incluindo NavigationSuiteScaffold, será adaptada automaticamente ao XR Orbiter. Para mais informações, leia as diretrizes do Material Design.

Coluna de navegação não espacializada
Coluna de navegação espacializada (adaptada para XR)

A barra de navegação em qualquer layout do Compose, incluindo NavigationSuiteScaffold, será adaptada automaticamente ao orbitador de XR. Para mais informações, leia as diretrizes do Material Design.

Barra de navegação não espacializada
Barra de navegação espacializada (adaptada para RV)

Layout de detalhes e listas para XR

Os layouts adaptáveis do Compose Material 3 no XR têm um mapeamento 1:1 em que cada painel é colocado no próprio painel espacial do XR. Saiba mais sobre ListDetailPaneScaffold e as diretrizes de design adaptativo.

ListDetailPaneScaffold não espacializado
ListDetailPaneScaffold espacializado (adaptado para XR)

Suporte ao layout do painel para XR

Os layouts adaptáveis do Compose Material 3 no XR têm um mapeamento 1:1 em que cada painel é colocado no próprio painel espacial do XR. Saiba mais sobre SupportingPaneScaffold e as diretrizes de design adaptativo.

SupportingPaneScaffold não espacializado
SupportingPaneScaffold espacializado (adaptado para XR)

Comece a projetar com o kit de design do Material 3 para o Figma

Colagem de elementos do Kit de design do Material 3

Faça o download do kit de design do Material 3 para começar

Veja também