Das Samsung Galaxy XR ist da – mit Android XR! Dieser Blogpost ist Teil unserer Android XR Spotlight Week, in der wir Ressourcen wie Blogposts, Videos und Beispielcode bereitstellen, damit du deine Apps für Android XR entwickeln und vorbereiten kannst.

Mit dem Samsung Galaxy XR ist das erste Gerät mit Android XR offiziell da. Nutzer können jetzt viele ihrer Lieblings-Apps aus dem Play Store in einer ganz neuen Dimension erleben: der dritten Dimension.

Die dritte Dimension ist geräumig und bietet auch für deine Apps viel Platz. Beginne noch heute mit den Tools, die für deine App geeignet sind. Mit dem Jetpack XR SDK kannst du beispielsweise immersive XR-Erlebnisse mit modernen Android-Entwicklungstools wie Kotlin und Compose erstellen.

In diesem Blogpost erzählen wir dir, wie wir unsere beliebte Androidify App in die XR-Welt gebracht haben. Außerdem erfährst du, was du tun musst, um deine Apps für XR vorzubereiten.

Ein Rundgang durch Androidify

Androidify ist eine Open-Source-App, mit der du Android-Bots erstellen kannst. Dabei werden einige der neuesten Technologien wie Gemini, CameraX, Navigation 3 und natürlich Jetpack Compose verwendet. Androidify wurde ursprünglich so entwickelt, dass es auf Smartphones, faltbaren Geräten und Tablets gut aussieht. Dazu wurden adaptive Layouts erstellt.

Androidify sieht auf verschiedenen Formfaktoren gut aus

Eine wichtige Säule adaptiver Layouts sind wiederverwendbare Composables. Mit Jetpack Compose kannst du kleine UI-Komponenten erstellen, die auf verschiedene Arten angeordnet werden können, um intuitive Nutzererlebnisse zu schaffen – unabhängig davon, welches Gerät der Nutzer verwendet. Androidify ist sogar ohne Änderungen an der App mit Android XR kompatibel.

Androidify passt sich mit seinem responsiven Layout für große Bildschirme ohne Codeänderungen an XR an

Apps, die nicht speziell für Android XR entwickelt wurden, können in einem entsprechend großen Fenster für Multitasking verwendet werden und funktionieren ähnlich wie auf einem großen Bildschirm. Deshalb ist Androidify bereits ohne zusätzliche Arbeit vollständig mit Android XR kompatibel. Wir wollten uns damit aber nicht zufriedengeben und haben uns entschieden, eine spezielle XR-App zu entwickeln, um unseren XR-Nutzern ein noch besseres Erlebnis zu bieten.

Orientierung in der XR-Welt

Sehen wir uns die wichtigsten grundlegenden Konzepte für Android XR an. Dazu gehören die beiden Modi, in denen Apps ausgeführt werden können: Home Space und Full Space.

Im Home Space können mehrere Apps nebeneinander ausgeführt werden, sodass Nutzer in verschiedenen Fenstern Multitasking betreiben können. In diesem Sinne ähnelt es dem Desktop-Fenstermodus auf einem Android-Gerät mit großem Bildschirm, aber im virtuellen Raum.

Im Full Space hat die App keine räumlichen Grenzen und kann alle räumlichen Funktionen von Android XR nutzen, z. B. die räumliche Benutzeroberfläche und die Steuerung der virtuellen Umgebung.

Es mag verlockend sein, deine App nur im Full Space auszuführen, aber deine Nutzer möchten möglicherweise Multitasking mit deiner App betreiben. Wenn du beide Modi unterstützt, verbesserst du die Nutzerfreundlichkeit.

Design für die neue Dimension von Androidify

Eine gute App beginnt mit einem guten Design. Ivy Knight, Senior Design Advocate bei Android DevRel, hat die Aufgabe übernommen, bestehende Designs für Androidify zu verwenden und ein neues Design für XR zu entwickeln. Los geht's, Ivy!

Das Design für XR erforderte einen einzigartigen Ansatz, hatte aber auch viel mit dem Design für Mobilgeräte gemeinsam. Zuerst haben wir uns mit der Begrenzung beschäftigt: Wie können wir unsere UI-Elemente im Unterraum organisieren und gruppieren, entweder durch klare Grenzen oder durch subtile Andeutungen? Außerdem haben wir gelernt, alle verschiedenen Größen von räumlichen UI-Elementen zu nutzen, die sich an den Nutzer anpassen und bewegen sollen. Wie bei Androidify solltest du adaptive Layouts verwenden, damit du deine Layouts für die räumliche Benutzeroberfläche in Teile aufteilen kannst.

Design mit dem Home Space beginnen

Glücklicherweise kannst du bei Android XR mit deiner App im aktuellen Zustand für den Home Space beginnen. Wir konnten zu den erweiterten XR-Designs übergehen, indem wir einfach eine Fensterleiste und eine Schaltfläche für den Übergang zum Full Space hinzugefügt haben.

Wir haben auch mögliche Hardwarefunktionen und die Interaktion des Nutzers damit berücksichtigt. Die mobilen Layouts für Androidify passen sich an verschiedene Positionen, Klassengrößen und die Anzahl der Kameras an, um mehr Fotooptionen zu bieten. Nach diesem Modell mussten wir auch das Kameralayout für Headset-Geräte anpassen. Außerdem mussten wir Anpassungen für Text vornehmen, um die Nähe der Benutzeroberfläche zum Nutzer zu berücksichtigen.

Design für den größeren Übergang zum Full Space

Der Full Space war die größte Veränderung, bot uns aber auch den größten kreativen Spielraum, um unser Design anzupassen. 

Androidify verwendet visuelle Begrenzungen oder Bereiche, um Funktionen mit einem Hintergrund und einer Umrandung zu gruppieren, z. B. den Bereich „Foto aufnehmen oder auswählen“. Wir haben auch Komponenten wie die obere App-Leiste verwendet, um durch die Umrandung der anderen Bereiche eine natürliche Begrenzung zu schaffen. Schließlich wird die intrinsische Begrenzung durch die Nähe bestimmter Elemente zu anderen angedeutet, z. B. durch die Schaltfläche „Transformation starten“ unten, die sich in der Nähe des Bereichs „Farbe für meinen Bot auswählen“ befindet.

Räumliche Bereiche ermöglichten eine einfache Trennung. Wenn du entscheiden möchtest, wie du deine mobilen Designs für räumliche Bereiche anpassen kannst, entferne zuerst die Oberflächen, beginnend mit der am weitesten hinten liegenden Oberfläche. Sieh dir an, wie viele Hintergründe du entfernen kannst und was übrig bleibt. Nachdem wir das für Androidify getan hatten, blieb das große grüne Android-Zeichen übrig. Das Zeichen diente nicht nur als Branding-Element und Hintergrund, sondern auch als Anker für die Inhalte im 3D-Raum.

Durch diesen Anker konnten wir uns besser vorstellen, wie sich Elemente darum bewegen könnten und wie wir die Nähe nutzen könnten, um den Rest des Nutzererlebnisses zu entwickeln.

Weitere Designtipps, um deine App räumlicher zu gestalten

• Keine Begrenzungen: Teile Komponenten auf und gib ihnen echten (räumlichen) Platz. Es ist Zeit, diesen UI-Elementen etwas Raum zu geben.
• Oberflächen entfernen: Blende den Hintergrund aus und sieh dir an, wie sich das auf deine Designs auswirkt.
• Mit Bewegung motivieren: Wie verwendest du Übergänge in deiner App? Stell dir vor, wie deine App in die VR-Welt eintaucht.
• Anker auswählen: Sorge dafür, dass sich deine Nutzer im Raum nicht verloren fühlen. Verwende ein Element, das die Benutzeroberfläche zusammenhält oder verankert.

Weitere Informationen zu UI-Designmustern für XR findest du unter Design für Android XR auf Android Developers.

Grundlagen der räumlichen Benutzeroberfläche

Nachdem wir nun über Ivys Erfahrungen bei der Anpassung ihrer Denkweise beim Design von Androidify für XR gesprochen haben, wollen wir uns mit der Entwicklung einer räumlichen Benutzeroberfläche beschäftigen. Wenn du mit modernen Android-Tools und ‑Bibliotheken vertraut bist, sollte dir die Entwicklung einer räumlichen Benutzeroberfläche mit dem Jetpack XR SDK bekannt vorkommen. Du wirst Konzepte finden, mit denen du bereits vertraut bist, z. B. das Erstellen von Layouts mit Compose. Räumliche Layouts ähneln 2D-Layouts mit Zeilen, Spalten und Abständen sehr:

Diese Elemente sind in SpatialRows und SpatialColumns angeordnet.

Die hier gezeigten räumlichen Elemente sind SpatialPanel-Composables, mit denen du 2D-Inhalte wie Text, Schaltflächen und Videos anzeigen kannst.

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

Ein SpatialPanel ist ein Subspace-Composable. Subspace-Composables müssen in einem Subspace enthalten sein und werden durch SubspaceModifier-Objekte geändert. Subspaces können an beliebiger Stelle in der UI-Hierarchie deiner App platziert werden und dürfen nur Subspace-Composables enthalten.SubspaceModifier-Objekte ähneln auch Modifier-Objekten: Sie steuern Parameter wie Größe und Positionierung.

Ein Orbiter kann an ein SpatialPanel angehängt werden und sich zusammen mit dem Inhalt bewegen, an den er angehängt ist. Sie werden häufig verwendet, um kontextbezogene Steuerelemente für den Inhalt bereitzustellen, an den sie angehängt sind, wobei der Inhalt im Vordergrund steht. Sie können an einer der vier Seiten des Inhalts in einem konfigurierbaren Abstand platziert werden.

Es gibt noch viele weitere räumliche UI-Elemente, aber das sind die wichtigsten, die wir zum Erstellen räumlicher Layouts für Androidify verwendet haben.

Erste Schritte mit der XR-Entwicklung

Beginnen wir mit der Projekteinrichtung. Wir haben die Jetpack XR Compose-Abhängigkeit hinzugefügt, die du auf der Jetpack XR dependencies Seite findest.

Wir haben Code für eine Schaltfläche hinzugefügt, mit der der Nutzer zum Full Space wechseln kann. Zuerst wird geprüft, ob das möglich ist:

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

Dann haben wir unseren bestehenden Layouts eine neue Schaltflächenkomponente mit dem Symbol „Inhalt maximieren“ hinzugefügt und ihr ein onClick-Verhalten zugewiesen:

  @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"),
       )
   }
}

Wenn du jetzt auf diese Schaltfläche klickst, wird das mittlere Layout im Full Space angezeigt. Wir können die räumlichen Funktionen prüfen und feststellen, ob die räumliche Benutzeroberfläche angezeigt werden kann. In diesem Fall zeigen wir stattdessen unser neues räumliches Layout:

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

Design für den Startbildschirm implementieren

Sehen wir uns das räumliche Design für den Startbildschirm im Full Space an, um zu verstehen, wie es implementiert wurde.

Hier haben wir zwei SpatialPanel-Elemente identifiziert: ein Panel, in dem sich die Videokarte rechts befindet, und ein Panel, das die Hauptbenutzeroberfläche enthält. Außerdem ist oben ein Orbiter angehängt. Beginnen wir mit dem Videoplayer-Panel:

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

Wir haben die 2D-VideoPlayer-Komponente aus den regulären Layouts einfach in einem SpatialPanel wiederverwendet, ohne zusätzliche Änderungen vorzunehmen. So sieht sie eigenständig aus:

Für das Hauptinhalts-Panel haben wir dasselbe gemacht: Wir haben Inhalte aus dem mittleren Panel in einem SpatialPanel wiederverwendet.

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

Wir haben diesem Panel eine ResizePolicy zugewiesen, die dem Panel einige Ziehpunkte in der Nähe der Ränder gibt, mit denen der Nutzer die Größe des Panels ändern kann. Außerdem hat es eine MovePolicy, mit der der Nutzer es verschieben kann.

Wenn wir sie im selben Subspace platzieren, sind sie unabhängig voneinander. Deshalb haben wir das VideoPlayer-Panel zu einem untergeordneten Element des Hauptinhalts-Panels gemacht. Dadurch wird das VideoPlayer-Panel verschoben, wenn das Hauptinhalts-Panel über eine Über-/Unterordnungsbeziehung verschoben wird.

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

So haben wir den ersten Bildschirm erstellt.

Zu den anderen Bildschirmen übergehen

Ich werde auch kurz auf einige der anderen Bildschirme eingehen und dabei auf bestimmte Überlegungen hinweisen, die für jeden Bildschirm getroffen wurden.

Hier haben wir SpatialRow- und SpatialColumn-Composables verwendet, um ein Layout zu erstellen, das dem empfohlenen Betrachtungsraum entspricht. Dabei haben wir wieder Komponenten aus dem mittleren Layout wiederverwendet.

Ergebnisbildschirm im Full Space: Ein Bot, der mit einer Eingabeaufforderung generiert wurde: rote Baseballkappe, Pilotenbrille, hellblaues T‑Shirt, rot-weiß karierte Shorts, grüne Flip-Flops und ein Tennisschläger in der Hand.

Auf dem Ergebnisbildschirm werden die ergänzenden Zitate mit einem Weichzeichnungseffekt angezeigt, sodass sie in der Nähe der Bildschirmränder ausgeblendet werden. Außerdem wird beim Anzeigen der verwendeten Eingabe ein echter 3D-Übergang verwendet, bei dem das Bild im Raum umgedreht wird.

Im Google Play Store veröffentlichen

Nachdem die App mit den räumlichen Layouts für XR bereit war, haben wir sie im Play Store veröffentlicht. Es gibt noch eine letzte wichtige Änderung, die wir an der Datei „AndroidManifest.xml“ der App vorgenommen haben:

  <!-- 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" />

Dadurch weiß der Play Store, dass diese App spezielle XR-Funktionen hat. Es wird ein Badge angezeigt, das Nutzern zeigt, dass die App für XR entwickelt wurde:

Beim Hochladen des Releases sind keine besonderen Schritte für die Veröffentlichung für XR erforderlich: Dieselbe App wird wie gewohnt an Nutzer im mobilen Track und an Nutzer auf einem XR-Gerät verteilt. Du kannst jedoch XR-spezifische Screenshots deiner App hinzufügen oder sogar eine immersive Vorschau deiner App mit einem räumlichen Video-Asset hochladen. Auf Android XR-Geräten wird dies im Play Store automatisch als immersive 3D-Vorschau angezeigt, sodass Nutzer die Tiefe und Größe deiner Inhalte sehen können, bevor sie die App installieren.

Beginne noch heute mit der Entwicklung deiner eigenen Erlebnisse

Androidify ist ein gutes Beispiel dafür, wie du eine vorhandene 2D-Jetpack Compose-App räumlicher gestalten kannst. Heute haben wir den gesamten Prozess der Entwicklung einer räumlichen Benutzeroberfläche für Androidify gezeigt, vom Design über den Code bis zur Veröffentlichung. Wir haben die bestehenden Designs so geändert, dass sie mit räumlichen Paradigmen funktionieren, SpatialPanel- und Orbiter-Composables verwendet, um räumliche Layouts zu erstellen, die angezeigt werden, wenn der Nutzer den Full Space aufruft, und schließlich die neue Version der App im Play Store veröffentlicht.

Wir hoffen, dass dieser Blogpost dir geholfen hat, zu verstehen, wie du deine eigenen Apps für Android XR entwickeln kannst. Hier sind einige weitere Links, die dir dabei helfen können:

• Sieh dir den Quellcode für Androidify an und erstelle deinen eigenen Bot mit Androidify auf Google Play.
• Beginne mit unserer Entwicklerdokumentation und erfahre mehr über Jetpack Compose für XR.
• Lade den Android XR-Emulator herunter und probiere deine eigene App aus.