Como levar o Androidify para XR com o SDK do Jetpack para XR

O Samsung Galaxy XR chegou, com tecnologia Android XR! Esta postagem faz parte da Semana de destaque do Android XR, em que oferecemos recursos (postagens de blog, vídeos, exemplos de código e muito mais) projetados 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!

A terceira dimensão é espaçosa e tem 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 para XR para criar experiências imersivas de XR usando ferramentas modernas de desenvolvimento Android, como Kotlin e Compose.

Nesta postagem do blog, vamos contar nossa jornada ao levar a fantasia do nosso amado app Androidify para XR e vamos abordar o básico do que é necessário para levar 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, Jetpack Compose. O Androidify foi inicialmente projetado para ter uma ótima aparência em smartphones, dobráveis e tablets, criando layouts adaptáveis.

O Androidify tem uma ótima aparência em vários formatos

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

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

Os apps que não têm tratamento especial para o Android XR podem ser multitarefas em uma janela de tamanho adequado e funcionar da mesma forma que em uma tela grande. Por isso, o Androidify já está totalmente disponível no Android XR sem trabalho adicional. Mas não queríamos parar por aí. Decidimos ir além e criar um app diferenciado para XR para oferecer uma experiência agradável aos nossos usuários de XR.

Como se orientar em XR

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 Windows de desktop 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 com que seu app seja executado apenas no Espaço Ampliado, os usuários podem querer realizar várias tarefas com ele. Por isso, oferecer suporte aos dois modos promove uma melhor experiência do usuário.

Como projetar para a nova dimensão do Androidify

Um app agradável começa com um ótimo design. Ivy Knight, defensora sênior de design no Android DevRel, assumiu a tarefa de criar designs para o Androidify e criar um novo design para XR. Ivy, é com você!

O design 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 sutilmente. Também aprendemos a adotar todos os tamanhos de elementos de interface espacial, que são destinados a 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 interface espacial.

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

Felizmente, o Android XR permite que você comece com o app como ele é 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 do 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 classe 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 para considerar 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 o espaço mais 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 uma contenção natural, enquadrando os outros painéis. Por fim, a contenção intrínseca é sugerida pela proximidade de determinados elementos a outros, como o botão inferior "Iniciar transformação", que está próximo ao painel "Escolher a cor do meu bot".

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

Estabelecer essa âncora facilitou a imaginação de como os elementos poderiam se mover ao redor dela e como poderíamos usar a proximidade para sair 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). É hora de dar um espaço para esses elementos de interface.
• Remova as superfícies: oculte o plano de fundo e veja o que isso faz com seus designs.
• Motive 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. Tenha um elemento que ajude a coletar ou aterrar a interface.

Para mais informações sobre padrões de design de interface XR, confira Design para Android XR na página Desenvolvedores Android.

Noções básicas de interface espacial

Agora que abordamos a experiência de Ivy ao adaptar 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 para XR deve parecer familiar se você estiver acostumado a trabalhar com ferramentas e bibliotecas modernas do Android. Você vai encontrar conceitos com os quais já está familiarizado, 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 de subespaço precisam estar contidos em um subespaço 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 tamanho e posicionamento.

Um Orbiter pode ser anexado a um SpatialPanel e se mover junto com o conteúdo a que está anexado. Eles são usados com frequência para fornecer controles contextuais sobre o conteúdo a que estão anexados, dando ao conteúdo 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.

Como 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 de dependências do Jetpack XR.

Adicionamos código para um botão que faz a transição do usuário para o Espaço Ampliado, começando pela 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 nossos 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(...)
   }
}

Como 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 um 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 2D VideoPlayer dos layouts normais em um SpatialPanel sem outras mudanças. Confira como ele fica independente:

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 oferece algumas alças perto das bordas que permitem ao usuário redimensionar o painel. Ele também tem uma MovePolicy, que permite que o usuário arraste o painel.

Colocá-los no mesmo subespaço os torna independentes um do outro. Por isso, fizemos do painel VideoPlayer 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 um relacionamento 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.

Como passar para as outras telas

Também vou abordar brevemente 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 ajuste ao 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 citações complementares usando um efeito de esmaecimento, permitindo que elas desapareçam perto das bordas da tela. Ela também usa uma transição 3D real ao visualizar a entrada usada, virando a imagem no espaço.

Como publicar na Google Play Store

Agora que o app está pronto para XR com os layouts espaciais, vamos lançá-lo na Google Play Store. Há uma mudança final e 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" />

Isso informa à Google Play Store que esse app tem recursos diferenciados de XR, mostrando um selo que informa aos usuários que o app foi criado com XR em mente:

Ao fazer o upload da versão, não precisamos de etapas especiais para lançar para XR: o mesmo app é distribuído normalmente aos usuários na faixa para dispositivos móveis e aos 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 o upload de uma prévia imersiva do app usando um recurso de vídeo espacial. Em dispositivos Android XR, a Google Play Store mostra isso automaticamente como uma prévia 3D imersiva, 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 o processo completo de desenvolvimento de uma interface espacial para o Androidify, do design ao código e à publicação. Modificamos os designs atuais para trabalhar com paradigmas espaciais, usamos elementos combináveis SpatialPanel e Orbiter para criar layouts espaciais que são mostrados 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 levar seus próprios apps para o Android XR. Confira mais alguns links que podem ajudar você:

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