Convertir votre application Android en 3D avec la réalité XR

​​

Votre application Android mobile ou grand écran en 2D fonctionne par défaut dans Android XR, et s'affiche sous la forme d'un panneau 2D dans un espace 3D. Vous pouvez ajouter des fonctionnalités XR immersives pour améliorer votre application Android 2D existante, en la faisant passer d'une expérience à écran plat à un environnement 3D dynamique.

Tenez compte de ces principes importants lorsque vous transférez votre application Android vers la XR.

  • Fonctionnalités spatiales: Android XR propose une gamme variée de fonctionnalités spatiales disponibles pour votre application, mais vous n'avez pas besoin d'implémenter toutes les fonctionnalités. Implémentez de manière stratégique ceux qui complètent la hiérarchie visuelle, les mises en page et les parcours utilisateur de votre application. Envisagez d'intégrer des environnements personnalisés et plusieurs panneaux pour créer une expérience vraiment immersive. Reportez-vous aux consignes de conception de l'UI spatiale pour déterminer l'intégration optimale des éléments spatiaux.
  • UI adaptative: la XR vous permet de concevoir une UI spacieuse qui s'adapte parfaitement à un canevas infini et à des fenêtres librement redimensionnables. L'une des considérations les plus importantes consiste à suivre nos conseils de conception pour les grands écrans afin d'optimiser la mise en page de votre application pour cet environnement étendu. Même si votre application est actuellement réservée aux mobiles, vous pouvez toujours utiliser des environnements captivants pour améliorer l'expérience utilisateur. Toutefois, une interface utilisateur optimisée pour les grands écrans est l'un des meilleurs moyens d'optimiser votre application pour Android XR.
  • Framework d'UI: nous vous recommandons de créer votre UI avec Jetpack Compose pour XR. Si votre application repose actuellement sur des vues, consultez Utiliser des vues dans XR pour en savoir plus sur l'exploitation de l'interopérabilité de Compose lorsque vous travaillez avec des vues, ou évaluez le travail direct avec la bibliothèque Jetpack SceneCore.
  • Publication sur le Play Store: pour vous assurer que votre application optimisée pour la RA est visible sur le Play Store : 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Conseils pour convertir des composants d'interface utilisateur 2D en 3D

Suivre ces conseils peut faire toute la différence pour que votre application semble avoir été optimisée pour la RA/XR.

  • Priorisez la compatibilité avec les grands écrans: assurez-vous que l'interface utilisateur de votre application respecte les principes de conception pour les grands écrans afin de garantir une lisibilité optimale du texte et du contenu dans les environnements XR étendus.
  • Utilisez les fonctionnalités spatiales de manière stratégique: identifiez les moments clés du parcours utilisateur de votre application où l'intégration de fonctionnalités spatiales améliorera l'expérience et tirez parti des fonctionnalités uniques de la plate-forme.
  • Placez les panneaux spatiaux en tenant compte du confort de l'utilisateur: lorsque vous concevez votre mise en page avec des panneaux spatiaux, placez-les à une distance confortable de l'utilisateur pour éviter de le submerger ou de lui donner l'impression d'être trop proche.
  • Utiliser une UI adaptative pour les mises en page spatiales: utilisez des concepts d'UI adaptative tels que les volets et la révélation progressive pour décomposer efficacement votre mise en page en plusieurs panneaux spatiaux, en optimisant la présentation des informations.
  • Utilisez des orbiteurs pour les éléments et les modèles persistants: réservez les orbiteurs aux éléments d'interface utilisateur persistants et contextuels, tels que la navigation et les commandes. Limitez l'utilisation des orbiteurs pour conserver la clarté et éviter l'encombrement.
  • Utilisez judicieusement l'élévation: appliquez l'élévation spatiale aux composants temporaires qui restent fixes et ne défilent pas avec le contenu. Évitez d'élever de grandes zones pour éviter tout inconfort visuel et maintenir une hiérarchie visuelle équilibrée.
  • Compilation avec Material Design: si vous compilez avec la dernière version alpha des composants Material Design et des mises en page adaptatives, vous pouvez ajouter le wrapper "EnableXrComponentOverrides" pour activer les modifications XR dans votre application. Pour en savoir plus, consultez notre documentation sur Material Design pour XR.

Jetpack Compose pour XR introduit de nouveaux composants qui gèrent les améliorations XR pour que vous n'ayez pas à le faire. Par exemple, vous pouvez utiliser SpatialPopup et SpatialDialog pour remplacer leurs homologues 2D. Ces composants apparaissent comme une interface utilisateur 2D typique lorsque l'UI spatiale n'est pas disponible, et ils affichent l'UI spatiale de votre application quand ils le peuvent. Pour les utiliser, il vous suffit de modifier une ligne pour remplacer l'élément d'interface utilisateur 2D correspondant.

Convertir une boîte de dialogue en SpatialDialog

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

Convertir une fenêtre pop-up en SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

Éléments d'interface utilisateur 2D Elevate

Lorsque vous souhaitez élever l'UI avec un contrôle plus précis, nous fournissons SpatialElevation pour vous permettre d'élever n'importe quel composable de votre application à un niveau au-dessus du panneau spatial sur l'axe Z que vous définissez avec SpatialElevationLevel. Cela permet d'attirer l'attention de l'utilisateur, de créer une meilleure hiérarchie et d'améliorer la lisibilité, comme illustré dans l'exemple suivant.

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

Points clés concernant le code

  • Ne spatialisez pas ni n'élevez pas de grandes zones et plans tels que les feuilles inférieures et latérales.
  • N'élevez pas les éléments d'interface utilisateur qui peuvent être défilés avec le contenu.

Migrer des composants 2D vers des orbiteurs

Les orbiteurs sont des éléments flottants qui contiennent des commandes pour le contenu des panneaux spatiaux. Ils permettent de gagner de l'espace et d'offrir aux utilisateurs un accès rapide aux fonctionnalités sans masquer le contenu principal.

Rail de navigation non spatialisé
Rail de navigation spatialisé (adapté à la réalité XR)

L'exemple de code suivant montre comment migrer un composant d'interface utilisateur 2D vers un orbiteur.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

Points clés concernant les orbiteurs

  • Les orbiteurs sont des composants conçus pour associer des éléments d'interface utilisateur existants à un panneau spatial.
  • Consultez nos conseils de conception d'applications Android XR pour vérifier les éléments à migrer pour les orbiteurs et les modèles à éviter.
  • Nous vous recommandons de n'adapter que quelques composants de navigation, comme le rail de navigation, la barre d'application supérieure ou la barre d'application inférieure.
  • Les orbiteurs ne s'affichent pas lorsque l'UI spatiale n'est pas activée. Par exemple, elles ne s'affichent pas dans l'espace Home ni sur des appareils tels que les téléphones, les tablettes et les appareils pliables.

Migrer des composants 2D vers des panneaux spatiaux

Les panneaux spatiaux sont les éléments de base de l'interface utilisateur des applications Android XR.

Les panneaux servent de conteneurs pour les éléments d'interface utilisateur, les composants interactifs et le contenu immersif. Lors de la conception, vous pouvez ajouter des composants tels que des orbiteurs pour les commandes utilisateur et élever spatialement les éléments d'interface utilisateur pour attirer l'attention sur des interactions spécifiques.

Points clés concernant le code

  • Consultez les consignes de conception d'applications Android XR pour identifier les éléments à migrer vers des panneaux et les modèles à éviter.
  • Suivez les bonnes pratiques pour l'emplacement des panneaux spatiaux :
    • Les panneaux doivent apparaître au centre, à 1,5 m des yeux de l'utilisateur.
    • Le contenu doit apparaître dans le champ de vision de l'utilisateur, à 41 degrés du centre.
  • Les panneaux restent en place lorsque l'utilisateur se déplace. L'ancrage n'est disponible que pour le passthrough.
  • Respectez les coins arrondis de 32 dp recommandés par le système pour les panneaux.
  • Les zones cibles tactiles doivent faire 56 dp et ne pas être inférieures à 48 dp.
  • Conservez les ratios de contraste pour améliorer la lisibilité, en particulier si vous utilisez des arrière-plans transparents.
  • Suivez les principes de conception Android en matière de couleur et utilisez le système de couleurs Material Design pour implémenter des thèmes sombres et clairs pour votre application.
  • Utilisez l'API des panneaux spatiaux avec les éléments d'interface utilisateur existants.

Migrer l'UI 2D vers un seul panneau spatial

Par défaut, votre application s'affiche avec un seul panneau dans l'espace maison. Découvrez comment passer de l'espace "Home" à l'espace "Full". Pour afficher ce contenu en plein écran, vous pouvez utiliser SpatialPanel.

Voici un exemple de la façon dont vous pouvez procéder.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

Migrer votre UI 2D vers plusieurs panneaux spatiaux

Vous pouvez utiliser un seul panneau spatial pour l'interface utilisateur de votre application ou migrer votre interface utilisateur 2D vers plusieurs panneaux spatiaux. Si vous choisissez d'utiliser plusieurs panneaux pour l'interface utilisateur de votre application, vous pouvez les positionner et les faire pivoter (comme pour la mise en page de votre interface utilisateur en 2D). Vous commencerez par une vision de conception claire de ce que vous souhaitez accomplir, puis vous pourrez utiliser les API de mise en page d'interface utilisateur spatiale (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) et les modificateurs d'espaces sous-jacents pour positionner et faire pivoter les panneaux. Il existe certains modèles clés que vous devez éviter lorsque vous implémentez plusieurs panneaux.

  • Évitez les panneaux qui se chevauchent et empêchent l'utilisateur de voir des informations critiques.
  • Évitez de submerger l'utilisateur avec des panneaux.
  • Évitez de placer des panneaux dans des emplacements inconfortables ou peu visibles. Exemple : Les panneaux placés derrière l'utilisateur sont difficiles à remarquer.
  • Pour en savoir plus sur le développement de votre UI spatiale, consultez nos consignes complètes.
Contenu non spatialisé
Commandes multimédias spatialisées (adaptées à la RA) dans un orbiteur et contenu divisé en plusieurs panneaux spatiaux
SpatialRow(curveRadius = 825.dp) {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

Vérifier les fonctionnalités spatiales

Lorsque vous décidez d'afficher un élément d'interface utilisateur spécifique, évitez de rechercher des appareils ou des modes XR spécifiques. Vérifier les appareils ou les modes plutôt que les fonctionnalités peut entraîner des problèmes lorsque les fonctionnalités d'un appareil donné changent au fil du temps. Utilisez plutôt LocalSpatialCapabilities.current.isSpatialUiEnabled pour vérifier directement les fonctionnalités de spatialisation nécessaires, comme illustré dans l'exemple suivant. Cette approche garantit que votre application s'adapte correctement à un large éventail d'expériences XR sans avoir besoin de mises à jour chaque fois que de nouveaux appareils apparaissent ou que des fonctionnalités changent.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

Utiliser des environnements pour modifier l'environnement de l'utilisateur

Lorsque vous souhaitez créer une sensation d'immersion dans votre application en modifiant l'environnement de l'utilisateur, vous pouvez le faire avec des environnements. Ajouter un environnement dans le code est une modification simple que vous pouvez effectuer sans avoir un impact significatif sur l'UI existante de votre application. Pour en savoir plus sur la configuration des environnements, consultez nos conseils complets.

Ajouter des modèles 3D

Les contenus 3D peuvent contribuer à créer une expérience plus immersive et à améliorer la compréhension spatiale. Comme les autres fonctionnalités spatiales et 3D, votre application ne peut afficher des modèles 3D que lorsque le contenu 3D est activé. Vous devez donc vous assurer que votre application offre toujours une expérience de qualité sans les objets 3D que vous ajoutez.

Ajouter des modèles 3D avec SceneViewer

Lorsque vous souhaitez présenter des modèles 3D à vos utilisateurs, il existe plusieurs façons d'aborder le problème. Lorsque vous avez un glTF prêt à l'emploi sur votre serveur, le moyen le plus simple est d'utiliser SceneViewer XR. Pour ce faire, créez un intent explicite, qui lancera l'application XR SceneViewer sur l'appareil. Cela permet à l'utilisateur de voir l'objet, et de le déplacer et de le redimensionner librement dans son environnement.

Ajouter des modèles 3D directement avec le volume d'entités

Lorsque vous souhaitez mieux contrôler des éléments tels que la position du modèle 3D, la taille relative ou les animations précises, vous pouvez charger une ressource glTF directement dans votre application. Une fois le modèle 3D chargé, vous pouvez utiliser le composable Volume pour encapsuler une entité de modèle glTF et appliquer des modificateurs d'espace sous-jacent pour contrôler la façon dont il est présenté. L'utilisation de Volume vous permet de placer de manière déclarative des modèles 3D par rapport à votre UI spatiale. Pour en savoir plus sur l'affichage de modèles 3D dans votre application, consultez la section Créer, contrôler et gérer des entités.