Androidify für XR mit dem Jetpack XR SDK

Das Samsung Galaxy XR ist da und wird von Android XR unterstützt. Dieser Blogbeitrag ist Teil unserer Android XR Spotlight Week, in der wir Ressourcen wie Blogbeiträge, Videos und Beispielcode bereitstellen, die Ihnen helfen sollen, Ihre Apps für Android XR zu entwickeln und vorzubereiten.

Mit der Einführung des Samsung Galaxy XR ist das erste Gerät mit Android XR offiziell da. Viele beliebte Apps aus dem Google Play Store sind jetzt in 3D verfügbar.

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

In diesem Blogpost berichten wir, wie wir die beliebte Androidify App für XR entwickelt haben. Außerdem gehen wir auf die Grundlagen ein, die erforderlich sind, um Ihre Apps für XR zu optimieren.

Androidify kennenlernen

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 für Smartphones, faltbare Smartphones und Tablets entwickelt und verwendet dazu adaptive Layouts.

Androidify sieht auf verschiedenen Formfaktoren gut aus

Ein wichtiger Grundsatz für adaptive Layouts sind wiederverwendbare Composables. Mit Jetpack Compose können Sie kleine UI-Komponenten erstellen, die auf unterschiedliche Weise angeordnet werden können, um intuitive Benutzeroberflächen 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 ohne Codeänderungen an XR an, da das Layout für große Displays responsiv ist

Apps, die nicht speziell für Android XR entwickelt wurden, können in einem Fenster mit passender Größe im Multitasking-Modus verwendet werden und funktionieren ähnlich wie auf einem großen Display. Daher ist Androidify unter Android XR bereits vollständig verfügbar, ohne dass zusätzliche Arbeit erforderlich ist. Wir wollten aber noch einen Schritt weiter gehen und haben uns entschieden, eine spezielle XR-App zu entwickeln, um unseren XR-Nutzern ein noch besseres Erlebnis zu bieten.

Orientierung in XR

Sehen wir uns die wichtigsten grundlegenden Konzepte für Android XR an. Wir beginnen mit den 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 der Desktop-Freiform-Fensterfunktion auf einem Android-Gerät mit großem Display, nur im virtuellen Raum.

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

Es mag zwar verlockend sein, Ihre App nur in Full Space auszuführen, aber Ihre Nutzer möchten möglicherweise mit Ihrer App Multitasking betreiben. Die Unterstützung beider Modi sorgt also für eine bessere Nutzerfreundlichkeit.

Für die neue Dimension von Androidify entwickeln

Eine ansprechende App beginnt mit einem guten Design. Ivy Knight, Senior Design Advocate bei Android DevRel, hat sich der Aufgabe angenommen, bestehende Designs für Androidify zu verwenden und ein neues Design für XR zu entwickeln. Ivy, du bist dran!

Das Design für XR erforderte einen einzigartigen Ansatz, hatte aber tatsächlich viel mit dem Design für Mobilgeräte gemeinsam. Wir haben uns zuerst mit der Eindämmung beschäftigt: Wie können wir unsere UI-Elemente im Unterraum organisieren und gruppieren, indem wir entweder Grenzen deutlich zeigen oder sie subtil andeuten? Außerdem haben wir gelernt, alle verschiedenen Größen von räumlichen UI-Elementen zu nutzen, die sich an den Nutzer anpassen und entsprechend bewegen sollen. Wie bei Androidify erstellen Sie adaptive Layouts, damit Sie Ihre Layouts in Teile für Ihre räumliche Benutzeroberfläche aufteilen können.

Design mit Home Space beginnen

Glücklicherweise können Sie bei Android XR mit Ihrer App im aktuellen Zustand für den Home Space beginnen. Für die Umstellung auf die erweiterten XR-Designs müssen Sie lediglich eine Fenster-Symbolleiste und eine Schaltfläche für den Übergang zum Full Space hinzufügen.

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

Design für die größere Umstellung auf Full Space

Full Space war die größte Änderung, bot uns aber auch den größten kreativen Spielraum für die Anpassung unseres Designs. 

Bei Androidify werden Funktionen mit einem Hintergrund und einer Umrisslinie gruppiert, z. B. im Bereich „Foto aufnehmen oder auswählen“. Außerdem haben wir Komponenten wie die obere App-Leiste verwendet, um die anderen Bereiche zu umrahmen und so eine natürliche Begrenzung zu schaffen. Schließlich wird die intrinsische Eingrenzung durch die Nähe bestimmter Elemente zueinander angedeutet, z. B. durch die Schaltfläche „Transformation starten“ unten, die sich in der Nähe des Bereichs „Bot-Farbe auswählen“ befindet.

Räumliche Panels für eine einfache Trennung. Um zu entscheiden, wie Sie Ihre mobilen Designs für räumliche Panels anpassen, entfernen Sie zuerst die am weitesten hinten liegende Oberfläche und arbeiten Sie sich dann nach vorn. Sehen Sie sich an, wie viele Hintergründe Sie entfernen können und was übrig bleibt. Nachdem wir diese Übung für Androidify durchgeführt hatten, blieb die große grüne Android-Schlange übrig. Die geschwungene Linie diente nicht nur als Branding-Element und Hintergrund, sondern auch als Anker für die Inhalte im 3D-Raum.

Durch die Festlegung dieses Ankers konnten wir uns leichter vorstellen, wie sich Elemente darum bewegen könnten und wie wir die Nähe nutzen könnten, um den Rest der User Experience zu gestalten.

Weitere Designtipps für räumliche Apps

• Elemente nicht einschränken: Lösen Sie Komponenten aus dem Raster und geben Sie ihnen etwas echten (räumlichen) Platz. Es ist an der Zeit, diesen UI-Elementen etwas mehr Platz zu geben.
• Oberflächen entfernen: Blenden Sie den Hintergrund aus, um zu sehen, wie sich das auf Ihre Designs auswirkt.
• Mit Bewegung motivieren: Wie setzen Sie Übergänge in Ihrer App ein? Stellen Sie sich vor, wie Ihre App in VR aussehen könnte.
• Anker auswählen: Nutzer sollten sich im Raum nicht verirren. Ein Element, das hilft, die Benutzeroberfläche zu erfassen oder zu verankern.

Weitere Informationen zu XR-UI-Designmustern finden Sie unter Design for Android XR on Android Developers.

Grundlagen der räumlichen Benutzeroberfläche

Nachdem wir nun gesehen haben, wie Ivy ihre Denkweise beim Design von Androidify für XR angepasst hat, sprechen wir jetzt über die Entwicklung von räumlichen UIs. Wenn Sie mit modernen Android-Tools und ‑Bibliotheken vertraut sind, sollte die Entwicklung einer räumlichen Benutzeroberfläche mit dem Jetpack XR SDK für Sie kein Problem sein. Sie werden Konzepte finden, mit denen Sie bereits vertraut sind, z. B. das Erstellen von Layouts mit Compose. Tatsächlich ähneln räumliche Layouts 2D-Layouts mit Zeilen, Spalten und Abstandszeichen:

Diese Elemente sind in SpatialRows und SpatialColumns angeordnet.

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

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

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

Eine Orbiter kann an ein SpatialPanel angehängt werden und sich mit den Inhalten bewegen, an die sie angehängt ist. Sie werden häufig verwendet, um Kontextinformationen zu den Inhalten zu liefern, an die sie angehängt sind, wobei der Fokus auf den Inhalten liegt. Sie können an jeder 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 Seite Jetpack XR-Abhängigkeiten finden.

Wir haben Code für eine Schaltfläche hinzugefügt, die den Nutzer in den Full Space-Modus versetzt. Zuerst wird jedoch geprüft, ob dies möglich ist:

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

Wir haben dann eine neue Schaltflächenkomponente erstellt, die das Symbol zum Maximieren von Inhalten in unseren vorhandenen Layouts verwendet und ein onClick-Verhalten hat:

@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 nur das Layout „Mittel“ im Vollbildmodus angezeigt. Wir können die räumlichen Funktionen prüfen und feststellen, ob eine räumliche Benutzeroberfläche angezeigt werden kann. In diesem Fall wird unser neues räumliches Layout angezeigt:

@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 noch einmal das räumliche Design für den Startbildschirm in Full Space an, um zu verstehen, wie es umgesetzt wurde.

Wir haben hier zwei SpatialPanel-Elemente identifiziert: ein Panel, in dem sich die Videokarte rechts befindet, und eines, das die Haupt-Benutzeroberfläche enthält. Oben ist ein Orbiter angebracht. Beginnen wir mit dem Videoplayer-Steuerfeld:

@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 es aus, wenn es allein verwendet wird:

Im Hauptinhaltsbereich wurde dieselbe Geschichte erzählt: 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 anpassen kann. Außerdem hat sie eine MovePolicy, mit der der Nutzer sie verschieben kann.

Wenn wir sie im selben Subspace platzieren, sind sie unabhängig voneinander. Deshalb haben wir das VideoPlayer-Panel als untergeordnetes Element des Hauptinhalts-Panels festgelegt. Dadurch wird das VideoPlayer-Panel verschoben, wenn das Hauptinhaltsfeld über eine Über-/Unterordnungsbeziehung gezogen 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 wechseln

Ich werde auch kurz auf einige der anderen Bildschirme eingehen und die jeweiligen Besonderheiten hervorheben.

Hier haben wir die Composables „SpatialRow“ und „SpatialColumn“ verwendet, um ein Layout zu erstellen, das dem empfohlenen Betrachtungsbereich entspricht. Dabei haben wir wieder Komponenten aus dem Medium-Layout verwendet.

Ergebnisbildschirm im Vollbildmodus: Ein mit einem Prompt generierter Bot: rote Baseballkappe, Pilotenbrille, hellblaues T‑Shirt, rot-weiß karierte Shorts, grüne Flip-Flops und ein Tennisschläger in der Hand.

Auf dem Bildschirm mit den Ergebnissen werden die zusätzlichen Zitate mit einem Weichzeichnungseffekt angezeigt, sodass sie an den Rändern des Bildschirms ausblenden. Außerdem wird ein tatsächlicher 3D-Übergang verwendet, wenn die verwendete Eingabe angezeigt wird, wobei das Bild im Raum umgedreht wird.

Veröffentlichung im Google Play Store

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 AndroidManifest.xml-Datei 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" />

So wird dem Google Play Store mitgeteilt, dass diese App XR-spezifische Funktionen hat. Nutzer sehen dann ein entsprechendes Logo, das darauf hinweist, 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 Nutzern im mobilen Track wie Nutzern auf einem XR-Gerät bereitgestellt. Sie können aber auch XR-spezifische Screenshots Ihrer App hinzufügen oder eine immersive Vorschau Ihrer App mit einem Spatial-Video-Asset hochladen. Auf Android XR-Geräten wird dies im Google Play Store automatisch als immersive 3D-Vorschau angezeigt. So können Nutzer die Tiefe und den Maßstab Ihrer Inhalte erleben, bevor sie die App installieren.

Jetzt eigene Erlebnisse erstellen

Androidify ist ein gutes Beispiel dafür, wie eine vorhandene 2D-Jetpack Compose-App räumlich dargestellt werden kann. Heute haben wir den gesamten Prozess der Entwicklung einer räumlichen Benutzeroberfläche für Androidify gezeigt, vom Design über den Code bis hin zur Veröffentlichung. Wir haben die vorhandenen Designs für die räumliche Darstellung angepasst, SpatialPanel- und Orbiter-Composables verwendet, um räumliche Layouts zu erstellen, die angezeigt werden, wenn der Nutzer den Full Space betritt, 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 auf Android XR nutzen können. Hier sind einige weitere Links, die Ihnen helfen können:

• Quellcode für Androidify ansehen und mit Androidify bei Google Play einen eigenen Bot erstellen.
• Erste Schritte mit unserer Entwicklerdokumentation und weitere Informationen zu Jetpack Compose für XR
• Laden Sie den Android XR-Emulator herunter und probieren Sie Ihre eigene App aus.