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

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR
Casques XR
Lunettes XR filaires
En savoir plus sur les types d'appareils XR

Votre application Android 2D pour mobile ou grand écran fonctionne par défaut dans Android XR, où elle 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 sur écran plat à un environnement 3D dynamique.

Tenez compte de ces principes importants lorsque vous portez votre application Android dans XR.

  • Fonctionnalités spatiales : Android XR propose une large gamme de fonctionnalités spatiales disponibles pour votre application, mais vous n'êtes pas obligé de les implémenter toutes. 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 véritablement immersive. Consultez les conseils de conception de l'UI spatiale pour déterminer la meilleure façon d'intégrer les éléments spatiaux.
  • Interface utilisateur adaptative : la XR vous permet de concevoir une interface utilisateur spacieuse qui s'adapte de manière fluide à un canevas infini et à des fenêtres redimensionnables. L'une des considérations les plus importantes est d'utiliser 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 uniquement disponible sur mobile aujourd'hui, vous pouvez toujours utiliser des environnements captivants pour améliorer l'expérience utilisateur. Toutefois, une UI 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 la XR. Si votre application repose sur des vues, consultez Utiliser des vues dans XR pour en savoir plus sur l'exploitation de l'interopérabilité Compose lorsque vous travaillez avec des vues, ou évaluez la possibilité de travailler directement avec la bibliothèque Jetpack SceneCore.
  • Publication sur le Play Store : pour que votre application améliorée par la XR soit détectable sur le Play Store :

Conseils pour convertir des composants d'UI 2D en 3D

En suivant ces conseils, vous pouvez faire une grande différence pour que votre application donne l'impression d'avoir été optimisée pour la XR.

  • Priorisez la compatibilité avec les grands écrans : assurez-vous que l'UI 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 tirera parti des capacités uniques de la plate-forme.
  • Placez les panneaux spatiaux en pensant au 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 près.
  • Utilisez une UI adaptative pour les mises en page spatiales : utilisez des concepts d'UI adaptative tels que les volets et l'affichage progressif pour décomposer efficacement votre mise en page en plusieurs panneaux spatiaux, en optimisant la présentation des informations.
  • Utilisez des orbiters pour les éléments et les motifs persistants : réservez les orbiters pour les éléments UX persistants et contextuels tels que la navigation et les commandes. Limitez l'utilisation des orbiteurs pour conserver la clarté et éviter l'encombrement.
  • Utilisez l'élévation avec discernement : 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 l'inconfort visuel et maintenir une hiérarchie visuelle équilibrée.
  • Créer avec Material Design : si vous créez votre application 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 Material Design pour XR.

Jetpack Compose pour XR introduit de nouveaux composants qui gèrent les améliorations XR à votre place. Par exemple, vous pouvez utiliser SpatialPopup et SpatialDialog pour remplacer leurs équivalents 2D. Ces composants s'affichent comme une UI 2D classique lorsque l'UI spatiale n'est pas disponible, et ils affichent l'UI spatiale de votre application lorsqu'ils le peuvent. Leur utilisation est aussi simple que d'apporter une modification d'une ligne pour remplacer l'élément d'UI 2D correspondant.

Convertir une boîte de dialogue en SpatialDialog

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

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

Convertir un pop-up en SpatialPopup

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

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

Élever des éléments d'UI 2D

Lorsque vous souhaitez améliorer 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 supérieur à celui du panneau spatial sur l'axe Z que vous avez défini 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(elevation = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

Points clés concernant le code

  • Ne spatialisez pas ni n'élevez les grandes zones et les grands plans tels que les feuilles inférieures et les feuilles latérales.
  • N'élevez pas les éléments d'interface utilisateur qui sont défilables avec le contenu.

Migrer des composants 2D vers des orbiteurs

Les orbiteurs sont des éléments flottants qui contiennent généralement des commandes avec lesquelles l'utilisateur peut interagir. Les orbiteurs peuvent être ancrés à des panneaux spatiaux ou à d'autres entités telles que des mises en page spatiales. Ils permettent au contenu de disposer de plus d'espace et donnent aux utilisateurs un accès rapide aux fonctionnalités sans obstruer le contenu principal.

Rail de navigation non spatialisé

Rail de navigation non spatialisé

Rail de navigation spatialisé (adapté à la XR)

Rail de navigation spatialisé (adapté à la XR)

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

// Previous approach
NavigationRail()

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

Points clés concernant les orbiteurs

  • Les orbiteurs sont des composants conçus pour associer des éléments d'UI 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 schémas à éviter.
  • Nous vous recommandons d'adapter uniquement 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, ils ne s'affichent pas dans l'espace Maison ni sur les 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 composants de base de l'UI 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 conseils de conception d'applications Android XR pour savoir quels éléments migrer vers les panneaux et quels modèles éviter.
  • Suivez les bonnes pratiques pour placer les panneaux spatiaux :
    • Les panneaux doivent apparaître à 1,5 mètre du centre des yeux de l'utilisateur.
    • Le contenu doit apparaître dans les 41 degrés centraux du champ de vision de l'utilisateur.
  • Les panneaux restent en place lorsque l'utilisateur se déplace. L'ancrage n'est disponible que pour le mode Passthrough.
  • Utilisez les angles arrondis de 32 dp recommandés par le système pour les panneaux.
  • Les cibles tactiles doivent faire 56 dp, mais ne doivent pas être inférieures à 48 dp.
  • Veillez à ce que les rapports de contraste soient suffisants pour la lisibilité, en particulier si vous utilisez des arrière-plans transparents.
  • Suivez les principes de conception des couleurs d'Android et utilisez le système de couleurs Material Design pour implémenter des thèmes clairs et sombres pour votre application.
  • Utilisez l'API des panneaux spatiaux avec les éléments d'UI existants.

Migrer une 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 du mode Home Space au mode Full Space. Pour importer ce contenu dans Fullspace, vous pouvez utiliser SpatialPanel.

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

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            dragPolicy = MovePolicy(),
            resizePolicy = ResizePolicy(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

Migrer votre UI 2D vers plusieurs panneaux spatiaux

Vous pouvez utiliser un seul panneau spatial pour l'UI de votre application ou migrer votre UI 2D vers plusieurs panneaux spatiaux. Si vous choisissez d'utiliser plusieurs panneaux pour l'UI de votre application, vous pouvez les positionner et les faire pivoter (comme si vous disposiez votre UI en 2D). Vous commencerez par définir clairement votre vision du design, puis vous pourrez utiliser les API de mise en page de l'UI spatiale (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) et les modificateurs de sous-espace pour positionner et faire pivoter les panneaux. Il existe des schémas clés que vous devez éviter lorsque vous implémentez plusieurs panneaux.

  • Évitez les panneaux qui se chevauchent et qui empêcheraient l'utilisateur de voir des informations importantes.
  • Évitez de submerger l'utilisateur avec des panneaux.
  • Évitez de placer les 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 conseils complets.

Contenu non spatialisé

Contenu non spatialisé

Commandes multimédias spatialisées (adaptées à la XR) dans un orbiteur et contenu réparti dans plusieurs panneaux spatiaux

Commandes multimédias spatialisées (adaptées à la XR) dans un orbiteur et contenu divisé en plusieurs panneaux spatiaux

SpatialRow {
    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()
    }
}
SpatialRow.kt

Vérifier les capacités spatiales

Lorsque vous décidez d'afficher ou non un élément d'UI spécifique, évitez de rechercher des appareils ou des modes XR spécifiques. La vérification des appareils ou des modes plutôt que des 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 capacités de spatialisation nécessaires, comme indiqué 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 les fonctionnalités changent.

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

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

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 les environnements. L'ajout d'un environnement dans le code est une modification simple que vous pouvez apporter sans impacter de manière significative l'UI existante de votre application. Pour en savoir plus sur la configuration des environnements, consultez nos conseils complets.

Ajouter du contenu 3D

Les contenus 3D tels que les modèles 3D et les vidéos spatiales peuvent contribuer à créer une expérience plus immersive et à ajouter une compréhension spatiale. Votre application ne peut afficher du contenu 3D que lorsque des capacités spatiales sont disponibles. Vous devez donc vérifier si des capacités spatiales sont disponibles en premier lieu.

Consultez le guide approprié pour ajouter des modèles 3D, des vidéos spatiales ou de l'audio spatial.