Transforme seu app Android em 3D com XR

​​

O app Android 2D para dispositivos móveis ou telas grandes funciona por padrão no Android XR, exibido como um painel 2D no espaço 3D. É possível adicionar recursos imersivos de RA para melhorar seu app Android 2D, fazendo a transição de uma experiência de tela plana para um ambiente 3D dinâmico.

Considere estes princípios importantes ao levar seu app Android para a XR.

  • Recursos espaciais: o Android XR oferece uma variedade de recursos espaciais disponíveis para seu app, mas você não precisa implementar todos os recursos. Implemente estrategicamente aqueles que complementam a hierarquia visual, os layouts e as jornadas do usuário do seu app. Considere incorporar ambientes personalizados e vários painéis para criar uma experiência verdadeiramente imersiva. Consulte as orientações de design de interface espacial para determinar a integração ideal de elementos espaciais.
  • Interface adaptável: a XR oferece a flexibilidade para projetar uma interface espaçosa que se adapta perfeitamente a uma tela infinita e janelas redimensionáveis. Uma das considerações mais importantes é usar nossas orientações de design para telas grandes para otimizar o layout do app para esse ambiente amplo. Mesmo que seu app seja exclusivo para dispositivos móveis, você ainda pode usar ambientes atraentes para melhorar a experiência do usuário, mas uma interface otimizada para telas grandes é uma das melhores maneiras de otimizar seu app para o Android XR.
  • Framework de interface: recomendamos criar a interface com o Jetpack Compose para XR. Se o app atualmente depende de visualizações, consulte trabalhar com visualizações em XR para saber mais sobre como aproveitar a interoperabilidade do Compose ao trabalhar com visualizações ou avaliar o trabalho diretamente com a biblioteca SceneCore do Jetpack.
  • Publicação na Play Store: para garantir que seu app com recursos de XR seja detectável na Play Store, faça o seguinte: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Dicas para converter componentes da interface 2D em 3D

Seguir essas dicas pode fazer uma grande diferença na otimização do app para XR.

  • Priorize a compatibilidade com telas grandes: verifique se a interface do app segue os princípios de design para telas grandes para garantir a legibilidade ideal de texto e conteúdo em ambientes XR amplos.
  • Usar recursos espaciais de forma estratégica: identifique momentos importantes na jornada do usuário do app em que a incorporação de recursos espaciais vai melhorar a experiência e aproveitar os recursos exclusivos da plataforma.
  • Coloque painéis espaciais pensando no conforto do usuário: ao projetar seu layout com painéis espaciais, posicione-os a uma distância confortável do usuário para evitar que ele se sinta sobrecarregado ou muito próximo.
  • Usar a interface adaptativa para layouts espaciais: use conceitos de interface adaptativa, como painéis e revelação progressiva, para decompor o layout em vários painéis espaciais, otimizando a apresentação de informações.
  • Usar orbiters para elementos e padrões persistentes: reserve orbiters para elementos de UX persistentes e contextuais, como navegação e controles. Limite o uso de orbitadores para manter a clareza e evitar a desordem.
  • Use a elevação com cuidado: aplique a elevação espacial a componentes temporários que permanecem fixos e não rolam com o conteúdo. Evite aumentar áreas grandes para evitar desconforto visual e manter uma hierarquia visual equilibrada.
  • Criar com o Material Design: se você estiver criando com a versão Alfa mais recente dos componentes do Material Design e layouts adaptáveis, adicione o wrapper "EnableXrComponentOverrides" para ativar as mudanças de XR no app. Leia nossa documentação do Material Design para XR para saber mais.

O Jetpack Compose para XR apresenta novos componentes que gerenciam melhorias de XR para que você não precise fazer isso. Por exemplo, é possível usar SpatialPopup e SpatialDialog para substituir as versões 2D. Esses componentes aparecem como uma interface 2D típica quando a interface espacial não está disponível e mostram a interface espacial do app quando possível. Usá-los é tão simples quanto fazer uma mudança de uma linha para substituir o elemento de IU 2D correspondente.

Converter uma caixa de diálogo em SpatialDialog

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

Converter um pop-up em SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

Elevar elementos da interface 2D

Quando você quer elevar a interface com um controle mais refinado, fornecemos SpatialElevation para permitir que você eleve qualquer elemento combinável no app a um nível acima do painel espacial no eixo Z definido com SpatialElevationLevel. Isso ajuda a chamar a atenção do usuário, cria uma hierarquia melhor e melhora a legibilidade, conforme mostrado no exemplo a seguir.

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

Pontos principais sobre o código

  • Não espacialize ou eleve grandes áreas e planos, como folhas inferiores e laterais.
  • Não eleve elementos da interface que podem ser rolados com o conteúdo.

Migrar componentes 2D para orbiters

Os orbitadores são elementos flutuantes que contêm controles para o conteúdo dentro dos painéis espaciais. Eles permitem que o conteúdo tenha mais espaço e dão aos usuários acesso rápido a recursos sem obstruir o conteúdo principal.

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

O exemplo de código abaixo mostra como migrar um componente de interface 2D para um orbitador.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

Pontos principais sobre orbitadores

  • Os orbitadores são componentes projetados para anexar elementos de interface a um painel espacial.
  • Consulte nossas orientações de design de apps Android XR para verificar quais elementos migrar para orbitadores e quais padrões evitar.
  • Recomendamos adaptar apenas alguns componentes de navegação, como a coluna de navegação, a barra de apps na parte de cima ou a barra de apps na parte de baixo.
  • Os orbitadores não aparecem quando a interface espacial não está ativada. Por exemplo, eles não vão aparecer no Espaço da casa ou em dispositivos como smartphones, tablets e dispositivos dobráveis.

Migrar componentes 2D para painéis espaciais

Os painéis espaciais são os elementos básicos da interface dos apps Android XR.

Os painéis servem como contêineres para elementos da interface, componentes interativos e conteúdo imersivo. Ao projetar, você pode adicionar componentes como orbitadores para controles do usuário e elevar espacialmente elementos da interface para chamar a atenção para interações específicas.

Pontos principais sobre o código

  • Consulte as orientações de design de apps de RA para Android para verificar quais elementos migrar para painéis e quais padrões evitar.
  • Siga as práticas recomendadas para posicionamento do painel espacial:
    • Os painéis precisam ser gerados no centro a 1,5 m dos olhos do usuário.
    • O conteúdo precisa aparecer no centro de 41° do campo de visão do usuário.
  • Os painéis permanecem no lugar enquanto o usuário se move. A ancoragem está disponível apenas para transmissão.
  • Use os cantos arredondados de 32 dp recomendados pelo sistema para painéis.
  • As áreas de toque precisam ter 56 dp e não podem ser menores que 48 dp.
  • Mantenha as proporções de contraste para facilitar a leitura, principalmente se você usar segundos planos transparentes.
  • Siga os princípios de cores do design do Android e use o sistema de cores do Material Design para implementar temas claros e escuros no app.
  • Use a API Spatial Panels com elementos de interface atuais.

Migrar a interface 2D para um único painel espacial

Por padrão, o app aparece com um único painel no Espaço doméstico. Aprenda a fazer a transição entre o espaço principal e o espaço completo. Para trazer esse conteúdo para o espaço total, use SpatialPanel.

Confira um exemplo de como fazer isso.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

Migrar a interface 2D para vários painéis espaciais

É possível usar um único painel espacial para a interface do app ou migrar a interface 2D para vários painéis espaciais. Se você optar por usar vários painéis para a interface do app, poderá posicionar e girar painéis (análogo ao layout da interface em 2D). Você vai começar com uma visão de design clara do que quer alcançar e, em seguida, poderá usar as APIs Spatial UI Layout (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) e modificadores de subespaço para posicionar e girar painéis. Há alguns padrões importantes que você vai querer evitar ao implementar vários painéis.

  • Evite sobrepor painéis que impeçam o usuário de ver informações críticas.
  • Evite sobrecarregar o usuário com painéis.
  • Evite colocar painéis em locais desconfortáveis ou imperceptíveis. Exemplo: painéis colocados atrás do usuário são difíceis de notar.
  • Para saber mais sobre o desenvolvimento da interface espacial, confira nossas orientações.
Conteúdo não espacializado
Controles de mídia espacializados (adaptados para XR) em um orbitador e conteúdo dividido em vários painéis espaciais
SpatialRow(curveRadius = 825.dp) {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

Verificar os recursos espaciais

Ao decidir se vai mostrar um elemento específico da interface, evite verificar dispositivos ou modos XR específicos. A verificação de dispositivos ou modos em vez de capabilities pode causar problemas quando as capabilities em um determinado dispositivo mudam com o tempo. Em vez disso, use LocalSpatialCapabilities.current.isSpatialUiEnabled para verificar diretamente os recursos de espacialização necessários, conforme mostrado no exemplo abaixo. Essa abordagem garante que o app se adapte corretamente a uma ampla gama de experiências de XR sem precisar de atualizações sempre que novos dispositivos são lançados ou os recursos são alterados.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

Usar ambientes para mudar o ambiente do usuário

Quando você quiser criar uma sensação de imersão no app mudando o ambiente do usuário, use os ambientes. Adicionar um ambiente no código é uma mudança simples que pode ser feita sem afetar significativamente a interface do app. Para mais informações sobre como definir ambientes, confira nossas orientações.

Adicionar modelos 3D

O conteúdo 3D pode ajudar a criar uma experiência mais imersiva e adicionar compreensão espacial. Assim como outros recursos espaciais e 3D, o app só pode mostrar modelos 3D quando o conteúdo 3D está ativado. Portanto, verifique se o app ainda oferece uma experiência incrível sem os objetos 3D adicionados.

Adicionar modelos 3D com o SceneViewer

Quando você quer apresentar modelos 3D aos usuários, há várias maneiras de abordar o problema. Quando você tem um glTF pronto para uso no servidor, a maneira mais simples é usar o SceneViewer XR. Para isso, crie uma intent explícita, que vai iniciar o aplicativo SceneViewer XR no dispositivo. Isso permite que o usuário visualize o objeto e o mova e redimensione livremente no ambiente.

Adicionar modelos 3D diretamente com o volume de entidades

Quando você quer mais controle sobre coisas como a posição do modelo 3D, o tamanho relativo ou animações detalhadas, é possível carregar um recurso glTF diretamente no app. Depois que o modelo 3D é carregado, você pode usar o elemento combinável Volume para envolver uma entidade de modelo glTF e aplicar modificadores de subespaço para controlar como ele é apresentado. O uso de volume permite posicionar de forma declarativa modelos 3D em relação à interface espacial. Para saber mais sobre como mostrar modelos 3D no app, consulte Criar, controlar e gerenciar entidades.