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, die Ihnen dabei helfen sollen, Ihre Apps für Android XR zu entwickeln und vorzubereiten.

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 Google Play Store in einer ganz neuen Dimension erleben: der dritten Dimension.

Die dritte Dimension ist geräumig und bietet viel Platz für Ihre Apps. Legen Sie noch heute los und verwenden Sie die Tools, die für Ihre App am besten geeignet sind. Mit dem Jetpack XR SDK können Sie beispielsweise immersive XR-Erlebnisse mit modernen Android-Entwicklungstools wie Kotlin und Compose erstellen.

In diesem Blogpost erzählen wir Ihnen, wie wir unsere beliebte Androidify App in die XR-Welt gebracht haben. Außerdem erfahren Sie, was Sie tun müssen, um Ihre Apps für XR vorzubereiten.

Ein Rundgang durch Androidify

Androidify ist eine Open-Source-App, mit der Sie Android-Bots erstellen können. 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 können Sie 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 mit Android XR kompatibel, ohne dass Änderungen an der App vorgenommen werden müssen.

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 auf Android XR verfügbar. 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 dieser Hinsicht ähnelt es dem Desktop-Freiform-Fenster auf einem großen Android-Gerät, nur 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, Ihre App nur im Full Space auszuführen, aber Ihre Nutzer möchten möglicherweise Multitasking mit Ihrer App betreiben. Wenn Sie beide Modi unterstützen, verbessern Sie die Nutzererfahrung.

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. Ivy, bitte!

Das Design für XR erforderte einen einzigartigen Ansatz, hatte aber auch viel mit dem mobilen Design 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 sollten Sie adaptive Layouts verwenden, damit Sie Ihre Layouts für die räumliche Benutzeroberfläche in Teile aufteilen können.

Design mit dem Home Space beginnen

Glücklicherweise können Sie bei Android XR mit Ihrer App im aktuellen Zustand für den Home Space beginnen. Wir konnten zu den erweiterten XR-Designs übergehen, indem wir einfach eine Fensterleiste und einen Button 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 eine natürliche Begrenzung zu schaffen, indem wir die anderen Bereiche umrandet haben. Schließlich wird die intrinsische Begrenzung durch die Nähe bestimmter Elemente zu anderen angedeutet, z. B. durch den unteren Button „Transformation starten“, der sich in der Nähe des Bereichs „Farbe für meinen Bot auswählen“ befindet.

Räumliche Bereiche ermöglichten eine einfache Trennung. Wenn Sie entscheiden möchten, wie Sie Ihre mobilen Designs für räumliche Bereiche anpassen, entfernen Sie Oberflächen. Beginnen Sie mit der Oberfläche, die am weitesten hinten liegt, und arbeiten Sie sich dann nach vorne. Sehen Sie, wie viele Hintergründe Sie entfernen können und was übrig bleibt. Nachdem wir diese Übung für Androidify durchgeführt hatten, blieb das große grüne Android-Symbol übrig. Das Symbol 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 der Nutzererfahrung zu entwickeln.

Weitere Designtipps, damit Ihre App räumlich wird

• Keine Begrenzungen: Entfernen Sie Komponenten aus ihren Begrenzungen und geben Sie ihnen echten (räumlichen) Platz. Es ist an der Zeit, diesen UI-Elementen etwas Raum zum Atmen zu geben.
• Oberflächen entfernen: Blenden Sie den Hintergrund aus und sehen Sie, wie sich das auf Ihre Designs auswirkt.
• Mit Bewegung motivieren: Wie verwenden Sie Übergänge in Ihrer App? Stellen Sie sich vor, wie Ihre App in die VR-Welt eintaucht.
• Anker auswählen: Sorgen Sie dafür, dass sich Ihre Nutzer nicht im Raum verlieren. Verwenden Sie ein Element, das die Benutzeroberfläche zusammenhält oder verankert.

Weitere Informationen zu UI-Designmustern für XR finden Sie 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 Sie mit modernen Android-Tools und ‑Bibliotheken vertraut sind, sollte Ihnen die Entwicklung einer räumlichen Benutzeroberfläche mit dem Jetpack XR SDK bekannt vorkommen. Sie werden Konzepte finden, mit denen Sie bereits vertraut sind, 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 Sie 2D-Inhalte wie Text, Buttons und Videos anzeigen können.

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 Ihrer 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 den Inhalten bewegen, an die er angehängt ist. Sie werden häufig verwendet, um kontextbezogene Steuerelemente für die Inhalte bereitzustellen, an die 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 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 Sie auf der Jetpack XR dependencies Seite finden.

Wir haben Code für einen Button hinzugefügt, mit dem 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 Button-Komponente mit dem Symbol „Inhalte 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 Sie jetzt auf diesen Button klicken, 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: einen Bereich, in dem sich die Videokarte rechts befindet, und einen Bereich, der die Hauptbenutzeroberfläche enthält. Außerdem ist oben ein Orbiter angehängt. Beginnen wir mit dem Videoplayer-Bereich:

@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 den Hauptinhaltsbereich haben wir dasselbe gemacht: Wir haben Inhalte aus dem mittleren Bereich in einem SpatialPanel wiederverwendet.

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

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

Wenn wir sie im selben Subspace platzieren, sind sie unabhängig voneinander. Deshalb haben wir den VideoPlayer-Bereich zu einem untergeordneten Element des Hauptinhaltsbereichs gemacht. Dadurch bewegt sich der VideoPlayer-Bereich mit, wenn der Hauptinhaltsbereich 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-Komponierbare Funktionen 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 einem Prompt 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 ein echter 3D-Übergang verwendet, wenn die verwendete Eingabe angezeigt wird, wobei 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 Google 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 Google 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. Sie können jedoch XR-spezifische Screenshots Ihrer App hinzufügen oder sogar eine immersive Vorschau Ihrer App mit einem räumlichen Video-Asset hochladen. Auf Android XR-Geräten wird dies im Google Play Store automatisch als immersive 3D-Vorschau angezeigt, sodass Nutzer die Tiefe und Größe Ihrer Inhalte erleben können, bevor sie die App installieren.

Erstellen Sie noch heute Ihre eigenen Erlebnisse

Androidify ist ein gutes Beispiel dafür, wie Sie eine bestehende 2D-Jetpack Compose-App räumlich gestalten können. 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 Google Play Store veröffentlicht.

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

• Sehen Sie sich den Quellcode für Androidify an und erstellen Sie Ihren eigenen Bot mit Androidify auf Google Play.
• Beginnen Sie mit unserer Entwicklerdokumentation und erfahren Sie mehr über Jetpack Compose für XR.
• Laden Sie den Android XR-Emulator herunter und testen Sie Ihre eigene App.