Le Samsung Galaxy XR est disponible et fonctionne avec Android XR. Cet article de blog fait partie de notre semaine spéciale Android XR, au cours de laquelle nous 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.

Avec le lancement du Samsung Galaxy XR, le premier appareil fonctionnant avec 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 dimension.

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 vous expliquons comment nous avons intégré l'application Androidify à la réalité XR et nous vous présentons les bases de l'intégration de vos applications à la réalité XR.

Présentation d'Androidify

Androidify est une application Open Source qui vous permet de créer des robots Android à l'aide de certaines des dernières technologies telles que 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 s'affiche de manière optimale 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 réalité XR grâce à sa mise en page responsive sur grand écran sans aucune 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. Par conséquent, 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 différenciée pour la réalité XR afin d'offrir une expérience agréable à nos utilisateurs de la réalité XR.

S'orienter dans la réalité XR

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

En affichage restreint, plusieurs applications peuvent être exécutées côte à côte afin que l'utilisateur puisse effectuer plusieurs tâches en passant d'une fenêtre à l'autre. En ce sens, cela ressemble beaucoup à la gestion des fenêtres sur un appareil Android à grand écran, mais dans un espace virtuel.

En affichage complet, l'application n'a pas de limites d'espace et peut utiliser toutes les fonctionnalités spatiales d'Android XR, comme l'interface utilisateur spatiale et le contrôle de l'environnement virtuel.

Bien qu'il puisse être tentant de faire fonctionner votre application uniquement en affichage complet, vos utilisateurs peuvent souhaiter effectuer plusieurs tâches avec votre application. La prise en charge des deux modes favorise donc 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, a été chargée de reprendre les conceptions existantes d'Androidify et de créer une nouvelle conception pour la réalité XR. La parole est à Ivy.

La conception pour la réalité XR nécessitait une approche unique, mais elle avait en fait beaucoup de points communs 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'interface utilisateur dans un sous-espace, soit en affichant clairement les limites, soit en les impliquant subtilement. Nous avons également appris à utiliser toutes les tailles d'éléments d'interface utilisateur spatiaux, qui sont conçus pour 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 afin de pouvoir décomposer vos mises en page en parties pour votre interface utilisateur spatiale.

Commencer la conception avec l'affichage restreint

Heureusement, Android XR vous permet de commencer avec votre application telle qu'elle est aujourd'hui pour l'affichage restreint. Nous avons donc pu 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 tenu compte des fonctionnalités matérielles possibles et de 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 nombre d'appareils photo pour offrir plus d'options de photo. En suivant ce modèle, nous avons également dû adapter la mise en page de l'appareil photo pour les casques. Nous avons également dû apporter des ajustements au texte pour tenir compte de la proximité de l'interface utilisateur avec l'utilisateur.

Concevoir pour le passage à l'affichage complet

L'affichage complet a été le plus grand changement, mais il nous a donné le plus de liberté créative pour adapter notre conception. 

Androidify utilise un confinement visuel, ou des 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 confinement naturel en encadrant les autres volets. Enfin, le confinement intrinsèque est suggéré par la proximité de certains éléments avec d'autres, comme le bouton inférieur "Démarrer la transformation", qui se trouve à proximité du volet "Choisir la couleur de mon robot".

Les panneaux spatiaux ont facilité la séparation. Pour décider comment adapter vos conceptions mobiles aux panneaux spatiaux, essayez de supprimer les surfaces en commençant par la surface la plus éloignée, 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 n'était pas seulement un élément de branding et un arrière-plan, mais aussi un point d'ancrage pour le contenu dans l'espace 3D.

L'établissement de ce point d'ancrage a permis d'imaginer plus facilement comment les éléments pouvaient se déplacer autour de lui et comment nous pouvions utiliser la proximité pour nous démarquer et traduire le reste de l'expérience utilisateur.

Autres conseils de conception pour aider votre application à devenir spatiale

• Laissez les choses sans confinement : séparez les composants et donnez-leur un espace réel (spatial). Il est temps de donner un peu d'espace à ces éléments d'interface utilisateur.
• Supprimez les surfaces : masquez l'arrière-plan et voyez ce que cela donne à vos conceptions.
• Motivez avec le mouvement : comment utilisez-vous les transitions dans votre application ? Utilisez ce personnage pour imaginer votre application se lancer dans la réalité virtuelle.
• Choisissez un point d'ancrage : ne perdez pas vos utilisateurs dans l'espace. Utilisez un élément qui permet de collecter ou de mettre à la terre l'interface utilisateur.

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

Principes de base de l'interface utilisateur spatiale

Maintenant que nous avons abordé l'expérience d'Ivy en matière d'adaptation de son état d'esprit lors de la conception d'Androidify pour la réalité XR, parlons du développement d'une interface utilisateur spatiale. Le développement d'une interface utilisateur spatiale avec le SDK Jetpack XR devrait vous sembler familier si vous avez l'habitude de travailler avec des outils et des bibliothèques Android modernes. Vous 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 disposés dans SpatialRows et SpatialColumns

Les éléments spatiaux présentés ici sont des composables SpatialPanel, qui vous permettent d'afficher du contenu 2D tel que 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 de sous-espace doivent être contenus dans un sous-espace et sont modifiés par des objets SubspaceModifier. Les sous-espaces peuvent être placés n'importe où dans la hiérarchie de l'interface utilisateur de votre application et ne peuvent contenir que des composables de sous-espace.Les objets SubspaceModifier sont également très similaires aux objets Modifier : ils contrôlent des paramètres tels que la taille et le positionnement.

Un Orbiter peut être associé à un SpatialPanel et se déplacer avec le contenu auquel il est associé. Ils sont souvent utilisés pour fournir des commandes contextuelles sur le contenu auquel ils sont associés, ce qui permet de mettre en avant le contenu. Ils peuvent être placés sur l'un des quatre côtés du contenu, à une distance configurable.

Il existe de nombreux autres éléments d'interface utilisateur spatiaux, 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 la configuration du projet. Nous avons ajouté la dépendance Jetpack XR Compose, que vous trouverez sur la page des dépendances Jetpack XR.

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

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

Ensuite, nous avons créé un nouveau composant de bouton qui utilise l'icône Développer le contenu dans nos mises en page existantes et nous 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 affichage complet. Nous pouvons vérifier les capacités spatiales et déterminer si l'interface utilisateur 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 affichage complet 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 qui contient l'interface utilisateur principale. Enfin, un Orbiter est associé 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 2D VideoPlayer des mises en page classiques dans un SpatialPanel sans aucune modification supplémentaire. 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, ils deviennent indépendants les uns des autres. Nous avons donc fait du panneau VideoPlayer un enfant du panneau de contenu principal. Le panneau VideoPlayer se déplace ainsi 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)
              }
           }
       }
   }
}

C'est ainsi que nous avons créé le premier écran.

Passer aux autres écrans

Je vais également aborder brièvement certains des autres écrans, en mettant en avant les considérations spécifiques pour chacun d'eux.

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

Écran de résultats en affichage complet : un robot généré avec une invite : casquette de baseball rouge, lunettes de soleil aviateur, t-shirt bleu clair, short à carreaux rouges et blancs, tongs vertes et raquette de tennis.

L'écran de résultats affiche les citations complémentaires à l'aide d'un effet de dégradé, ce qui leur permet de s'estomper près des bords de l'écran. Il utilise également une transition 3D réelle 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 réalité XR avec les mises en page spatiales, nous l'avons publiée sur le Play Store. Voici une dernière modification importante que nous avons apportée 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 différenciées pour la réalité XR et affiche un badge indiquant que l'application a été conçue pour la réalité XR :

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

Commencez à créer 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 présenté l'ensemble du processus de développement d'une interface utilisateur 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 passe en affichage 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 intégrer 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.
• Commencez par consulter notre documentation destinée aux développeurs et découvrez-en plus sur Jetpack Compose pour la réalité XR.
• Téléchargez l'émulateur Android XR et essayez votre propre application.