Bonnes pratiques et pratiques adaptatives

Les applications adaptatives sont compatibles avec les écrans de toutes tailles: l'intégralité de l'écran de l'appareil, les fenêtres redimensionnables en mode multifenêtre, les orientations portrait et paysage, les écrans pliés et dépliés des appareils pliables.

Une courte liste de paramètres de configuration et d'API vous permet de créer des applications adaptatives. Toutefois, certains paramètres et API obsolètes sont incompatibles avec les applications adaptatives et doivent être évités.

Redimensionnement

Les applications adaptatives sont redimensionnables et compatibles avec le mode multifenêtre.

L'attribut resizeableActivity des éléments de fichier manifeste <activity> et <application> active ou désactive le mode multifenêtre sur Android 11 (niveau d'API 30) ou version antérieure. Sur Android 12 (niveau d'API 31) et versions ultérieures, les grands écrans sont compatibles avec le mode multifenêtre, quel que soit l'attribut. Pour en savoir plus, consultez Prendre en charge le mode multifenêtre.

✓ À faire

Permettez à votre application de participer à des scénarios multifenêtre et multitâche pour améliorer la productivité et la satisfaction des utilisateurs.

Définissez resizeableActivity="true" si votre application cible des niveaux d'API inférieurs à 24. Sinon, oubliez-le. La valeur par défaut est true sur Android 7.0 (niveau d'API 24) ou version ultérieure.

✗ À ne pas faire

Ne définissez pas resizeableActivity="false" pour aucun niveau d'API. N'excluez pas votre application des cas d'utilisation impliquant le mode multifenêtre.

Orientation

Les applications adaptatives sont compatibles avec les modes portrait et paysage, quelle que soit la taille de l'écran ou le mode de fenêtrage.

Le paramètre de fichier manifeste screenOrientation limite l'orientation de l'activité.

✓ À faire

Supprimez le paramètre screenOrientation du fichier manifeste de votre application.

Verrouiller l'orientation des applications n'empêche pas le changement de taille de la fenêtre. Les applications sont redimensionnées lorsqu'elles passent en mode multifenêtre, lorsqu'un appareil est plié ou déplié, ou lorsqu'une fenêtre de type ordinateur de bureau est redimensionnée. Votre application doit prendre en charge les modifications de taille de fenêtre, quelle que soit la valeur de l'attribut screenOrientation.

✗ À ne pas faire

Ne limitez pas l'orientation de l'activité. Les applications qui verrouillent l'orientation sont au format letterbox sur les appareils à grand écran et les tailles de fenêtre incompatibles.

Les applications au format letterbox sont moins visibles sur Google Play pour les tablettes, les pliables et les appareils ChromeOS.

Format

Les tailles d'écran et de fenêtre varient, et leurs formats aussi : du format haut et étroit au format carré, en passant par le format court et large.

Les paramètres de fichier manifeste minAspectRatio et maxAspectRatio limitent le format de votre application à des valeurs codées en dur.

✓ À faire

Adaptez votre application à l'écran, quelles que soient les dimensions relatives.

Supprimez les paramètres minAspectRatio et maxAspectRatio du fichier manifeste de votre application. Vous pouvez également vous assurer que votre application est redimensionnable et que le format s'adapte automatiquement (voir la section Redimensionnement).

✗ À ne pas faire

N'essayez pas de contrôler les dimensions relatives de votre application. Si votre application s'exécute sur un écran ou dans une fenêtre dont le format est incompatible avec celui de l'application, elle est affichée au format letterbox.

Sur Android 14 (niveau d'API 34) ou version ultérieure, les utilisateurs peuvent remplacer le format de l'application pour développer les applications au format letterbox afin qu'elles remplissent la zone d'affichage disponible. Consultez Mode de compatibilité avec les appareils.

Taille de la fenêtre

L'optimisation des mises en page pour différentes tailles d'écran est la prémisse centrale du design adaptatif. Les applications adaptatives se concentrent sur la taille de la fenêtre de l'application plutôt que sur la taille de l'écran de l'appareil. Lorsque l'application est en plein écran, la fenêtre de l'application est l'écran de l'appareil.

Les classes de taille de fenêtre permettent de déterminer et de classer de manière systématique la taille de la fenêtre de l'application. Adaptez votre application en modifiant les mises en page à mesure que la classe de taille de fenêtre de votre application change.

✓ À faire

Évaluez la taille de la fenêtre de votre application en fonction des classes de taille de fenêtre.

Pour déterminer la classe de taille de fenêtre, utilisez la fonction de niveau supérieur currentWindowAdaptiveInfo() de la bibliothèque Compose Material 3 Adaptive. Pour en savoir plus, consultez la section Créer des applications adaptatives.

✗ À ne pas faire

Ne négligez pas l'utilité des définitions de classe de taille de fenêtre et des API intégrées. N'utilisez pas d'API obsolètes pour calculer la taille de la fenêtre.

API obsolètes

Les API de plate-forme plus anciennes ne mesurent pas correctement la fenêtre de l'application. Certaines mesurent l'écran de l'appareil, d'autres excluent la décoration du système.

✓ À faire

Utilisez WindowManager#getCurrentWindowMetrics() et WindowMetrics#getBounds() pour obtenir la taille de la fenêtre de l'application. Utilisez WindowMetrics#getDensity() pour obtenir la densité d'affichage.

✗ À ne pas faire

N'utilisez pas les API Display obsolètes suivantes pour déterminer la taille de la fenêtre:

Compose

Jetpack Compose est conçu pour le développement d'une interface utilisateur adaptative. Aucun fichier XML, de mise en page ni de qualificatifs de ressources. Utilisez uniquement des composables sans état basés sur Kotlin tels que Column, Row et Box qui décrivent votre UI, ainsi que des modificateurs tels que offset, padding et size qui ajoutent un comportement aux éléments d'UI.

✓ À faire

Créez avec Compose. Tenez-vous informé des dernières fonctionnalités et nouveautés.

✗ À ne pas faire

Ne vous fiez pas à une technologie obsolète. Ne laissez pas votre application devenir obsolète.

Bibliothèque adaptative Compose Material 3

La bibliothèque adaptative Material 3 de Compose fournit des composants et des API qui facilitent le développement d'applications adaptatives.

✓ À faire

Utilisez les API suivantes pour rendre votre application adaptative:

  • NavigationSuiteScaffold: bascule entre la barre de navigation et le rail de navigation en fonction de la classe de taille de la fenêtre de l'application.
  • ListDetailPaneScaffold: implémente la mise en page canonique de la liste/détail. Adapte la mise en page à la taille de la fenêtre de l'application.
  • SupportingPaneScaffold: implémente la mise en page canonique du volet secondaire.
✗ À ne pas faire

Ne réinventez pas la roue. Ne manquez pas les gains de productivité des développeurs fournis par toutes les bibliothèques Jetpack Compose.

Mises en page

Les utilisateurs s'attendent à ce que les applications exploitent au maximum l'espace d'affichage disponible avec du contenu supplémentaire ou des commandes améliorées.

Les applications adaptatives optimisent les mises en page en fonction des modifications apportées à l'écran, en particulier de la taille de la fenêtre de l'application ou de la position de l'appareil.

✓ À faire

Modifiez les composants de l'interface utilisateur à mesure que la taille de la fenêtre change pour exploiter l'espace d'affichage disponible. Par exemple, remplacez la barre de navigation inférieure utilisée pour les tailles de fenêtre compactes par un rail de navigation vertical pour les fenêtres moyennes et agrandies. Repositionnez les boîtes de dialogue pour qu'elles soient accessibles sur tous les écrans.

Organisez le contenu en volets pour permettre des mises en page multivolets telles que la liste/détail et le volet secondaire pour l'affichage de contenu dynamique.

✓ À faire:Organisez les activités "Liste" et "Détail" dans une mise en page à deux volets.
✗ À ne pas faire

Si vous n'utilisez pas de volets de contenu, ne vous contentez pas d'étirer les éléments d'interface utilisateur pour remplir l'espace d'affichage disponible. Les lignes de texte longues sont difficiles à lire. Les boutons étirés ne sont pas bien conçus. Si vous utilisez Modifier.fillMaxWidth, ne partez pas du principe que c'est le bon comportement pour toutes les tailles d'écran.

✗ À ne pas faire:mise en page étirée pour remplir la fenêtre en expansion.

Périphériques d'entrée

Les utilisateurs n'utilisent pas uniquement les écrans tactiles pour interagir avec les applications.

Les applications adaptatives sont compatibles avec les claviers, souris et stylets externes pour offrir une expérience utilisateur améliorée et aider les utilisateurs à être plus productifs sur tous les facteurs de forme.

✓ À faire

Profitez des fonctionnalités intégrées du framework Android pour la navigation par onglets au clavier, ainsi que pour le clic, la sélection et le défilement à l'aide de la souris ou du pavé tactile. Publiez les raccourcis clavier de votre application dans l'Outil d'aide pour raccourcis clavier.

Utilisez la bibliothèque Material 3 de Jetpack pour permettre aux utilisateurs d'écrire dans n'importe quel composant TextField à l'aide d'un stylet.

✗ À ne pas faire

Ne bloquez pas les autres modes de saisie. Ne pas créer de problèmes d'accessibilité

Résumé

  • Créer votre application avec Compose et la bibliothèque Material 3 Adaptive
  • Baser les mises en page sur les classes de taille de fenêtre
  • Créer des mises en page à plusieurs volets
  • Rendre votre application redimensionnable
  • Ne jamais verrouiller l'orientation de l'activité
  • Ne pas limiter le format
  • Accepter d'autres modes de saisie que le tactile
  • Éviter les API obsolètes

✓ Faites ce que vos utilisateurs attendent : optimisez votre application pour la diversité des appareils sur lesquels les utilisateurs s'appuient au quotidien.

✗ N'attendez pas. Lancez-vous dès aujourd'hui !