O Samsung Galaxy XR chegou, com tecnologia Android XR! Esta postagem faz parte da Semana de Destaques do Android XR, em que oferecemos recursos (postagens no blog, vídeos, exemplos de código e muito mais) para ajudar você a aprender, criar e preparar seus apps para o Android XR.

Com o lançamento do Samsung Galaxy XR , o primeiro dispositivo com tecnologia Android XR chegou oficialmente. Agora as pessoas podem aproveitar muitos dos apps favoritos da Google Play Store em uma dimensão totalmente nova: a terceira dimensão!

A terceira dimensão é espaçosa, com muito espaço para seus apps também. Comece hoje mesmo usando as ferramentas que funcionam para seu app. Por exemplo, você pode usar o SDK do Jetpack XR para criar experiências imersivas de realidade estendida usando ferramentas modernas de desenvolvimento para Android, como Kotlin e Compose.

Nesta postagem do blog, vamos contar nossa jornada ao trazer a fantasia do nosso amado app Androidify para XR e abordar os princípios básicos do que é necessário para trazer seus apps para XR também.

Um tour pelo Androidify

O Androidify é um app de código aberto que permite criar bots Android usando algumas das tecnologias mais recentes, como Gemini, CameraX, Navigation 3 e, claro, o Jetpack Compose. O Androidify foi inicialmente projetado para ter uma ótima aparência em smartphones, dispositivos dobráveis e tablets criando layouts adaptáveis.

O Androidify fica ótimo em vários formatos

Um pilar fundamental dos layouts adaptáveis são os elementos combináveis reutilizáveis. O Jetpack Compose ajuda você a criar componentes de interface do usuário pequenos que podem ser organizados de diferentes maneiras para criar experiências intuitivas, não importa o tipo de dispositivo usado. Na verdade, o Androidify é compatível com o Android XR sem nenhuma modificação no app.

O Androidify se adapta ao XR usando o layout responsivo para telas grandes sem mudanças no código

Os apps que não têm um tratamento especial para o Android XR podem ser multitarefas em uma janela de tamanho adequado e funcionar como em uma tela grande. Por isso, o Androidify já tem todos os recursos no Android XR sem precisar de mais trabalho. Mas não queríamos parar por aí. Decidimos ir além e criar um app diferenciado para XR, oferecendo uma experiência incrível aos nossos usuários de XR.

Como se orientar na realidade estendida

Vamos analisar os principais conceitos básicos do Android XR, começando pelos dois modos em que os apps podem ser executados: Espaço Compacto e Espaço Ampliado.

No Espaço Compacto, vários apps podem ser executados lado a lado para que os usuários possam realizar várias tarefas em diferentes janelas. Nesse sentido, é muito parecido com o modo janela para computador em um dispositivo Android de tela grande, mas no espaço virtual.

No Espaço Ampliado, o app não tem limites de espaço e pode usar todos os recursos espaciais do Android XR, como a interface espacial e o controle do ambiente virtual.

Embora possa parecer tentador fazer o app funcionar apenas no Espaço Ampliado, os usuários podem querer realizar várias tarefas com ele. Por isso, oferecer suporte aos dois promove uma experiência do usuário melhor.

Como criar para a nova dimensão do Androidify (em inglês)

Um app incrível começa com um ótimo design. Ivy Knight, defensora sênior de design no Android DevRel, assumiu a tarefa de pegar os designs atuais do Androidify e criar um novo design para XR. Ivy, é com você!

Projetar para XR exigiu uma abordagem exclusiva, mas ainda tinha muito em comum com o design para dispositivos móveis. Começamos pensando na contenção: como organizar e agrupar nossos elementos de interface no subespaço, mostrando claramente os limites ou implicando-os de forma sutil. Também aprendemos a usar todos os tamanhos de elementos da interface espacial, que são projetados para se ajustar e se mover em resposta ao usuário. Assim como fizemos com o Androidify, crie layouts adaptáveis para dividir seus layouts em partes para a UI espacial.

Como começar o design com o Espaço Compacto

Felizmente, o Android XR permite que você comece com o app como ele está hoje para o Espaço Compacto. Assim, podemos fazer a transição para os designs XR expandidos apenas adicionando uma barra de ferramentas de janela e um botão de transição para o Espaço Ampliado.

Também consideramos possíveis recursos de hardware e como o usuário interagiria com eles. Os layouts para dispositivos móveis do Androidify se adaptam a várias posturas, tamanhos de turmas e número de câmeras para oferecer mais opções de fotos. Seguindo esse modelo, também tivemos que adaptar o layout da câmera para dispositivos de headset. Também precisamos fazer ajustes para que o texto funcione, considerando a proximidade da interface com o usuário.

Como projetar para a mudança maior para o Espaço Ampliado

O Espaço Ampliado foi a maior mudança, mas nos deu mais espaço criativo para adaptar nosso design. 

O Androidify usa contenção visual, ou painéis, para agrupar recursos com um plano de fundo e um contorno, como o painel "Tirar ou escolher uma foto". Também usamos componentes como a barra de apps da parte de cima da tela para criar um contêiner natural ao enquadrar os outros painéis. Por fim, o containment intrínseco é sugerido pela proximidade de alguns elementos a outros, como o botão inferior "Iniciar transformação", que fica perto do painel "Escolher a cor do meu bot".

Painéis espaciais para facilitar a separação. Para decidir como adaptar seus designs para dispositivos móveis em painéis espaciais, remova as superfícies começando pela mais distante e avançando. Veja quantos planos de fundo você consegue remover e o que resta. Depois de fazer esse exercício para o Androidify, o que restou foi o grande rabisco verde do Android. O rabisco não apenas serviu como um momento de branding e plano de fundo, mas também como uma âncora para o conteúdo no espaço 3D.

Estabelecer essa âncora facilitou imaginar como os elementos poderiam se mover ao redor dela e como usar a proximidade para criar e traduzir o restante da experiência do usuário.

Outras dicas de design para ajudar seu app a ficar espacial

• Deixe as coisas sem contenção: separe os componentes e dê a eles um espaço real (espacial). Está na hora de dar um espaço para esses elementos de interface.
• Remover superfícies: oculte o plano de fundo e veja o que isso faz com seus designs.
• Motivar com movimento: como você está usando transições no seu app? Use esse personagem para imaginar seu app entrando na RV.
• Escolha uma âncora: não perca seus usuários no espaço. Ter um elemento que ajude a coletar ou fundamentar a interface.

Para saber mais sobre padrões de design de interface do usuário de XR, confira Design para Android XR no Android Developers.

Princípios básicos da interface espacial

Agora que falamos sobre a experiência de Ivy adaptando a mentalidade dela ao projetar o Androidify para XR, vamos falar sobre o desenvolvimento de interfaces espaciais. Desenvolver uma interface espacial com o SDK do Jetpack XR é familiar para quem está acostumado a trabalhar com ferramentas e bibliotecas modernas do Android. Você vai encontrar conceitos que já conhece, como a criação de layouts com o Compose. Na verdade, os layouts espaciais são muito semelhantes aos layouts 2D que usam linhas, colunas e espaçadores:

Esses elementos são organizados em SpatialRows e SpatialColumns

Os elementos espaciais mostrados aqui são elementos combináveis SpatialPanel, que permitem mostrar conteúdo 2D, como texto, botões e vídeos.

  Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

Um SpatialPanel é um elemento combinável de subespaço. Os elementos combináveis do Subspace precisam estar contidos em um Subspace e são modificados por objetos SubspaceModifier. Os subespaços podem ser colocados em qualquer lugar na hierarquia da interface do app e só podem conter elementos combináveis de subespaço.Os objetos SubspaceModifier também são muito semelhantes aos objetos Modifier: eles controlam parâmetros como dimensionamento e posicionamento.

Um Orbiter  pode ser anexado a um SpatialPanel e se mover com o conteúdo a que está anexado. Elas são usadas com frequência para fornecer controles contextuais sobre o conteúdo a que estão anexadas, dando a ele o foco principal. Eles podem ser colocados em qualquer um dos quatro lados do conteúdo, a uma distância configurável.

Há muitos outros elementos de interface espacial, mas esses são os principais que usamos para criar layouts espaciais para o Androidify.

Começar a desenvolver para XR

Vamos começar com a configuração do projeto. Adicionamos a dependência do Jetpack XR Compose, que pode ser encontrada na página Dependências do Jetpack XR.

Adicionamos o código de um botão que faz a transição do usuário para o Espaço Ampliado, começando com a detecção da capacidade de fazer isso:

  @Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

Em seguida, criamos um novo componente de botão que usa o ícone "Expandir conteúdo" nos layouts atuais e atribuímos a ele um comportamento onClick:

  @Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

Agora, clicar nesse botão mostra apenas o layout médio no espaço ampliado. Podemos verificar os recursos espaciais e determinar se a interface espacial pode ser mostrada. Nesse caso, vamos mostrar nosso novo layout espacial:

  @Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

Implementar o design da tela inicial

Vamos voltar ao design espacial da tela inicial no Espaço Ampliado para entender como ele foi implementado.

Identificamos dois elementos SpatialPanel aqui: um painel em que o card de vídeo está à direita e outro que contém a interface principal. Por fim, há um Orbiter anexado à parte de cima. Vamos começar com o painel do player de vídeo:

  @Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

Simplesmente reutilizamos o componente VideoPlayer 2D dos layouts regulares em um SpatialPanel sem outras mudanças. Veja como ele aparece sozinho:

O painel de conteúdo principal seguiu a mesma história: reutilizamos o conteúdo do painel médio em um SpatialPanel.

  SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

Atribuímos a esse painel uma ResizePolicy, que dá a ele algumas alças perto das bordas para que o usuário possa redimensioná-lo. Ele também tem uma MovePolicy, que permite ao usuário arrastá-lo.

Colocar os dois no mesmo subespaço os torna independentes um do outro. Por isso, transformamos o painel VideoPlayer em um filho do painel de conteúdo principal. Isso faz com que o painel VideoPlayer se mova quando o painel de conteúdo principal é arrastado por uma relação pai-filho.

  @Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

Foi assim que fizemos a primeira tela.

Passando para as outras telas

Também vou falar brevemente sobre algumas das outras telas, destacando considerações específicas feitas para cada uma delas.

Aqui, usamos elementos combináveis SpatialRow e SpatialColumn para criar um layout que se encaixa no espaço de visualização recomendado, reutilizando componentes do layout médio.

Tela de resultados no Espaço Ampliado: um bot gerado com um comando: boné de beisebol vermelho, óculos de sol aviador, camiseta azul-claro, shorts xadrez vermelho e branco, chinelos verdes e segurando uma raquete de tênis.

A tela de resultados mostra as cotações sem custo financeiro usando um efeito de difusão, permitindo que elas desapareçam perto das bordas da tela. Ele também usa uma transição 3D real ao visualizar a entrada usada, virando a imagem no espaço.

Publicar na Google Play Store

Agora que o app está pronto para XR com os layouts espaciais, lançamos ele na Google Play Store. Há uma última mudança importante que fizemos no arquivo AndroidManifest.xml do app:

  <!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

Assim, a Google Play Store sabe que o app tem recursos diferenciados de XR e mostra um selo informando aos usuários que o app foi criado pensando em XR:

Ao fazer upload da versão, não precisamos de etapas especiais para lançar para XR: o mesmo app é distribuído normalmente para usuários na faixa para dispositivos móveis e para usuários em um dispositivo XR. No entanto, você pode adicionar capturas de tela específicas de XR do seu app ou até mesmo fazer upload de uma prévia imersiva usando um recurso de vídeo espacial. Em dispositivos Android XR, a Google Play Store mostra automaticamente uma prévia imersiva em 3D, permitindo que os usuários experimentem a profundidade e a escala do conteúdo antes de instalar o app.

Comece a criar suas próprias experiências hoje mesmo

O Androidify é um ótimo exemplo de como espacializar um app 2D do Jetpack Compose. Hoje, mostramos todo o processo de desenvolvimento de uma interface espacial para o Androidify, desde o design até o código e a publicação. Modificamos os designs atuais para trabalhar com paradigmas espaciais, usamos elementos combináveis SpatialPanel e Orbiter para criar layouts espaciais que aparecem quando o usuário entra no Espaço Ampliado e, por fim, lançamos a nova versão do app na Google Play Store.

Esperamos que esta postagem do blog tenha ajudado você a entender como trazer seus próprios apps para o Android XR. Confira mais alguns links que podem ajudar:

• Confira o código-fonte do Androidify e crie seu próprio robô usando o Androidify no Google Play.
• Comece a usar nossa documentação para desenvolvedores e saiba mais sobre o Jetpack Compose para XR.
• Baixe o emulador do Android XR e teste seu próprio app.