Android-Apps mit XR in 3D anzeigen

Anwendbare XR‑Geräte

Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für diese Arten von XR-Geräten zu entwickeln.

Informationen zu XR-Gerätetypen →

Informationen zu XR-Gerätetypen →

Ihre 2D-Android-App für Smartphones oder große Displays funktioniert standardmäßig in Android XR und wird als 2D-Bereich im 3D-Raum angezeigt. Sie können Ihrer vorhandenen 2D-Android-App immersive XR-Funktionen hinzufügen, um sie von einer flachen Bildschirmdarstellung in eine dynamische 3D-Umgebung zu verwandeln.

Berücksichtigen Sie diese wichtigen Grundsätze, wenn Sie Ihre Android-App für XR optimieren.

• Räumliche Funktionen: Android XR bietet eine Vielzahl von räumlichen Funktionen, die für Ihre App verfügbar sind. Sie müssen jedoch nicht jede einzelne Funktion implementieren. Implementieren Sie sie strategisch, sodass sie die visuelle Hierarchie, die Layouts und die User Journeys Ihrer App ergänzen. Sie können benutzerdefinierte Umgebungen und mehrere Panels einbinden, um ein wirklich immersives Erlebnis zu schaffen. Im Leitfaden zum Design räumlicher Benutzeroberflächen finden Sie Informationen zur optimalen Integration räumlicher Elemente.
• Adaptive Benutzeroberfläche: Mit XR können Sie eine großzügige Benutzeroberfläche entwerfen, die sich nahtlos an einen unendlichen Arbeitsbereich und frei skalierbare Fenster anpasst. Einer der wichtigsten Aspekte ist, dass Sie das Layout Ihrer App mithilfe unserer Designrichtlinien für große Bildschirme für diese Umgebung optimieren. Auch wenn Ihre App derzeit nur für Mobilgeräte verfügbar ist, können Sie fesselnde Umgebungen nutzen, 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, die Benutzeroberfläche mit Jetpack Compose für XR zu erstellen. Wenn Ihre App auf Views basiert, lesen Sie den Abschnitt Views in XR verwenden, um mehr über die Nutzung der Compose-Interoperabilität bei der Arbeit mit Views zu erfahren. Alternativ können Sie auch direkt mit der Jetpack SceneCore-Bibliothek arbeiten.
• Im Play Store veröffentlichen: Damit Ihre XR-optimierte App im Play Store gefunden werden kann, müssen Sie Folgendes tun:
  • Sie können Ihre App optimieren, indem Sie alle unnötigen Funktionsanforderungen entfernen.
  • Achte darauf, dass deine App in der Google Play Console nicht von der XR-Veröffentlichung ausgeschlossen ist, damit sie nicht aus den Play Store-Suchergebnissen entfernt wird.

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

Wenn Sie diese Tipps beachten, kann das einen großen Unterschied machen und Ihre App wirkt optimierter für XR.

• Kompatibilität mit großen Displays priorisieren: Die Benutzeroberfläche Ihrer App sollte den Designprinzipien für große Displays entsprechen, damit Text und Inhalte in weitläufigen XR-Umgebungen optimal lesbar sind.
• Räumliche Funktionen strategisch einsetzen: Ermitteln Sie wichtige Momente im Nutzerablauf Ihrer App, in denen die Einbindung räumlicher Funktionen die Nutzerfreundlichkeit verbessert, und nutzen Sie die einzigartigen Funktionen der Plattform.
• Räumliche Bereiche mit Blick auf den Nutzerkomfort platzieren: Achten Sie beim Entwerfen des Layouts mit räumlichen Bereichen darauf, dass diese in einem angenehmen Abstand zum Nutzer positioniert werden, damit sie nicht zu nah wirken.
• Adaptive Benutzeroberfläche für räumliche Layouts verwenden: Nutzen Sie Konzepte für adaptive Benutzeroberflächen wie Bereiche und progressives Einblenden, um Ihr Layout effektiv in mehrere räumliche Bereiche zu unterteilen und die Informationsdarstellung zu optimieren.
• Orbitale für dauerhafte Elemente und Muster verwenden: Orbitale sollten für dauerhafte und kontextbezogene UX-Elemente wie Navigation und Steuerelemente reserviert sein. Beschränken Sie die Verwendung von Orbitern, um für Übersichtlichkeit zu sorgen und Unordnung zu vermeiden.
• Höhe mit Bedacht einsetzen: Wenden Sie die räumliche Höhe auf temporäre Komponenten an, die stationär bleiben und nicht mit dem Inhalt scrollen. Vermeiden Sie es, große Bereiche zu erheben, um visuelle Unannehmlichkeiten 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 Dokumentation zu Material Design für XR.

Mit Jetpack Compose für XR werden neue Komponenten eingeführt, die XR-Optimierungen verwalten, sodass Sie sich nicht darum kümmern müssen. Sie können beispielsweise SpatialPopup und SpatialDialog verwenden, um die entsprechenden 2D-Varianten zu ersetzen. Diese Komponenten werden als typische 2D-Benutzeroberfläche angezeigt, wenn keine räumliche Benutzeroberfläche verfügbar ist. Andernfalls wird die räumliche Benutzeroberfläche Ihrer App angezeigt. Die Verwendung ist ganz einfach: Sie müssen nur eine Zeile ändern, um das entsprechende 2D-UI-Element zu ersetzen.

Dialog in SpatialDialog umwandeln

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

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

Pop-up in SpatialPopup umwandeln

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

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

2D-UI-Elemente hervorheben

Wenn Sie die Benutzeroberfläche mit einer detaillierteren Steuerung optimieren möchten, können Sie mit SpatialElevation jede zusammensetzbare Funktion in Ihrer App auf eine Ebene über dem räumlichen Bereich auf der Z-Achse heben, die Sie mit SpatialElevationLevel festlegen. So wird die Aufmerksamkeit der Nutzer geweckt, eine bessere Hierarchie geschaffen und die Lesbarkeit verbessert, wie im folgenden Beispiel zu sehen ist.

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

Wichtige Punkte zum Code

• Räumliche Audioeffekte oder Erhöhungen sollten nicht auf große Bereiche und Ebenen wie Bottom Sheets und Side Sheets angewendet werden.
• Heben Sie keine UI-Elemente hervor, die mit dem Inhalt gescrollt werden können.

2D-Komponenten zu Orbitern migrieren

Orbiters sind schwebende Elemente, die in der Regel Steuerelemente enthalten, mit denen der Nutzer interagieren kann. Orbiters können an räumliche Bereiche oder andere Einheiten wie räumliche Layouts angehängt werden. So haben die Inhalte mehr Platz und Nutzer können schnell auf Funktionen zugreifen, ohne dass die Hauptinhalte verdeckt werden.

Der folgende Beispielcode zeigt, wie Sie eine 2D-UI-Komponente zu einem Orbiter migrieren können.

// Previous approach
NavigationRail()

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

Wichtige Informationen zu Orbitern

• Orbiters sind Komponenten, mit denen vorhandene UI-Elemente an ein räumliches Panel angehängt werden können.
• In unseren Designrichtlinien für Android XR-Apps finden Sie Informationen dazu, welche Elemente für Orbiters migriert werden müssen und welche Muster vermieden werden sollten.
• Wir empfehlen, nur wenige Navigationskomponenten wie die Navigationsleiste, die obere App-Leiste oder die untere App-Leiste anzupassen.
• Orbiters 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 Foldables angezeigt.

2D-Komponenten zu räumlichen Bereichen 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 Designen können Sie Komponenten wie Orbiters für Nutzersteuerelemente hinzufügen und UI-Elemente räumlich hervorheben, um auf bestimmte Interaktionen aufmerksam zu machen.

Wichtige Punkte zum Code

• Unter Designrichtlinien für Android XR-Apps finden Sie Informationen dazu, welche Elemente zu Panels migriert werden müssen und welche Muster vermieden werden sollten.
• Halten Sie sich an die Best Practices für die Platzierung von räumlichen Panels:
  • Die Panels sollten 1,5 m vor den Augen des Nutzers zentriert werden.
  • Inhalte sollten im mittleren 41°-Bereich des Sichtfelds des Nutzers angezeigt werden.
• Bereiche bleiben an ihrem Platz, wenn sich ein Nutzer bewegt. Das Verankern ist nur für Passthrough verfügbar.
• Verwenden Sie für Panels die vom System empfohlenen abgerundeten Ecken mit einem Radius von 32 dp.
• Berührungszielbereiche sollten 56 dp groß sein und dürfen nicht kleiner als 48 dp sein.
• Achten Sie auf ein gutes Kontrastverhältnis, damit die Inhalte gut lesbar sind, insbesondere wenn Sie transparente Hintergründe verwenden.
• Halten Sie sich an die Farbprinzipien für Android-Designs und verwenden Sie das Material Design-Farbsystem, um dunkle und helle Designs für Ihre App zu implementieren.
• Verwenden Sie die Spatial Panels API mit vorhandenen UI-Elementen.

2D-Benutzeroberfläche zu einem einzelnen räumlichen Bereich migrieren

Standardmäßig wird Ihre App mit einem einzigen Bereich im Home Space angezeigt. Informationen zum Wechseln zwischen dem privaten Bereich und dem vollständigen Bereich Mit SpatialPanel können Sie diese Inhalte in Full Space einfügen.

Hier ist ein Beispiel dafür:

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            dragPolicy = MovePolicy(),
            resizePolicy = ResizePolicy(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

2D-Benutzeroberfläche zu mehreren räumlichen Feldern migrieren

Sie können entweder ein einzelnes räumliches Feld für die Benutzeroberfläche Ihrer App verwenden oder Ihre 2D-Benutzeroberfläche zu mehreren räumlichen Feldern migrieren. Wenn Sie mehrere Panels für die Benutzeroberfläche Ihrer App verwenden, können Sie sie positionieren und drehen (analog zur Anordnung Ihrer Benutzeroberfläche in 2D). Sie beginnen mit einer klaren Designvision für das, was Sie erreichen möchten. Anschließend können Sie Spatial UI Layout APIs (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) und Unterraummodifikatoren verwenden, um Panels zu positionieren und zu drehen. Bei der Implementierung mehrerer Bereiche sollten Sie einige wichtige Muster vermeiden.

• Vermeiden Sie überlappende Bereiche, die verhindern, dass Nutzer wichtige Informationen sehen.
• Vermeiden Sie es, den Nutzer mit zu vielen Feldern zu überfordern.
• Vermeiden Sie es, Panels an unbequemen oder unauffälligen Stellen zu platzieren. Beispiel: Bereiche, die sich hinter dem Nutzer befinden, sind schwer zu erkennen.
• Weitere Informationen zum Entwickeln einer räumlichen Benutzeroberfläche

SpatialRow {
    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()
    }
}
SpatialRow.kt

Räumliche 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 das zu Problemen führen, wenn sich die Funktionen auf einem bestimmten Gerät im Laufe der Zeit ändern. Verwenden Sie stattdessen LocalSpatialCapabilities.current.isSpatialUiEnabled, um direkt nach den erforderlichen Räumlichkeitsfunktionen zu suchen, wie im folgenden Beispiel gezeigt. So wird sichergestellt, dass sich Ihre App korrekt an eine Vielzahl von XR-Erlebnissen anpasst, ohne dass jedes Mal Updates erforderlich sind, wenn neue Geräte auf den Markt kommen oder sich Funktionen ändern.

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

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

Umgebungen verwenden, um die Umgebung des Nutzers zu ändern

Wenn Sie in Ihrer App ein immersives Erlebnis schaffen möchten, indem Sie die Umgebung des Nutzers ändern, können Sie das mit 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 Einrichten von Umgebungen

3D‑Inhalte hinzufügen

3D-Inhalte wie 3D-Modelle und räumliche Videos können für ein intensiveres Erlebnis sorgen und das räumliche Verständnis verbessern. Ihre App kann nur 3D-Inhalte anzeigen, wenn räumliche Funktionen verfügbar sind. Sie sollten also zuerst prüfen, ob räumliche Funktionen verfügbar sind.

Weitere Informationen zum Hinzufügen von 3D-Modellen, räumlichen Videos oder Spatial Audio finden Sie im entsprechenden Leitfaden.