Samsung Galaxy XR est disponible, avec Android XR ! Cet article de blog fait partie de notre Semaine spéciale Android XR, au cours de laquelle nous vous proposons des ressources (articles de blog, vidéos, exemples de code, etc.) conçues pour vous aider à découvrir, créer et préparer vos applications pour Android XR.

Le Samsung Galaxy XR, le premier appareil équipé d'Android XR, est désormais disponible. Les utilisateurs peuvent désormais profiter de nombreuses applications disponibles sur le Play Store dans une toute nouvelle dimension : la troisième !

La troisième dimension est spacieuse et offre beaucoup de place pour vos applications. Commencez dès aujourd'hui à utiliser les outils qui conviennent à votre application. Par exemple, vous pouvez utiliser le SDK Jetpack XR pour créer des expériences XR immersives à l'aide d'outils de développement Android modernes tels que Kotlin et Compose.

Dans cet article de blog, nous allons vous raconter notre propre parcours pour transposer l'univers fantaisiste de notre application Androidify bien-aimée dans la XR. Nous aborderons également les bases de ce qu'il faut faire pour porter vos applications dans la XR.

Découvrir Androidify

Androidify est une application Open Source qui vous permet de créer des robots Android à l'aide de certaines des dernières technologies comme Gemini, CameraX, Navigation 3 et, bien sûr, Jetpack Compose. Androidify a été initialement conçu pour s'afficher de manière optimale sur les téléphones, les appareils pliables et les tablettes en créant des mises en page adaptatives.

Androidify est superbe sur plusieurs facteurs de forme

Les composables réutilisables sont un pilier essentiel des mises en page adaptatives. Jetpack Compose vous aide à créer des composants d'interface utilisateur de petite taille qui peuvent être disposés de différentes manières pour créer des expériences utilisateur intuitives, quel que soit le type d'appareil utilisé par l'utilisateur. En fait, Androidify est compatible avec Android XR sans aucune modification de l'application.

Androidify s'adapte à la XR en utilisant sa mise en page responsive pour grand écran, sans modification du code.

Les applications qui ne sont pas spécialement conçues pour Android XR peuvent être utilisées en multitâche dans une fenêtre de taille appropriée et fonctionnent de la même manière que sur un grand écran. C'est pourquoi Androidify est déjà entièrement fonctionnel sur Android XR sans aucun travail supplémentaire. Mais nous ne voulions pas nous arrêter là. Nous avons donc décidé d'aller plus loin et de créer une application XR différenciée pour offrir une expérience agréable à nos utilisateurs XR.

S'orienter dans la réalité XR

Passons en revue les concepts de base clés pour Android XR, en commençant par les deux modes d'exécution des applications : l'affichage restreint et l'affichage complet.

Dans l'espace d'accueil, plusieurs applications peuvent s'exécuter côte à côte afin que les utilisateurs puissent effectuer plusieurs tâches dans différentes fenêtres. En ce sens, il ressemble beaucoup au fenêtrage de bureau sur un appareil Android à grand écran, mais dans un espace virtuel !

En mode Espace immersif, l'application n'a aucune limite spatiale et peut utiliser toutes les fonctionnalités spatiales d'Android XR, comme l'UI spatiale et le contrôle de l'environnement virtuel.

Même si vous pouvez être tenté de faire fonctionner votre application uniquement en mode Plein écran, vos utilisateurs peuvent souhaiter effectuer plusieurs tâches à la fois avec votre application. Il est donc préférable de prendre en charge les deux modes pour offrir une meilleure expérience utilisateur.

Concevoir pour la nouvelle dimension d'Androidify

Une application agréable commence par une conception de qualité. Ivy Knight, Senior Design Advocate chez Android DevRel, s'est chargée de reprendre les designs existants pour Androidify et d'en créer un nouveau pour la XR. À toi, Ivy !

La conception pour la XR nécessitait une approche unique, mais avait en fait beaucoup en commun avec la conception mobile. Nous avons commencé par réfléchir à la façon de contenir les éléments : comment organiser et regrouper nos éléments d'UI dans un sous-espace, soit en montrant clairement les limites, soit en les suggérant subtilement. Nous avons également appris à accepter toutes les tailles d'éléments d'UI spatiaux, qui sont censés s'ajuster et se déplacer en fonction de l'utilisateur. Comme nous l'avons fait avec Androidify, créez des mises en page adaptatives pour pouvoir décomposer vos mises en page en parties pour votre UI spatiale.

Commencer la conception avec Home Space

Heureusement, Android XR vous permet de commencer avec votre application telle qu'elle est aujourd'hui pour l'affichage restreint. Vous pouvez donc passer aux conceptions XR étendues en ajoutant simplement une barre d'outils de fenêtre et un bouton de transition vers l'affichage complet.

Nous avons également envisagé les fonctionnalités matérielles possibles et la façon dont l'utilisateur interagirait avec elles. Les mises en page mobiles d'Androidify s'adaptent à différentes postures, tailles de classe et nombres de caméras pour offrir plus d'options de photos. En suivant ce modèle, nous avons également dû adapter la disposition de la caméra pour les casques. Nous avons également dû ajuster le texte pour qu'il fonctionne en tenant compte de la proximité de l'UI avec l'utilisateur.

Concevoir pour le passage à l'affichage plein écran

Le plein écran a été le changement le plus important, mais il nous a donné le plus de marge de manœuvre créative pour adapter notre conception. 

Androidify utilise la structuration visuelle, ou les volets, pour regrouper les fonctionnalités avec un arrière-plan et un contour, comme le volet "Prendre ou choisir une photo". Nous avons également utilisé des composants tels que la barre d'application supérieure pour créer un conteneur naturel en encadrant les autres volets. Enfin, la proximité de certains éléments avec d'autres suggère un confinement intrinsèque. Par exemple, le bouton inférieur "Start transformation" (Commencer la transformation) se trouve à côté du volet "Choose my bot color" (Choisir la couleur de mon robot).

Les panneaux spatiaux permettent de séparer facilement les éléments. Pour décider comment adapter vos conceptions mobiles aux panneaux spatiaux, essayez de supprimer les surfaces en commençant par celle qui se trouve le plus en arrière, puis en avançant. Découvrez le nombre d'arrière-plans que vous pouvez supprimer et ce qui reste. Après avoir effectué cet exercice pour Androidify, il ne restait que le grand gribouillis vert d'Android. Le gribouillis servait non seulement de branding et d'arrière-plan, mais aussi d'ancrage pour le contenu dans l'espace 3D.

En établissant ce point d'ancrage, nous avons pu plus facilement imaginer comment les éléments pouvaient se déplacer autour de lui et comment nous pouvions utiliser la proximité pour développer et traduire le reste de l'expérience utilisateur.

Autres conseils de conception pour rendre votre application spatiale

• Laissez les éléments se déployer : sortez les composants de leur conteneur et donnez-leur de l'espace (spatial). Il est temps de donner un peu d'espace à ces éléments d'UI.
• Supprimer les surfaces : masquez l'arrière-plan pour voir l'effet sur vos créations.
• Motiver avec le mouvement : comment utilisez-vous les transitions dans votre application ? Utilisez ce personnage pour imaginer votre application se lancer dans la VR.
• Choisir un point d'ancrage : ne perdez pas vos utilisateurs dans l'espace. Avoir un élément qui aide à collecter ou à ancrer l'UI.

Pour en savoir plus sur les modèles de conception d'interface utilisateur XR, consultez Concevoir pour Android XR sur Android Developers.

Principes de base de l'UI spatiale

Maintenant que nous avons abordé l'expérience d'Ivy et la façon dont elle a adapté son état d'esprit lors de la conception d'Androidify pour XR, parlons du développement d'UI spatiales. Si vous avez l'habitude de travailler avec des outils et des bibliothèques Android modernes, le développement d'une UI spatiale avec le SDK Jetpack XR devrait vous sembler familier. Vous y trouverez des concepts que vous connaissez déjà, comme la création de mises en page avec Compose. En fait, les mises en page spatiales sont très similaires aux mises en page 2D utilisant des lignes, des colonnes et des espaces :

Ces éléments sont organisés dans SpatialRows et SpatialColumns.

Les éléments spatiaux affichés ici sont des composables SpatialPanel, qui vous permettent d'afficher du contenu 2D comme du texte, des boutons et des vidéos.

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

Un SpatialPanel est un composable de sous-espace. Les composables Subspace doivent être contenus dans un Subspace et sont modifiés par des objets SubspaceModifier. Les sous-espaces peuvent être placés n'importe où dans la hiérarchie de l'UI de votre application et ne peuvent contenir que des composables Subspace. Les objets SubspaceModifier sont également très semblables aux objets Modifier : ils contrôlent des paramètres tels que la taille et le positionnement.

Une Orbiter  peut être associée à un SpatialPanel et se déplacer avec le contenu auquel elle est associée. Elles sont souvent utilisées pour fournir des contrôles contextuels sur le contenu auquel elles sont associées, en mettant l'accent sur le contenu. Elles peuvent être placées sur l'un des quatre côtés du contenu, à une distance configurable.

Il existe de nombreux autres éléments d'UI spatiale, mais ce sont les principaux que nous avons utilisés pour créer des mises en page spatiales pour Androidify.

Premiers pas avec le développement XR

Commençons par configurer le projet. Nous avons ajouté la dépendance Jetpack XR Compose, que vous trouverez sur la page des dépendances Jetpack XR.

Nous avons ajouté le code d'un bouton qui permet à l'utilisateur de passer en mode espace complet, en commençant par détecter la possibilité de le faire :

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

Nous avons ensuite créé un composant de bouton qui utilise l'icône Développer le contenu dans nos mises en page existantes et lui avons attribué un comportement onClick :

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

Désormais, lorsque vous cliquez sur ce bouton, la mise en page moyenne s'affiche en mode Full Space. Nous pouvons vérifier les capacités spatiales et déterminer si l'UI spatiale peut être affichée. Dans ce cas, nous afficherons notre nouvelle mise en page spatiale :

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

Implémenter la conception de l'écran d'accueil

Revenons à la conception spatiale de l'écran d'accueil en mode Plein espace pour comprendre comment elle a été implémentée.

Nous avons identifié deux éléments SpatialPanel : un panneau dans lequel se trouve la fiche vidéo à droite et un panneau contenant l'UI principale. Enfin, un Orbiter est fixé en haut. Commençons par le panneau du lecteur vidéo :

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

Nous avons simplement réutilisé le composant VideoPlayer 2D des mises en page standards dans un SpatialPanel sans aucune autre modification. Voici à quoi il ressemble seul :

Le panneau de contenu principal a suivi la même logique : nous avons réutilisé le contenu du panneau moyen dans un SpatialPanel.

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

Nous avons attribué à ce panneau une ResizePolicy, qui lui donne des poignées près des bords permettant à l'utilisateur de le redimensionner. Il possède également une MovePolicy, qui permet à l'utilisateur de le faire glisser.

En les plaçant dans le même sous-espace, nous les rendons indépendants les uns des autres. Nous avons donc fait du panneau VideoPlayer un enfant du panneau de contenu principal. Cela permet au panneau VideoPlayer de se déplacer lorsque le panneau de contenu principal est déplacé via une relation parent-enfant.

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

Et voilà, le premier écran est terminé !

Passer aux autres écrans

Je vais également passer en revue brièvement d'autres écrans, en soulignant les considérations spécifiques à chacun d'eux.

Ici, nous avons utilisé les composables SpatialRow et SpatialColumn pour créer une mise en page adaptée à l'espace de visionnage recommandé, en réutilisant à nouveau les composants de la mise en page Medium.

Écran de résultats dans l'espace complet : Un robot généré avec le prompt suivant : casquette de baseball rouge, lunettes de soleil aviateur, t-shirt bleu clair, short à carreaux rouges et blancs, tongs vertes, tenant une raquette de tennis.

 L'écran de résultats affiche les citations complémentaires avec un effet de dégradé, ce qui leur permet de s'estomper près des bords de l'écran. Il utilise également une véritable transition 3D lors de l'affichage de l'entrée utilisée, en retournant l'image dans l'espace.

Publier sur le Google Play Store

Maintenant que l'application est prête pour la XR avec les mises en page spatiales, nous l'avons publiée sur le Play Store. Nous avons apporté une dernière modification importante au fichier AndroidManifest.xml de l'application :

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

Le Play Store sait ainsi que cette application possède des fonctionnalités XR spécifiques. Un badge indique aux utilisateurs que l'application a été conçue pour la XR :

Lorsque vous importez la version, aucune étape spéciale n'est requise pour la publier pour XR : la même application est distribuée normalement aux utilisateurs sur le canal mobile et à ceux sur un appareil XR. Toutefois, vous pouvez choisir d'ajouter des captures d'écran spécifiques à la XR de votre application, ou même mettre en ligne un aperçu immersif de votre application à l'aide d'un asset vidéo spatial. Sur les appareils Android XR, le Play Store affiche automatiquement un aperçu 3D immersif, ce qui permet aux utilisateurs de découvrir la profondeur et l'échelle de votre contenu avant d'installer l'application.

Créez vos propres expériences dès aujourd'hui

Androidify est un excellent exemple de la façon de spatialiser une application Jetpack Compose 2D existante. Aujourd'hui, nous avons montré l'ensemble du processus de développement d'une UI spatiale pour Androidify, de la conception au code en passant par la publication. Nous avons modifié les conceptions existantes pour qu'elles fonctionnent avec les paradigmes spatiaux, utilisé les composables SpatialPanel et Orbiter pour créer des mises en page spatiales qui s'affichent lorsque l'utilisateur entre dans l'espace complet, et enfin, publié la nouvelle version de l'application sur le Play Store.

Nous espérons que cet article de blog vous a aidé à comprendre comment apporter vos propres applications à Android XR. Voici quelques liens supplémentaires qui peuvent vous aider :

• Consultez le code source d'Androidify et créez votre propre robot à l'aide d'Androidify sur Google Play.
• Consultez notre documentation destinée aux développeurs et découvrez Jetpack Compose pour XR.
• Téléchargez l'émulateur Android XR et testez votre propre application.