Android-Apps mit XR in 3D anzeigen

​​

Ihre 2D-Android-App für Mobilgeräte oder große Bildschirme funktioniert standardmäßig in Android XR und wird als 2D-Steuerfeld im 3D-Raum angezeigt. Sie können Ihrer vorhandenen 2D-Android-App immersive XR-Funktionen hinzufügen, um sie von einem flachen Bildschirm zu einer dynamischen 3D-Umgebung zu wechseln.

Berücksichtigen Sie diese wichtigen Prinzipien, wenn Sie Ihre Android-App für XR entwickeln.

  • Räumliche Funktionen: Android XR bietet eine Vielzahl von räumlichen Funktionen für Ihre App. Sie müssen jedoch nicht jede einzelne Funktion implementieren. Implementieren Sie sie strategisch, damit sie die visuelle Hierarchie, die Layouts und die User Journeys Ihrer App ergänzen. Sie können benutzerdefinierte Umgebungen und mehrere Bereiche einbinden, um ein wirklich immersives Erlebnis zu schaffen. Lesen Sie die Leitfäden für die räumliche UI-Design, um die optimale Integration räumlicher Elemente zu bestimmen.
  • Adaptive Benutzeroberfläche: Mit XR können Sie eine großzügige Benutzeroberfläche entwerfen, die sich nahtlos an ein unbegrenztes Canvas und frei skalierbare Fenster anpasst. Eine der wichtigsten Überlegungen ist es, unsere Designrichtlinien für große Bildschirme zu verwenden, um das Layout Ihrer App für diese Umgebung zu optimieren. Auch wenn Ihre App derzeit nur für Mobilgeräte verfügbar ist, können Sie ansprechende Umgebungen verwenden, um die Nutzerfreundlichkeit zu verbessern. Eine für große Bildschirme optimierte Benutzeroberfläche ist jedoch eine der besten Möglichkeiten, Ihre App für Android XR zu optimieren.
  • UI-Framework: Wir empfehlen, Ihre Benutzeroberfläche mit Jetpack Compose for XR zu erstellen. Wenn Ihre App derzeit auf Ansichten basiert, lesen Sie den Artikel Mit Ansichten in XR arbeiten, um mehr über die Nutzung der Compose-Interoperabilität bei der Arbeit mit Ansichten zu erfahren. Sie können auch direkt mit der Jetpack SceneCore-Bibliothek arbeiten.
  • Veröffentlichung im Play Store: Damit Ihre XR-fähige App im Play Store gefunden werden kann, müssen Sie Folgendes tun: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Tipps zum Konvertieren von 2D-UI-Komponenten in 3D

Wenn Sie diese Tipps befolgen, kann das den Eindruck vermitteln, dass Ihre App für XR optimiert wurde.

  • Kompatibilität mit großen Bildschirmen priorisieren: Achten Sie darauf, dass die Benutzeroberfläche Ihrer App den Designprinzipien für große Bildschirme entspricht, um die optimale Lesbarkeit von Text und Inhalten in großen XR-Umgebungen zu gewährleisten.
  • Standortfunktionen strategisch einsetzen: Ermitteln Sie wichtige Momente in der User Journey Ihrer App, in denen die Einbindung von Standortfunktionen die Nutzerfreundlichkeit verbessert, und nutzen Sie die einzigartigen Funktionen der Plattform.
  • Platzieren Sie räumliche Bereiche mit Blick auf den Nutzerkomfort: Wenn Sie Ihr Layout mit räumlichen Bereichen entwerfen, positionieren Sie sie in einem angenehmen Abstand zum Nutzer, damit sie nicht überfordern oder zu nah erscheinen.
  • Adaptive Benutzeroberfläche für räumliche Layouts verwenden: Verwenden Sie adaptive UI-Konzepte wie Bereiche und progressive Enthüllung, um Ihr Layout effektiv in mehrere räumliche Bereiche zu unterteilen und die Informationspräsentation zu optimieren.
  • Orbiter für persistente Elemente und Muster verwenden: Verwenden Sie Orbiter für persistente und kontextbezogene UX-Elemente wie Navigation und Steuerelemente. Begrenzen Sie die Verwendung von Orbitern, um für Klarheit zu sorgen und Unübersichtlichkeit zu vermeiden.
  • Ebenen sinnvoll verwenden: Wenden Sie die Höhenansicht auf temporäre Komponenten an, die stationär bleiben und nicht mit den Inhalten scrollen. Vermeiden Sie es, große Bereiche hervorzuheben, um visuelle Unruhe zu vermeiden und eine ausgewogene visuelle Hierarchie beizubehalten.
  • Mit Material Design entwickeln: Wenn Sie die neueste Alphaversion von Material Design-Komponenten und adaptiven Layouts verwenden, können Sie den Wrapper „EnableXrComponentOverrides“ hinzufügen, um XR-Änderungen in Ihrer App zu aktivieren. Weitere Informationen finden Sie in der Material Design für XR-Dokumentation.

Mit Jetpack Compose for XR werden neue Komponenten eingeführt, die XR-Optimierungen verwalten, damit Sie es nicht tun müssen. Sie können beispielsweise SpatialPopup und SpatialDialog verwenden, um die 2D-Entsprechungen zu ersetzen. Diese Komponenten werden als typische 2D-Benutzeroberfläche angezeigt, wenn die räumliche Benutzeroberfläche nicht verfügbar ist. Wenn möglich, wird die räumliche Benutzeroberfläche Ihrer App angezeigt. Die Verwendung ist so einfach wie eine Einzeilenänderung, um das entsprechende 2D-UI-Element zu ersetzen.

Dialog in SpatialDialog konvertieren

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

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

Pop-up in SpatialPopup umwandeln

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

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

2D-UI-Elemente hervorheben

Wenn Sie die Benutzeroberfläche mit einer detaillierteren Steuerung hervorheben möchten, können Sie mit SpatialElevation jedes Composeable in Ihrer App auf eine Ebene über dem räumlichen Steuerfeld auf der Z‑Achse heben, die Sie mit SpatialElevationLevel festgelegt haben. So können Sie die Aufmerksamkeit der Nutzer lenken, eine bessere Hierarchie schaffen und die Lesbarkeit verbessern, wie im folgenden Beispiel gezeigt.

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

Wichtige Punkte zum Code

  • Große Bereiche und Ebenen wie untere und seitliche Ebenen sollten nicht räumlich dargestellt oder erhöht werden.
  • Heben Sie keine UI-Elemente hervor, die mit dem Inhalt scrollbar sind.

2D-Komponenten zu Orbitern migrieren

Orbiter sind schwebende Elemente, die Steuerelemente für den Inhalt in den räumlichen Bereichen enthalten. Sie bieten mehr Platz für die Inhalte und ermöglichen Nutzern einen schnellen Zugriff auf Funktionen, ohne den Hauptinhalt zu verdecken.

Nicht räumlicher Navigationsstreifen
Räumlicher (für XR angepasster) Navigationsstreifen

Im folgenden Beispielcode wird gezeigt, wie Sie eine 2D-UI-Komponente in einen Orbiter migrieren können.

// Previous approach
NavigationRail()

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

Wichtige Informationen zu Orbitern

  • Orbiter sind Komponenten, mit denen vorhandene UI-Elemente an ein räumliches Steuerfeld angehängt werden können.
  • In unseren Designrichtlinien für Android XR-Apps erfahren Sie, welche Elemente für Orbiter migriert werden müssen und welche Muster vermieden werden sollten.
  • Wir empfehlen, nur wenige Navigationskomponenten anzupassen, z. B. die Navigationsleiste, die obere App-Leiste oder die untere App-Leiste.
  • Orbitale Objekte werden nicht angezeigt, wenn die räumliche Benutzeroberfläche nicht aktiviert ist. Sie werden beispielsweise nicht im Home Space oder auf Geräten wie Smartphones, Tablets und faltbaren Geräten angezeigt.

2D-Komponenten in Kartenbereiche migrieren

Räumliche Bereiche sind die grundlegenden Bausteine der Benutzeroberfläche von Android XR-Apps.

Bereiche dienen als Container für UI-Elemente, interaktive Komponenten und immersive Inhalte. Beim Entwerfen können Sie Komponenten wie Orbiter für die Nutzersteuerung hinzufügen und UI-Elemente räumlich hervorheben, um auf bestimmte Interaktionen aufmerksam zu machen.

Wichtige Punkte zum Code

  • In den Designrichtlinien für Android XR-Apps erfahren Sie, welche Elemente in Steuerfelder migriert werden sollten und welche Muster vermieden werden sollten.
  • Beachten Sie die Best Practices für die Platzierung von Infofeldern für Orte:
    • Die Panels sollten mittig 1,5 m vor den Augen des Nutzers erscheinen.
    • Die Inhalte sollten sich im mittleren 41-Grad-Feld des Sichtfelds des Nutzers befinden.
  • Die Bereiche bleiben an Ort und Stelle, während sich der Nutzer bewegt. Die Anpassbarkeit ist nur für den Passthrough-Modus verfügbar.
  • Halten Sie sich an die vom System empfohlenen abgerundeten Ecken von 32 dp für Steuerfelder.
  • Berührungsziele sollten 56 dp groß und nicht kleiner als 48 dp sein.
  • Achten Sie auf einen guten Kontrast, damit der Text gut lesbar ist, insbesondere wenn Sie transparente Hintergründe verwenden.
  • Folgen Sie den Farbgrundsätzen für Android-Design und verwenden Sie das Farbsystem von Material Design, um dunkle und helle Designs für Ihre App zu implementieren.
  • Die API für Infofelder für Karten und Orte mit vorhandenen UI-Elementen verwenden

2D-UI in ein einzelnes räumliches Steuerfeld migrieren

Standardmäßig wird Ihre App im Home Space mit einem einzigen Steuerfeld angezeigt. Weitere Informationen zum Wechseln zwischen dem Home Space und dem Full Space Mit SpatialPanel können Sie den Inhalt auf die volle Größe bringen.

Hier ist ein Beispiel dafür:

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

2D-Benutzeroberfläche in mehrere räumliche Steuerfelder migrieren

Sie können entweder ein einzelnes räumliches Steuerfeld für die Benutzeroberfläche Ihrer App verwenden oder Ihre 2D-Benutzeroberfläche in mehrere räumliche Steuerfelder migrieren. Wenn Sie mehrere Bereiche für die Benutzeroberfläche Ihrer App verwenden, können Sie die Bereiche positionieren und drehen (ähnlich wie beim Layout Ihrer Benutzeroberfläche in 2D). Sie beginnen mit einer klaren Designvision für das, was Sie erreichen möchten, und verwenden dann APIs für das dreidimensionale UI-Layout (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) und Subraummodifikatoren, um Bereiche zu positionieren und zu drehen. Es gibt einige wichtige Muster, die Sie bei der Implementierung mehrerer Infofelder vermeiden sollten.

  • Vermeiden Sie sich überschneidende Bereiche, die Nutzer daran hindern, wichtige Informationen zu sehen.
  • Überladen Sie die Nutzer nicht mit Steuerfeldern.
  • Platzieren Sie Panels nicht an ungünstigen oder unauffälligen Stellen. Beispiel: Panels, die sich hinter dem Nutzer befinden, sind schwer zu erkennen.
  • Weitere Informationen zur Entwicklung Ihrer visuellen Benutzeroberfläche finden Sie in unserer vollständigen Anleitung.
Nicht ortsbezogene Inhalte
Räumliche (XR-adaptierte) Mediensteuerungen in einem Orbiter und Inhalte, die in mehrere räumliche Bereiche unterteilt sind
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()
    }
}

Geografische Funktionen prüfen

Wenn Sie entscheiden, ob ein bestimmtes UI-Element angezeigt werden soll, sollten Sie nicht nach bestimmten XR-Geräten oder -Modi suchen. Wenn Sie nach Geräten oder Modi statt nach Funktionen suchen, kann es zu Problemen kommen, wenn sich die Funktionen eines bestimmten Geräts im Laufe der Zeit ändern. Verwenden Sie stattdessen LocalSpatialCapabilities.current.isSpatialUiEnabled, um direkt nach den erforderlichen Spatialisierungsfunktionen zu suchen, wie im folgenden Beispiel gezeigt. So wird sichergestellt, dass sich Ihre App richtig an eine Vielzahl von XR-Umgebungen anpasst, ohne dass jedes Mal Updates erforderlich sind, wenn neue Geräte auf den Markt kommen oder sich die Funktionen ändern.

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

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

Mit Umgebungen die Umgebung des Nutzers ändern

Wenn Sie die Umgebung der Nutzer ändern möchten, um ein immersives Erlebnis in Ihrer App zu schaffen, können Sie dies mithilfe von Umgebungen tun. Das Hinzufügen einer Umgebung im Code ist eine einfache Änderung, die Sie vornehmen können, ohne die vorhandene Benutzeroberfläche Ihrer App wesentlich zu beeinträchtigen. Weitere Informationen zum Festlegen von Umgebungen findest du in unserer vollständigen Anleitung.

3D-Modelle hinzufügen

3D-Inhalte können dazu beitragen, die Nutzererfahrung zu verbessern und ein besseres Raumverständnis zu schaffen. Wie bei anderen räumlichen und 3D-Funktionen können in Ihrer App nur 3D-Modelle angezeigt werden, wenn 3D-Inhalte aktiviert sind. Achten Sie also darauf, dass Ihre App auch ohne die hinzugefügten 3D-Objekte eine gute Nutzererfahrung bietet.

3D-Modelle mit SceneViewer hinzufügen

Wenn Sie Ihren Nutzern 3D‑Modelle präsentieren möchten, haben Sie mehrere Möglichkeiten. Wenn Sie ein glTF-Modell auf Ihrem Server haben, ist SceneViewer XR die einfachste Lösung. Dazu erstellen Sie ein explizites Intent, mit dem die SceneViewer XR-Anwendung auf dem Gerät gestartet wird. So kann der Nutzer das Objekt sehen und es frei in der Umgebung verschieben und die Größe ändern.

3D‑Modelle direkt mit dem Entitäts-Volumen hinzufügen

Wenn Sie mehr Kontrolle über Dinge wie die Position des 3D‑Modells, die relative Größe oder detaillierte Animationen haben möchten, können Sie eine glTF-Ressource direkt in Ihre App laden. Sobald das 3D‑Modell geladen ist, können Sie mit dem Volume-Element eine glTF-Modellentität einschließen und Subraummodifikatoren anwenden, um die Darstellung zu steuern. Mit Volume können Sie 3D-Modelle deklarativ relativ zu Ihrer räumlichen Benutzeroberfläche platzieren. Weitere Informationen zum Darstellen von 3D‑Modellen in Ihrer App finden Sie unter Entitäten erstellen, steuern und verwalten.