Premiers pas avec les applications adaptatives

Plus de 300 millions d'appareils Android à grand écran, y compris des tablettes, des appareils pliables, des appareils ChromeOS, des écrans de voiture et des téléviseurs, sont utilisés aujourd'hui, et ce nombre ne cesse d'augmenter. Pour offrir une expérience utilisateur optimale sur le nombre croissant et la diversité des appareils à grand écran ainsi que sur les téléphones standards créez des applications adaptatives.

Que sont les applications adaptatives ?

Les applications adaptatives modifient les mises en page en fonction des changements d'affichage de l'application, principalement de la taille de la fenêtre de l'application. Toutefois, elles s'adaptent également aux changements de position des appareils pliables, comme la position sur table ou la position livre, ainsi qu'aux changements de densité d'écran et de taille de police.

Au lieu de simplement étirer ou réduire les éléments d'interface utilisateur en réponse à différentes tailles de fenêtre, les applications adaptatives remplacent les composants de mise en page et affichent ou masquent le contenu. Par exemple, sur les téléphones standards, une application adaptative peut afficher une barre de navigation inférieure, mais sur les grands écrans, un rail de navigation. Sur les grands écrans, les applications adaptatives affichent plus de contenu, comme une mise en page à deux volets (liste/détails) ; sur les petits écrans, moins de contenu (la liste ou les détails).

Figure 1. : L'application adaptative optimise la mise en page pour différentes tailles de fenêtre.

Auparavant, les applications s'exécutaient généralement en plein écran. Aujourd'hui, elles s'exécutent en mode multifenêtre dans des fenêtres de taille arbitraire, indépendamment de la taille de l'écran de l'appareil. Les utilisateurs peuvent modifier la taille de la fenêtre à tout moment. Ainsi, même sur un seul type d'appareil, les applications doivent être adaptatives.

Les applications adaptatives sont esthétiques et fonctionnent bien sur n'importe quel appareil, quelle que soit la configuration.

Pourquoi créer des interfaces utilisateur adaptatives ?

Les utilisateurs s'attendent à ce que votre application fonctionne parfaitement sur tous leurs appareils et offre des fonctionnalités améliorées sur les grands écrans. Ils utilisent le mode multifenêtre pour une expérience d'application améliorée et une productivité accrue.

Les applications limitées à une seule tâche sur les téléphones standards passent à côté d'une base d'utilisateurs en pleine expansion et de possibilités diverses.

Google Play

Google Play propose des collections et des recommandations d'applications spécifiques aux tablettes et aux appareils pliables, ce qui permet aux utilisateurs de découvrir des applications de qualité.

Play classe les applications et les jeux optimisés pour les grands écrans plus haut que les applications non optimisées. Le classement est basé sur les consignes relatives à la qualité des applications sur grand écran. Un classement plus élevé augmente la visibilité en permettant aux utilisateurs multi-appareils de voir les notes et les avis spécifiques aux grands écrans sur leurs téléphones.

Les applications qui ne répondent pas aux normes de qualité de Play Store pour les grands écrans affichent un avertissement sur la page d'informations de l'application. L'avertissement indique aux utilisateurs que l'application peut ne pas fonctionner correctement sur leurs appareils à grand écran.

Fiche Play Store d'une application avec un avertissement indiquant "Cette application n'est peut-être pas optimisée pour votre appareil".
Figure 2. Avertissement concernant la qualité technique sur la page d'informations de l'application.

Créez des applications adaptatives pour élargir la visibilité sur Google Play et maximiser le nombre d'appareils pouvant télécharger votre application.

Premiers pas

Pensez à la conception adaptative à toutes les phases du développement de l'application, de la planification au déploiement. Informez les graphistes de la conception adaptative. Concevez votre application pour qu'elle soit adaptative. Vous créerez ainsi une application gérable, extensible et prête pour les futurs facteurs de forme et modes de fenêtrage.

Pour créer une application adaptative compatible avec toutes les tailles et configurations d'écran, procédez comme suit :

  • Utilisez des classes de taille de fenêtre pour prendre des décisions concernant la mise en page.
  • Créez votre application avec la bibliothèque Compose Material 3 Adaptive.
  • Prenez en charge les entrées autres que tactiles.
  • Testez votre application sur tous les types d'appareils.

Classes de taille de fenêtre

Les dimensions de la fenêtre de l'application peuvent être différentes sur différents appareils (ou sur le même appareil dans le cas des appareils pliables), même lorsque l'application est en plein écran. Différentes orientations d'appareil produisent différents formats. En mode multifenêtre, la taille, le format et l'orientation de la fenêtre de l'application peuvent différer de ceux de l'écran de l'appareil.

Les applications adaptatives simplifient et généralisent le problème de la détermination et de la gestion de la taille, du format et de l'orientation de la fenêtre en ne tenant compte que de la fenêtre de l'application lors du rendu des mises en page, ce qui fonctionne également lorsque la fenêtre de l'application est en plein écran.

Les classes de taille de fenêtre classent les fenêtres d'application comme compactes, moyennes ou étendues en fonction de la largeur ou de la hauteur de la fenêtre.

Représentation des classes de taille de fenêtre de largeur compacte, moyenne et agrandie.
Figure 3. Classes de taille de fenêtre en fonction de la largeur de l'écran.

Calculez la WindowSizeClass de votre application à l'aide de la currentWindowAdaptiveInfo() fonction de premier niveau de la Compose Material 3 Adaptive library. La fonction renvoie une instance de WindowAdaptiveInfo, qui contient windowSizeClass. Votre application reçoit des mises à jour chaque fois que la classe de taille de fenêtre change :

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

Volets de contenu

La mise en page d'une activité est parfois appelée écran. Par exemple, votre application peut avoir un écran d'accueil, un écran de liste et un écran de détails d'un élément. La terminologie implique que chaque activité remplit l'écran de l'appareil.

Toutefois, sur les écrans d'appareils suffisamment grands pour prendre en charge la classe de taille de fenêtre étendue, plusieurs écrans d'activité peuvent s'afficher en même temps. Volet est un terme plus précis pour les affichages de contenu d'activités individuelles.

Les classes de taille de fenêtre vous permettent de déterminer le nombre de volets de contenu à afficher dans les mises en page à plusieurs volets, comme spécifié dans Material Design.

Écrans d'appareil divisés en volets : un volet dans les classes de taille de fenêtre compacte et moyenne, deux volets dans la classe de taille de fenêtre agrandie.
Figure 4 : Nombre de volets de contenu par classe de taille de fenêtre.

Les volets sont navigables. Sur les classes de taille de fenêtre compacte et moyenne, les applications affichent un seul volet. La navigation vers n'importe quelle destination affiche donc un seul volet.

Sur la classe de taille de fenêtre étendue, les applications peuvent afficher du contenu associé dans plusieurs volets, comme une mise en page liste/détails. La navigation vers l'un ou l'autre volet affiche la mise en page à deux volets. Si la taille de la fenêtre passe à compacte ou moyenne, les applications adaptatives n'affichent qu'un seul volet, la destination de navigation, qui est la liste ou les détails.

Figure 5. : Mise en page liste/détails avec le volet de liste comme cible de navigation.
Figure 6. : Mise en page liste/détails avec le volet de détails comme cible de navigation.

Compose Material 3 Adaptive

Jetpack Compose est l'approche déclarative moderne pour créer des applications adaptatives sans la duplication et la charge de maintenance de plusieurs fichiers de mise en page.

La bibliothèque Compose Material 3 Adaptive contient des composables qui gèrent les classes de taille de fenêtre, les composants de navigation, les mises en page à plusieurs volets et les positions pliables et l'emplacement de la charnière, par exemple :

  • NavigationSuiteScaffold: bascule automatiquement entre la barre de navigation et le rail de navigation en fonction de la classe de taille de fenêtre de l'application et de la position de l'appareil.

  • ListDetailPaneScaffold : implémente la mise en page canonique liste/détails.

    Adapte la mise en page à la taille de la fenêtre de l'application. Présente une liste et les détails d'un élément de liste dans des volets côte à côte sur la classe de taille de fenêtre étendue, mais uniquement la liste ou les détails sur les classes de taille de fenêtre compacte et moyenne.

  • SupportingPaneScaffold : implémente la mise en page canonique du volet secondaire .

    Présente le volet de contenu principal et un volet secondaire sur la classe de taille de fenêtre étendue, mais uniquement le volet de contenu principal sur les classes de taille de fenêtre compacte et moyenne.

La bibliothèque Compose Material 3 Adaptive est une dépendance clé pour le développement d'applications adaptatives.

Configuration et continuité

Les applications adaptatives conservent la continuité lors des modifications de configuration.

Une modification de configuration se produit lorsque la taille de la fenêtre de l'application est modifiée, que la position d'un appareil pliable change ou que la densité de l'écran ou la police change.

Par défaut, les modifications de configuration recréent l'activité de l'application, et tout l'état de l'activité est perdu. Pour maintenir la continuité, les applications adaptatives enregistrent l'état dans la méthode onSaveInstanceState() de l'activité ou dans un ViewModel.

Stratégie

Les applications adaptatives répondent aux changements de position des appareils pliables. Les positions incluent la position sur table et la position livre.

Téléphone pliable en mode sur table, avec la moitié inférieure de l'écran posée sur une surface et la moitié supérieure à la verticale.
Figure 7. Appareil pliable en position sur table.

L'interface WindowInfoTracker de Jetpack WindowManager vous permet d' obtenir une liste d'objets DisplayFeature pour l'appareil. Parmi les fonctionnalités d'affichage figure FoldingFeature.State, qui indique si l'appareil est complètement ou à moitié ouvert.

La bibliothèque Compose Material 3 Adaptive fournit la currentWindowAdaptiveInfo() fonction de premier niveau, qui renvoie une instance de WindowAdaptiveInfo contenant windowPosture.

Entrées autres que tactiles

Les utilisateurs connectent souvent des claviers, des pavés tactiles, des souris et des stylets externes aux appareils à grand écran. Les périphériques améliorent la productivité, la précision de la saisie, l'expression personnelle et l'accessibilité. La plupart des appareils ChromeOS sont équipés de claviers et de pavés tactiles intégrés.

Les applications adaptatives sont compatibles avec les périphériques d'entrée externes, mais le framework Android effectue une grande partie du travail pour vous :

  • Jetpack Compose 1.7 et versions ultérieures : la navigation par onglets au clavier et le clic, la sélection et le défilement à la souris ou au pavé tactile sont compatibles par défaut.

  • Bibliothèque Jetpack androidx.compose.material3 : permet aux utilisateurs d'écrire dans n'importe quel composant TextField à l'aide d'un stylet.

  • Assistant de raccourcis clavier : permet aux utilisateurs de découvrir les raccourcis clavier de la plate-forme et des applications Android. Publiez les raccourcis clavier de votre application dans l'assistant de raccourcis clavier en remplaçant le onProvideKeyboardShortcuts() rappel de fenêtre.

Pour prendre en charge pleinement les facteurs de forme de toutes les tailles, les applications adaptatives sont compatibles avec tous les types d'entrée.

Tester les applications adaptatives

Testez différentes tailles d'écran et de fenêtre ainsi que différentes configurations d'appareil. Utilisez des captures d'écran côté hôte et des aperçus Compose pour vérifier les mises en page de votre application. Exécutez votre application sur des émulateurs Android Studio et des appareils Android à distance hébergés dans des centres de données Google.

Consignes relatives à la qualité des applications sur grand écran

Les consignes relatives à la qualité des applications sur grand écran vous aident à vérifier que votre application adaptative fonctionne correctement sur les tablettes, les appareils pliables et les appareils ChromeOS. Les consignes incluent des tests qui vous permettent de vérifier les fonctionnalités de l'application pour les parcours utilisateur critiques. Bien que les consignes soient axées sur les grands écrans, elles sont compatibles avec toutes les tailles d'écran.

Configurations multiples

L'interface DeviceConfigurationOverride de Compose 1.7 et versions ultérieures vous permet de remplacer différents aspects de la configuration de l'appareil. L'API simule différentes configurations d'appareil de manière localisée pour tout contenu composable que vous souhaitez tester. Par exemple, vous pouvez tester plusieurs tailles d'interface utilisateur arbitraires en une seule exécution de votre suite de tests sur un seul appareil ou émulateur.

Avec la fonction d'extension DeviceConfigurationOverride.then(), vous pouvez tester plusieurs paramètres de configuration, tels que la taille de la police, les paramètres régionaux, le thème et la taille de la mise en page, en même temps.

Captures d'écran côté hôte

Les tests de capture d'écran côté hôte sont un moyen rapide et évolutif de vérifier l'apparence visuelle des mises en page de votre application. Utilisez des captures d'écran côté hôte pour tester votre interface utilisateur pour différentes tailles d'écran.

Pour en savoir plus, consultez la section Tester les captures d'écran de l'aperçu Compose.

Aperçus Compose

Les aperçus Compose vous permettent de vérifier l'interface utilisateur de votre application dans la vue de conception d'Android Studio. Les aperçus utilisent des annotations, telles que @PreviewScreenSizes, @PreviewFontScale et @PreviewLightDark, pour vous permettre de voir le contenu composable dans différentes configurations. Vous pouvez même interagir avec les aperçus.

Android Studio met également en évidence les problèmes d'usabilité courants dans les aperçus, tels que les boutons ou les champs de texte trop larges.

Pour en savoir plus, consultez la section Prévisualiser votre interface utilisateur avec des aperçus composables.

Émulateurs

Android Studio propose différents émulateurs pour tester différentes tailles de mise en page :

  • Émulateur redimensionnable : émule un téléphone, une tablette ou un appareil pliable, et vous permet de basculer entre eux à la volée.
  • Émulateur Pixel Fold : émule le téléphone pliable à grand écran Pixel Fold.
  • Émulateur Pixel Tablet : émule l'appareil à grand écran Pixel Tablet.
  • Émulateur de bureau : vous permet de tester le fenêtrage au format libre, le survol de la souris et les raccourcis clavier.

Streaming d'appareils à distance

Connectez-vous en toute sécurité à des appareils Android à distance hébergés dans des centres de données Google et exécutez votre application sur les derniers appareils Pixel et Samsung. Installez et déboguez des applications, exécutez des commandes ADB, et faites pivoter et pliez des appareils pour vérifier que votre application fonctionne correctement sur différents appareils réels.

Le streaming d'appareils à distance est intégré à Android Studio. Pour en savoir plus, consultez la section Streaming d'appareils Android, optimisé par Firebase.

Ressources supplémentaires