Samsung Galaxy XR è arrivato, con Android XR. Questo post del blog fa parte della nostra settimana di Android XR Spotlight, in cui forniamo risorse (post del blog, video, codice campione e altro ancora) progettate per aiutarti a imparare, creare e preparare le tue app per Android XR.

Con il lancio di Samsung Galaxy XR , il primo dispositivo basato su Android XR è ufficialmente disponibile. Ora gli utenti possono godersi molte delle loro app preferite del Play Store in una dimensione completamente nuova: la terza dimensione.

La terza dimensione è spaziosa e offre molto spazio anche per le tue app. Inizia oggi stesso a utilizzare gli strumenti più adatti alla tua app. Ad esempio, puoi utilizzare l'SDK Jetpack XR per creare esperienze XR coinvolgenti utilizzando strumenti di sviluppo Android moderni come Kotlin e Compose.

In questo post del blog, ti racconteremo il nostro percorso per portare la magia della nostra amata app Androidify in XR e ti spiegheremo le basi per portare anche le tue app in XR.

Un tour di Androidify

Androidify è un'app open source che ti consente di creare bot Android utilizzando alcune delle tecnologie più recenti come Gemini, CameraX, Navigation 3 e, naturalmente, Jetpack Compose. Androidify è stato inizialmente progettato per avere un aspetto ottimale su smartphone, pieghevoli e tablet creando layout adattivi.

Androidify ha un aspetto fantastico su più fattori di forma

Un pilastro fondamentale dei layout adattivi sono i composable riutilizzabili. Jetpack Compose ti aiuta a creare componenti UI di piccole dimensioni che possono essere disposti in modi diversi per creare esperienze utente intuitive, indipendentemente dal tipo di dispositivo utilizzato dall'utente. Infatti, Androidify è compatibile con Android XR senza alcuna modifica all'app.

Androidify si adatta a XR utilizzando il layout reattivo per schermi di grandi dimensioni senza modifiche al codice

Le app che non hanno una gestione speciale per Android XR possono essere utilizzate in multitasking in una finestra di dimensioni appropriate e funzionano in modo molto simile a come funzionano su un grande schermo. Per questo motivo, Androidify è già completamente funzionante su Android XR senza alcun lavoro aggiuntivo. Ma non volevamo fermarci qui, così abbiamo deciso di fare un ulteriore passo avanti e creare un'app differenziata per la realtà estesa per offrire un'esperienza piacevole ai nostri utenti di XR.

Orientarsi in XR

Esaminiamo i concetti di base chiave per Android XR, a partire dalle due modalità in cui possono essere eseguite le app: Spazio Home e Spazio intero.

Nello Spazio Home, è possibile eseguire più app una accanto all'altra, in modo che gli utenti possano svolgere più attività contemporaneamente in finestre diverse. In questo senso, è molto simile alle finestre delle app su un dispositivo Android con schermo grande, ma in uno spazio virtuale.

In spazio intero, l'app non ha limiti di spazio e può utilizzare tutte le funzionalità spaziali di Android XR, come l'interfaccia utente spaziale e il controllo dell'ambiente virtuale.

Anche se potrebbe sembrare allettante far funzionare la tua app solo in Full Space, gli utenti potrebbero voler svolgere più attività contemporaneamente con la tua app, quindi il supporto di entrambe le modalità promuove una migliore esperienza utente.

Progettare per la nuova dimensione di Androidify

Un'app piacevole inizia con un ottimo design. Ivy Knight, Senior Design Advocate di Android DevRel, si è occupata di prendere i design esistenti per Androidify e di idearne uno nuovo per XR. Inizia pure, Ivy.

La progettazione per XR ha richiesto un approccio unico, ma in realtà aveva ancora molto in comune con la progettazione per il mobile. Abbiamo iniziato pensando al contenimento: come organizzare e raggruppare gli elementi dell'interfaccia utente nello spazio secondario, mostrando chiaramente i confini o implicandoli in modo sottile. Abbiamo anche imparato ad adottare tutte le varie dimensioni degli elementi dell'interfaccia utente spaziale, che devono adattarsi e spostarsi in risposta all'utente. Come abbiamo fatto con Androidify, crea con layout adattivi, in modo da poter suddividere i layout in parti per la tua UI spaziale.

Iniziare la progettazione con lo spazio Home

Fortunatamente, Android XR ti consente di iniziare con la tua app così com'è oggi per lo spazio Home, quindi potremmo passare ai design XR espansi semplicemente aggiungendo una barra degli strumenti della finestra e un pulsante di transizione a spazio intero.

Abbiamo anche preso in considerazione le possibili funzionalità hardware e il modo in cui l'utente interagirebbe con loro. I layout per dispositivi mobili di Androidify si adattano a varie pose, dimensioni della classe e numero di fotocamere per offrire più opzioni fotografiche. Seguendo questo modello, abbiamo dovuto adattare il layout della videocamera anche per i visori. Abbiamo anche dovuto apportare modifiche al testo per tenere conto della vicinanza dell'interfaccia utente all'utente.

Progettazione per il passaggio definitivo a Spazio intero

spazio intero è stato il cambiamento più grande, ma ci ha dato più spazio creativo per adattare il nostro design. 

Androidify utilizza il contenimento visivo, o riquadri, per raggruppare le funzionalità con uno sfondo e un contorno, come il riquadro "Scatta o scegli una foto". Abbiamo anche utilizzato componenti come la barra dell'app in alto per creare un contenimento naturale incorniciando gli altri riquadri. Infine, il contenimento intrinseco è suggerito dalla vicinanza di alcuni elementi ad altri, ad esempio il pulsante in basso "Avvia trasformazione", che si trova vicino al riquadro "Scegli il colore del mio bot".

Pannelli spaziali creati per una facile separazione. Per decidere come adattare i design per il mobile ai pannelli spaziali, prova a rimuovere le superfici iniziando da quella più indietro e poi andando avanti. Scopri quanti sfondi puoi rimuovere e cosa rimane. Dopo aver svolto questo esercizio per Androidify, è rimasto il grande scarabocchio verde di Android. Il ghirigoro non fungeva solo da elemento di branding e sfondo, ma anche da punto di ancoraggio per i contenuti nello spazio 3D.

La creazione di questo punto di riferimento ha reso più facile immaginare come gli elementi potessero muoversi intorno a esso e come potevamo utilizzare la prossimità per estrarre e tradurre il resto dell'esperienza utente.

Altri suggerimenti di progettazione per rendere la tua app spaziale

• Lascia che le cose siano senza contenimento: separa i componenti e dai loro un po' di spazio reale. È ora di dare un po' di spazio a questi elementi dell'interfaccia utente.
• Rimuovi superfici: nascondi lo sfondo e vedi l'effetto sui tuoi progetti.
• Motivare con il movimento: come utilizzi le transizioni nella tua app? Utilizza questo personaggio per immaginare la tua app che entra nella realtà virtuale.
• Scegliere un punto di riferimento: non perdere gli utenti nello spazio. Avere un elemento che aiuti a raccogliere o ancorare la UI.

Per saperne di più sui pattern di progettazione dell'interfaccia utente XR, consulta Progettare per Android XR su Android Developers.

Nozioni di base sull'interfaccia utente spaziale

Ora che abbiamo parlato dell'esperienza di Ivy nell'adattare la sua mentalità durante la progettazione di Androidify per XR, parliamo dello sviluppo dell'interfaccia utente spaziale. Lo sviluppo di un'interfaccia utente spaziale con l'SDK Jetpack XR dovrebbe sembrarti familiare se sei abituato a lavorare con strumenti e librerie Android moderni. Troverai concetti che già conosci, come la creazione di layout con Compose. Infatti, i layout spaziali sono molto simili ai layout 2D che utilizzano righe, colonne e spaziatori:

Questi elementi sono disposti in SpatialRows e SpatialColumns

Gli elementi spaziali mostrati qui sono i composable SpatialPanel, che consentono di visualizzare contenuti 2D come testo, pulsanti e video.

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

Un SpatialPanel è un composable subspace. I composable di Subspace devono essere contenuti all'interno di un Subspace e vengono modificati dagli oggetti SubspaceModifier. Gli spazi secondari possono essere posizionati ovunque all'interno della gerarchia dell'UI dell'app e possono contenere solo composable Subspace. Anche gli oggetti SubspaceModifier sono molto simili agli oggetti Modifier: controllano parametri come le dimensioni e il posizionamento.

Un Orbiter può essere allegato a un SpatialPanel e spostarsi insieme ai contenuti a cui è allegato. Vengono spesso utilizzati per fornire controlli contestuali sui contenuti a cui sono allegati, dando ai contenuti l'attenzione principale. Possono essere posizionati su uno qualsiasi dei quattro lati dei contenuti, a una distanza configurabile.

Esistono molti altri elementi dell'interfaccia utente spaziale, ma questi sono i principali che abbiamo utilizzato per creare layout spaziali per Androidify.

Iniziare a sviluppare in XR

Iniziamo con la configurazione del progetto. Abbiamo aggiunto la dipendenza Jetpack XR Compose, che puoi trovare nella pagina Dipendenze Jetpack XR.

Abbiamo aggiunto il codice per un pulsante che consente all'utente di passare alla modalità Full Space, iniziando con il rilevamento della funzionalità:

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

Poi, abbiamo creato un nuovo componente pulsante che utilizza l'icona Espandi contenuti nei nostri layout esistenti e gli abbiamo assegnato un 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"),
       )
   }
}

Ora, facendo clic su quel pulsante, viene visualizzato il layout Medio in spazio intero. Possiamo controllare le funzionalità spaziali e determinare se è possibile visualizzare l'interfaccia utente spaziale. In questo caso, mostreremo il nostro nuovo layout spaziale:

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

Implementazione del design per la schermata Home

Torniamo al design spaziale della schermata Home in spazio intero per capire come è stato implementato.

Qui abbiamo identificato due elementi SpatialPanel: un riquadro in cui si trova la scheda video a destra e un riquadro che contiene l'interfaccia utente principale. Infine, nella parte superiore è presente un Orbiter. Iniziamo con il pannello del video player:

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

Abbiamo semplicemente riutilizzato il componente VideoPlayer 2D dai layout normali in un SpatialPanel senza ulteriori modifiche. Ecco come si presenta in autonomia:

Anche il pannello dei contenuti principali seguiva la stessa logica: abbiamo riutilizzato i contenuti del pannello medio in un SpatialPanel.

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

Abbiamo assegnato a questo pannello un ResizePolicy, che gli fornisce alcune maniglie vicino ai bordi che consentono all'utente di ridimensionarlo. Ha anche un MovePolicy, che consente all'utente di trascinarlo.

Se li inseriamo nello stesso spazio secondario, diventano indipendenti l'uno dall'altro, quindi abbiamo reso il pannello VideoPlayer un elemento secondario del pannello dei contenuti principali. In questo modo, il pannello VideoPlayer si sposta quando il pannello dei contenuti principali viene trascinato tramite una relazione padre-figlio.

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

Ecco come abbiamo realizzato la prima schermata.

Passare alle altre schermate

Esaminerò brevemente anche alcune delle altre schermate, evidenziando le considerazioni specifiche fatte per ciascuna.

Qui abbiamo utilizzato i composable SpatialRow e SpatialColumn per creare un layout adatto allo spazio di visualizzazione consigliato, riutilizzando i componenti del layout Medio.

Schermata dei risultati in Spazio completo: un bot creato con un prompt: cappellino da baseball rosso, occhiali da sole a goccia, una t-shirt azzurra, pantaloncini a scacchi rossi e bianchi, infradito verdi e una racchetta da tennis.

La schermata dei risultati mostra le citazioni complementari utilizzando un effetto sfumato, che consente di farle sbiadire vicino ai bordi dello schermo. Inoltre, utilizza una transizione 3D effettiva quando visualizza l'input utilizzato, capovolgendo l'immagine nello spazio.

Pubblicazione sul Google Play Store

Ora che l'app è pronta per la realtà aumentata con i layout spaziali, abbiamo proceduto a rilasciarla sul Play Store. Abbiamo apportato un'ultima importante modifica al file AndroidManifest.xml dell'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" />

In questo modo, il Play Store sa che questa app ha funzionalità differenziate per XR e mostra un badge che informa gli utenti che l'app è stata creata pensando alla realtà estesa:

Quando carichiamo la release, non sono necessari passaggi speciali per il rilascio per XR: la stessa app viene distribuita normalmente agli utenti sul canale mobile e agli utenti su un dispositivo XR. Tuttavia, puoi scegliere di aggiungere screenshot specifici per la realtà aumentata della tua app o persino caricare un'anteprima immersiva della tua app utilizzando un asset video spaziale. Sui dispositivi Android XR, il Play Store lo mostra automaticamente come anteprima 3D immersiva, consentendo agli utenti di sperimentare la profondità e la scala dei tuoi contenuti prima di installare l'app.

Inizia subito a creare le tue esperienze

Androidify è un ottimo esempio di come spazializzare un'app Jetpack Compose 2D esistente. Oggi abbiamo mostrato l'intero processo di sviluppo di una UI spaziale per Androidify, dalla progettazione al codice alla pubblicazione. Abbiamo modificato i design esistenti per funzionare con i paradigmi spaziali, utilizzato i composable SpatialPanel e Orbiter per creare layout spaziali che vengono visualizzati quando l'utente entra in Full Space e, infine, abbiamo rilasciato la nuova versione dell'app sul Play Store.

Ci auguriamo che questo post del blog ti abbia aiutato a capire come portare le tue app su Android XR. Ecco alcuni link che possono aiutarti:

• Dai un'occhiata al codice sorgente di Androidify e crea il tuo bot utilizzando Androidify su Google Play.
• Inizia a utilizzare la nostra documentazione per gli sviluppatori e scopri di più su Jetpack Compose per XR.
• Scarica l'emulatore Android XR e prova la tua app.