Das Samsung Galaxy XR ist da und basiert auf Android XR. 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 Play Store sind jetzt in 3D verfügbar.

Die dritte Dimension ist geräumig und bietet viel Platz für Ihre Apps. Verwenden Sie die Tools, die für Ihre App 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 berichten wir, wie wir die beliebte Androidify App für XR umgesetzt haben. Außerdem gehen wir auf die Grundlagen ein, die für die Umsetzung Ihrer Apps für XR erforderlich sind.

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 Bestandteil adaptiver 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 mit Android XR kompatibel, ohne dass Änderungen an der App erforderlich sind.

Androidify passt sich an XR an, indem das responsive Layout für große Displays ohne Codeänderungen verwendet wird

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. Daher ist Androidify unter Android XR bereits voll funktionsfähig und es sind keine zusätzlichen Schritte erforderlich. Wir wollten aber noch einen Schritt weiter gehen und haben uns entschieden, eine XR-optimierte 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 vollständig nutzen, z. B. die räumliche Benutzeroberfläche und die Steuerung der virtuellen Umgebung.

Es mag zwar verlockend sein, Ihre App nur im Vollbildmodus auszuführen, aber Ihre Nutzer möchten möglicherweise mit Ihrer App Multitasking betreiben. Daher ist es besser, beide Modi zu unterstützen.

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, leg los!

Das Design für XR erforderte einen einzigartigen Ansatz, hatte aber tatsächlich viel mit dem Design für Mobilgeräte gemeinsam. Zuerst haben wir uns überlegt, wie wir die UI-Elemente im Unterraum organisieren und gruppieren können, indem wir entweder Grenzen deutlich zeigen oder sie subtil andeuten. Außerdem haben wir gelernt, die verschiedenen Größen von räumlichen UI-Elementen zu nutzen, die sich an den Nutzer anpassen und entsprechend verschieben 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 wir bei Android XR mit der aktuellen Version unserer App für den Home Space beginnen und dann einfach eine Fenster-Symbolleiste und eine Schaltfläche für den Übergang zum Full Space hinzufügen, um die erweiterten XR-Designs zu nutzen.

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 Text vornehmen, um die Nähe der Benutzeroberfläche zum Nutzer zu berücksichtigen.

Für die Umstellung auf Full Space planen

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 zu anderen vorgeschlagen, z. B. 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. Wenn Sie entscheiden möchten, wie Sie Ihre mobilen Designs für räumliche Panels anpassen, entfernen Sie zuerst die Oberfläche, die am weitesten hinten liegt, 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 nur noch 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 auf und geben Sie ihnen 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.
• Bewegung zur Motivation: Wie setzen Sie Übergänge in Ihrer App ein? Stellen Sie sich vor, wie Ihre App in VR aussehen würde.
• 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-Entwickler.

Grundlagen der räumlichen Benutzeroberfläche

Nachdem wir nun gesehen haben, wie Ivy ihre Denkweise beim Design von Androidify für XR angepasst hat, wollen wir uns mit der Entwicklung von räumlichen UIs befassen. Wenn Sie mit modernen Android-Tools und ‑Bibliotheken vertraut sind, sollte die Entwicklung einer räumlichen Benutzeroberfläche mit dem Jetpack XR SDK Ihnen bekannt vorkommen. 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 die Inhalte im Vordergrund stehen. 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 diese Schaltfläche klicken, wird nur das Layout „Mittel“ in Full Space 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 im Vollbildmodus an, um zu verstehen, wie es implementiert wurde.

Wir haben hier zwei SpatialPanel-Elemente identifiziert: ein Panel, in dem sich die Videokarte rechts befindet, und eines, das die Haupt-UI enthält. Oben ist ein Orbiter angebracht. 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 es aus, wenn es allein verwendet wird:

Im Hauptinhaltsbereich wurde dieselbe Strategie verfolgt: 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- und untergeordnete Beziehung 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 Displays 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 in Full Space: Ein Bot, der mit dem Prompt „Rote Baseballkappe, Pilotenbrille, hellblaues T‑Shirt, rot-weiß karierte Shorts, grüne Flip-Flops und ein Tennisschläger in der Hand“ generiert wurde.

Auf dem Ergebnisbildschirm werden die ergänzenden 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 ganz normal 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, die Composables „SpatialPanel“ und „Orbiter“ 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 testen Sie Ihre eigene App.