Samsung Galaxy XR è arrivato, con Android XR! Questo post del blog fa parte della 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 con Android XR è ufficialmente arrivato. Ora le persone possono godersi molte delle loro app preferite dal 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 che funzionano per la tua app. Ad esempio, puoi utilizzare Jetpack XR SDK per creare esperienze XR immersive utilizzando strumenti di sviluppo Android moderni come Kotlin e Compose.

In questo post del blog, ti racconteremo il nostro percorso per portare la fantasia della nostra amata app Androidify in XR e tratteremo le nozioni di base 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 fantastico 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 modifiche 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 simile a quelle su uno schermo di grandi dimensioni. Per questo motivo, Androidify è già completamente funzionante su Android XR senza ulteriori interventi. Ma non volevamo fermarci qui, quindi abbiamo deciso di fare un passo in più e creare un'app differenziata per XR per offrire un'esperienza piacevole ai nostri utenti XR.

Orientarsi in XR

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

In Spazio Home, è possibile eseguire più app affiancate in modo che gli utenti possano eseguire il multitasking su finestre diverse. In questo senso, è molto simile alla finestra del desktop su un dispositivo Android con schermo di grandi dimensioni, ma nello spazio virtuale.

In Schermo 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 fare in modo che l'app venga eseguita solo in Schermo intero, gli utenti potrebbero voler eseguire il multitasking 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 creare un nuovo design per XR. Ivy, a te la parola.

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

Iniziare la progettazione con Spazio Home

Fortunatamente, Android XR ti consente di iniziare con l'app così com'è oggi per Spazio Home, quindi abbiamo potuto passare ai design XR espansi semplicemente aggiungendo una barra degli strumenti della finestra e un pulsante di transizione Schermo intero.

Abbiamo anche considerato le possibili funzionalità hardware e il modo in cui l'utente avrebbe interagito con esse. I layout per dispositivi mobili di Androidify si adattano a varie posizioni, dimensioni delle classi e al numero di fotocamere per offrire più opzioni di foto. Seguendo questo modello, abbiamo dovuto adattare anche il layout della fotocamera per i dispositivi con visore. Abbiamo anche dovuto apportare modifiche al testo per tenere conto della vicinanza dell'interfaccia utente all'utente.

Progettare per il passaggio più grande 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 delle app in alto per creare un contenimento naturale incorniciando gli altri riquadri. Infine, il contenimento intrinseco è suggerito dalla vicinanza di alcuni elementi ad altri, come il pulsante in basso "Avvia trasformazione", che si trova vicino al riquadro "Scegli il colore del mio bot".

I pannelli spaziali hanno facilitato la separazione. Per decidere come adattare i design per dispositivi mobili ai pannelli spaziali, prova a rimuovere le superfici iniziando dalla superficie più lontana e poi spostandoti in avanti. Scopri quanti sfondi puoi rimuovere e cosa rimane. Dopo aver eseguito questo esercizio per Androidify, è rimasto il grande scarabocchio verde di Android. Lo scarabocchio non solo fungeva da momento di branding e sfondo, ma anche da ancoraggio per i contenuti nello spazio 3D.

La creazione di questo ancoraggio ha reso più facile immaginare come gli elementi potessero muoversi intorno e come potevamo utilizzare la vicinanza per suddividere e tradurre il resto dell'esperienza utente.

Altri suggerimenti di progettazione per rendere spaziale la tua app

• Lascia che le cose siano non contenute: suddividi i componenti e dai loro un po' di spazio reale (spaziale). È il momento di dare un po' di spazio a questi elementi UI.
• Rimuovi le superfici: nascondi lo sfondo e vedi cosa succede ai tuoi design.
• Motiva con il movimento: come utilizzi le transizioni nella tua app? Utilizza questo personaggio per immaginare la tua app che si espande in VR.
• Scegli un ancoraggio: non perdere gli utenti nello spazio. Aggiungi un elemento che aiuti a raccogliere o ancorare l'interfaccia utente.

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 trattato l'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 Jetpack XR SDK 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 ti 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 di sottospazio. I composable di sottospazio devono essere contenuti in un sottospazio e vengono modificati dagli oggetti SubspaceModifier. I sottospazi possono essere posizionati ovunque nella gerarchia dell'interfaccia utente dell'app e possono contenere solo composable di sottospazio.Gli oggetti SubspaceModifier sono anche molto simili agli oggetti Modifier: controllano parametri come le dimensioni e il posizionamento.

Un Orbiter può essere collegato a un SpatialPanel e spostarsi insieme ai contenuti a cui è collegato. Vengono spesso utilizzati per fornire controlli contestuali sui contenuti a cui sono collegati, 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 UI spaziali, ma questi sono i principali che abbiamo utilizzato per creare layout spaziali per Androidify.

Iniziare a sviluppare per XR

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

Abbiamo aggiunto il codice per un pulsante che consente all'utente di passare a Schermo intero, 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 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 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(...)
   }
}

Implementare il design per la schermata Home

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

Qui abbiamo identificato due elementi SpatialPanel: un pannello in cui si trova la scheda video a destra e un pannello 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 modalità autonoma:

Il pannello dei contenuti principali ha seguito la stessa storia: 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 ridimensionare il pannello. Ha anche un MovePolicy, che consente all'utente di trascinarlo.

Se li inseriamo nello stesso sottospazio, 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 creato la prima schermata.

Passare alle altre schermate

Tratterò 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 che si adatti allo spazio di visualizzazione consigliato, riutilizzando i componenti del layout Medio.

Schermata dei risultati in Schermo intero: un bot generato con un prompt: cappellino da baseball rosso, occhiali da sole da aviatore, 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 di sfumatura, che consente di sfumarle vicino ai bordi dello schermo. Utilizza anche una transizione 3D effettiva quando visualizza l'input utilizzato, capovolgendo l'immagine nello spazio.

Pubblicare sul Google Play Store

Ora che l'app è pronta per XR con i layout spaziali, abbiamo proceduto alla pubblicazione sul Play Store. C'è un'ultima modifica importante che abbiamo apportato 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 indica agli utenti che l'app è stata creata pensando a XR:

Quando carichiamo la release, non sono necessari passaggi speciali per la release 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 XR 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 visualizza automaticamente come un'anteprima 3D immersiva, consentendo agli utenti di sperimentare la profondità e la scala dei tuoi contenuti prima di installare l'app.

Inizia a creare le tue esperienze oggi stesso

Androidify è un ottimo esempio di come spazializzare un'app Jetpack Compose 2D esistente. Oggi abbiamo mostrato l'intero processo di sviluppo di un'interfaccia utente spaziale per Androidify, dalla progettazione al codice fino 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 Schermo intero 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 consultare 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.