Trasformare la tua app Android in 3D con XR

​​

L'app mobile o per schermi di grandi dimensioni Android 2D funziona per impostazione predefinita in Android XR, visualizzata come riquadro 2D all'interno dello spazio 3D. Puoi aggiungere funzionalità XR immersive per migliorare la tua app Android 2D esistente, passando da un'esperienza su schermo piatto a un ambiente 3D dinamico.

Tieni presente questi principi importanti quando trasferisci la tua app per Android in XR.

  • Funzionalità spaziali: Android XR offre una vasta gamma di funzionalità spaziali disponibili per la tua app, ma non devi implementare ogni singola funzionalità. Implementa in modo strategico quelli che completano la gerarchia visiva, i layout e i percorsi utente della tua app. Valuta la possibilità di incorporare ambienti personalizzati e più riquadri per creare un'esperienza davvero immersiva. Consulta le linee guida per la progettazione di interfacce utente spaziali per determinare l'integrazione ottimale degli elementi spaziali.
  • Interfaccia utente adattiva: XR ti offre la flessibilità di progettare un'interfaccia utente spaziosa che si adatta perfettamente a una tela infinita e a finestre ridimensionabili liberamente. Uno dei consideri più importanti è utilizzare le nostre linee guida per la progettazione per schermi di grandi dimensioni per ottimizzare il layout dell'app per questo ambiente espansivo. Anche se al momento la tua app è solo per dispositivi mobili, puoi comunque utilizzare ambienti accattivanti per migliorare l'esperienza utente, ma un'interfaccia utente ottimizzata per schermi di grandi dimensioni è uno dei modi migliori per ottimizzare la tua app per Android XR.
  • Framework UI: consigliamo di creare l'interfaccia utente con Jetpack Compose per VR. Se la tua app attualmente si basa su View, consulta la sezione Utilizzare le visualizzazioni in XR per scoprire di più su come sfruttare l'interoperabilità di Compose quando lavori con le visualizzazioni oppure valuta la possibilità di lavorare direttamente con la libreria Jetpack SceneCore.
  • Pubblicazione sul Play Store: per assicurarti che la tua app con funzionalità XR sia rilevabile sul Play Store: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Suggerimenti per la conversione dei componenti dell'interfaccia utente 2D in 3D

Seguire questi suggerimenti può fare una grande differenza per far sembrare la tua app ottimizzata per la realtà virtuale e la realtà aumentata.

  • Dai la priorità alla compatibilità con gli schermi di grandi dimensioni: assicurati che l'interfaccia utente della tua app rispetti i principi di progettazione per gli schermi di grandi dimensioni per garantire una leggibilità ottimale del testo e dei contenuti in ambienti XR espansivi.
  • Utilizza le funzionalità spaziali in modo strategico: identifica i momenti chiave del percorso dell'utente della tua app in cui l'integrazione di funzionalità spaziali migliorerà l'esperienza e sfrutta le funzionalità uniche della piattaforma.
  • Posiziona i riquadri spaziali tenendo conto del comfort dell'utente: quando progetti il layout con i riquadri spaziali, posizionali a una distanza confortevole dall'utente per evitare di sopraffarlo o di sentirsi troppo vicino.
  • Utilizza l'interfaccia utente adattiva per i layout spaziali: utilizza concetti di interfaccia utente adattiva come riquadri e rivelazione progressiva per decomporre efficacemente il layout in più riquadri spaziali, ottimizzando la presentazione delle informazioni.
  • Utilizza gli elementi orbitanti per elementi e pattern permanenti: riserva gli elementi orbitanti per gli elementi UX permanenti e contestuali, come la navigazione e i controlli. Limita l'uso di orbitanti per mantenere la chiarezza ed evitare confusione.
  • Utilizza con giudizio l'elevazione: applica l'elevazione spaziale ai componenti temporanei che rimangono fermi e non scorrono con i contenuti. Evita di elevare aree di grandi dimensioni per evitare disagi visivi e mantenere una gerarchia visiva equilibrata.
  • Creazione con Material Design: se stai creando un'app con la versione alpha più recente dei componenti e dei layout adattivi di Material Design, puoi aggiungere il wrapper "EnableXrComponentOverrides" per attivare le modifiche XR nella tua app. Per saperne di più, consulta la nostra documentazione su Material Design per XR.

Jetpack Compose per XR introduce nuovi componenti che gestiscono i miglioramenti XR in modo che non sia necessario farlo. Ad esempio, puoi utilizzare SpatialPopup e SpatialDialog per sostituire le relative versioni 2D. Questi componenti vengono visualizzati come un'interfaccia utente 2D standard quando l'interfaccia utente spaziale non è disponibile e mostrano l'interfaccia utente spaziale della tua app quando è possibile. Il loro utilizzo è semplice come effettuare una modifica di una riga per sostituire l'elemento UI 2D corrispondente.

Convertire una finestra di dialogo in SpatialDialog

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

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

Convertire un popup in SpatialPopup

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

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

Migliorare gli elementi dell'interfaccia utente 2D

Quando vuoi elevare l'interfaccia utente con un controllo più granulare, ti forniamo SpatialElevation per consentirti di elevare qualsiasi composable nella tua app a un livello superiore al riquadro spaziale sull'asse Z impostato con SpatialElevationLevel. In questo modo, puoi attirare l'attenzione dell'utente, creare una gerarchia migliore e migliorare la leggibilità, come mostrato nell'esempio seguente.

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

Punti chiave del codice

  • Non spazializzare o elevare aree e piani di grandi dimensioni, come i fogli inferiori e i fogli laterali.
  • Non mettere in evidenza gli elementi dell'interfaccia utente che possono essere scorrendo con i contenuti.

Esegui la migrazione dei componenti 2D agli orbiter

Gli elementi orbitanti sono elementi in primo piano che contengono i controlli per i contenuti all'interno delle schede spaziali. Consentono di avere più spazio per i contenuti e di offrire agli utenti un accesso rapido alle funzionalità senza ostruire i contenuti principali.

Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata per XR)

Il seguente codice di esempio mostra come eseguire la migrazione di un componente dell'interfaccia utente 2D a un orbiter.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

Punti chiave sugli orbitanti

  • Gli orbiter sono componenti progettati per collegare elementi dell'interfaccia utente esistenti a un pannello spaziale
  • Consulta le nostre linee guida per la progettazione di app per Android XR per verificare quali elementi eseguire la migrazione per gli orbiter e quali pattern evitare.
  • Ti consigliamo di adattare solo alcuni componenti di navigazione, come il rail di navigazione, la barra delle app superiore o la barra delle app inferiore.
  • Gli orbitanti non vengono visualizzati quando l'interfaccia utente spaziale non è attivata. Ad esempio, non verranno visualizzati in Home Space o su dispositivi come smartphone, tablet e dispositivi pieghevoli.

Eseguire la migrazione dei componenti 2D ai riquadri spaziali

I riquadri spaziali sono i componenti di base dell'interfaccia utente delle app Android XR.

I riquadri fungono da contenitori per elementi dell'interfaccia utente, componenti interattivi e contenuti immersivi. Durante la progettazione, puoi aggiungere componenti come gli orbiter per i controlli dell'utente e sollevare gli elementi dell'interfaccia utente per attirare l'attenzione su interazioni specifiche.

Punti chiave del codice

  • Consulta le linee guida per la progettazione di app per Android XR per verificare quali elementi eseguire la migrazione ai pannelli e quali pattern evitare.
  • Segui le best practice per il posizionamento dei riquadri spaziali:
    • I pannelli devono essere generati al centro a 1,5 m dagli occhi dell'utente.
    • I contenuti devono essere visualizzati nel 41° centrale del campo visivo dell'utente.
  • I riquadri rimangono in posizione mentre l'utente si sposta. L'ancoraggio è disponibile solo per il passthrough.
  • Attenersi ai bordi arrotondati di 32 dp consigliati dal sistema per i riquadri.
  • I target di tocco devono essere di 56 dp e non inferiori a 48 dp.
  • Mantieni i rapporti di contrasto per la leggibilità, soprattutto se utilizzi sfondi trasparenti.
  • Segui i principi di colore del design Android e utilizza il sistema di colori Material Design per implementare temi scuri e chiari per la tua app.
  • Utilizza l'API dei riquadri spaziali con gli elementi dell'interfaccia utente esistenti.

Eseguire la migrazione dell'interfaccia utente 2D a un singolo riquadro spaziale

Per impostazione predefinita, la tua app viene visualizzata con un unico pannello in Home Space. Scopri come passare dallo spazio della casa allo spazio completo. Per visualizzare questi contenuti in Spazio intero, puoi utilizzare SpatialPanel.

Ecco un esempio di come potresti procedere.

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

Esegui la migrazione dell'interfaccia utente 2D a più riquadri spaziali

Puoi utilizzare un singolo riquadro spaziale per l'interfaccia utente della tua app oppure eseguire la migrazione della tua interfaccia utente 2D a più riquadri spaziali. Se scegli di utilizzare più riquadri per l'interfaccia utente della tua app, puoi posizionarli e ruotarli (analogamente alla disposizione dell'interfaccia utente in 2D). Inizierai con una visione chiara del design di ciò che vuoi ottenere, quindi potrai utilizzare le API di layout dell'interfaccia utente spaziale (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) e i modificatori di sottospazio per posizionare e ruotare i riquadri. Esistono alcuni schemi chiave da evitare quando implementi più riquadri.

  • Evita pannelli sovrapposti che impediscano all'utente di vedere informazioni importanti.
  • Evita di sovraccaricare l'utente con riquadri.
  • Evita di posizionare i pannelli in punti scomodi o poco visibili. Esempio: i riquadri posizionati dietro l'utente sono difficili da notare.
  • Per scoprire di più sullo sviluppo dell'interfaccia utente spaziale, consulta le nostre linee guida complete.
Contenuti non spazializzati
Controlli multimediali spazializzati (adattati a XR) all'interno di un orbiter e contenuti suddivisi in più riquadri spaziali
SpatialRow(curveRadius = 825.dp) {
    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()
    }
}

Verificare le funzionalità spaziali

Quando decidi se visualizzare un elemento dell'interfaccia utente specifico, evita di verificare la presenza di dispositivi o modalità XR specifici. La ricerca di dispositivi o modalità anziché di funzionalità può causare problemi quando le funzionalità di un determinato dispositivo cambiano nel tempo. Utilizza invece LocalSpatialCapabilities.current.isSpatialUiEnabled per verificare direttamente le funzionalità di spazializzazione necessarie, come mostrato nell'esempio seguente. Questo approccio garantisce che la tua app si adatti correttamente a un'ampia gamma di esperienze XR senza richiedere aggiornamenti ogni volta che vengono lanciati nuovi dispositivi o cambiano le funzionalità.

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

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

Utilizzare gli ambienti per cambiare l'ambiente circostante dell'utente

Quando vuoi creare un'esperienza immersiva nella tua app modificando l'ambiente circostante dell'utente, puoi farlo con gli ambienti. L'aggiunta di un ambiente nel codice è una modifica semplice che puoi apportare senza influire in modo significativo sull'interfaccia utente esistente dell'app. Per scoprire di più sulla configurazione degli ambienti, consulta le nostre linee guida complete.

Aggiungere modelli 3D

I contenuti 3D possono contribuire a creare un'esperienza più immersiva e a migliorare la percezione spaziale. Come altre funzionalità spaziali e 3D, la tua app può mostrare modelli 3D solo quando i contenuti 3D sono attivati, quindi assicurati che l'app offra comunque un'esperienza eccezionale anche senza gli oggetti 3D che aggiungi.

Aggiungere modelli 3D con SceneViewer

Quando vuoi presentare modelli 3D ai tuoi utenti, esistono diversi modi per risolvere il problema. Quando hai un file glTF pronto per l'uso sul tuo server, il modo più semplice è utilizzare SceneViewer XR. Puoi farlo creando un Intent esplicito, che avvierà l'applicazione SceneViewer XR sul dispositivo. In questo modo, l'utente potrà visualizzare l'oggetto e spostarlo e ridimensionarlo liberamente nell'ambiente circostante.

Aggiungere modelli 3D direttamente con le entità Volume

Quando vuoi un maggiore controllo su elementi come la posizione del modello 3D, le dimensioni relative o le animazioni granulari, puoi caricare una risorsa glTF direttamente nella tua app. Una volta caricato il modello 3D, puoi utilizzare il componibile Volume per avvolgere un'entità modello glTF e applicare modificatori di sottospazio per controllare il modo in cui viene presentata. L'utilizzo di Volume ti consente di posizionare in modo dichiarativo i modelli 3D rispetto alla tua UI spaziale. Per scoprire di più su come mostrare i modelli 3D nella tua app, consulta Creare, controllare e gestire entità.