Transforme seu app Android em 3D com XR

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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 XR para aprimorar 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.

• Capacidades 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 da 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 expansivo. Mesmo que seu app seja exclusivo para dispositivos móveis, ainda é possível usar ambientes captivantes 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 depender de visualizações, consulte Como 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 Jetpack SceneCore.
• Publicação na Play Store: para garantir que seu app com recursos de XR seja detectável na Play Store, faça o seguinte:
  • Considere simplificar seu app removendo requisitos de recursos desnecessários.
  • Verifique se a publicação de RA do seu app está ativada no Google Play Console para evitar que ele seja excluído dos resultados da pesquisa da Play Store.

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: confira se a interface do app segue 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 os momentos mais importantes da 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 de forma eficaz 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 e layouts adaptáveis do Material Design, adicione o wrapper "EnableXrComponentOverrides" para ativar as mudanças de XR no app. Leia nossa documentação do Material Design para XR (link em inglês) para saber mais.

O Jetpack Compose for XR apresenta novos componentes que gerenciam os aprimoramentos 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 interface 2D correspondente.

Converter uma caixa de diálogo em SpatialDialog

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

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

Converter um pop-up em SpatialPopup

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

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

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()
}
SpatialElevation.kt

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 geralmente contêm controles com os quais o usuário pode interagir. Os orbitadores podem ser ancorados em painéis espaciais ou outras entidades, como layouts espaciais. Elas permitem que o conteúdo tenha mais espaço e dão aos usuários acesso rápido aos recursos sem obstruir o conteúdo principal.

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.Top
) {
    NavigationRail()
}
Orbiter.kt

Pontos principais sobre orbitadores

• Os orbitadores são componentes projetados para anexar elementos de interface atuais 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 aparecem no Espaço da casa ou em dispositivos como smartphones, tablets e dobráveis.

Migrar componentes 2D para painéis espaciais

Os painéis espaciais são os blocos de construção fundamentais 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 Android XR 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 Compacto. Saiba como fazer a transição entre o Espaço Compacto e o Espaço Ampliado. Para trazer esse conteúdo ao espaço completo, use SpatialPanel.

Confira um exemplo de como fazer isso.

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

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

Você pode 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ê deve 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.

SpatialRow {
    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()
    }
}
SpatialRow.kt

Verificar os capabilities 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 variedade de experiências de XR sem precisar de atualizações sempre que novos dispositivos surgirem ou os recursos mudarem.

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

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

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 conteúdo 3D

Conteúdo 3D, como modelos 3D e vídeos espaciais, pode ajudar a criar uma experiência mais imersiva e aumentar a compreensão espacial. O app só pode mostrar conteúdo 3D quando os recursos espaciais estão disponíveis. Por isso, verifique se os recursos espaciais estão disponíveis primeiro.

Consulte o guia adequado para adicionar modelos 3D, vídeo espacial ou áudio espacial.