Premiers pas avec les grands écrans

Les grands écrans vous de repousser les limites du développement d'applications. Les grands écrans des tablettes, des pliables et des appareils Chrome OS affichent du contenu, facilitent le multitâche et accueillent des interfaces utilisateur impossibles à afficher sur les petits écrans.

Pour commencer à développer des applications destinées aux grands écrans, suivez les consignes relatives à la qualité des applications sur grand écran. Ces consignes regroupent diverses exigences à respecter pour optimiser votre application sur les grands écrans.

Les consignes relatives à la qualité sont classées en trois catégories : adapté aux grands écrans, optimisé pour les grands écrans et différencié pour les grands écrans. Afin d'ajouter des fonctionnalités pour grands écrans à votre application, passez progressivement d'un niveau à l'autre, en commençant par le niveau "adapté aux grands écrans". Si votre application existe déjà, reportez-vous aux consignes relatives à la qualité pour déterminer le niveau d'adéquation de votre application pour les grands écrans. Ensuite, implémentez les fonctionnalités niveau par niveau jusqu'à ce que votre application soit spécifiquement différenciée pour les grands écrans.

Adapté aux grands écrans

Une application est adaptée aux grands écrans lorsque les utilisateurs peuvent accéder à toutes ses fonctionnalités sur un appareil à grand écran. Elle prend en charge les orientations portrait et paysage ainsi que le mode multifenêtre, mais la mise en page et l'interface utilisateur peuvent ne pas être optimales.

Configuration et continuité

Les changements de configuration tels que les rotations d'appareils, les changements de taille de fenêtre en mode multifenêtre, et le pliage ou le dépliage d'un appareil peuvent faire perdre du contexte aux utilisateurs ou, pire encore, leur faire perdre des données.

Assurez-vous que votre application conserve et restitue son état lors des changements de configuration, et qu'elle reprend les processus en cours, comme la lecture de contenus multimédias.

Pour en savoir plus, consultez les guides du développeur suivants :

Mode multifenêtre

Les grands écrans contribuent à la productivité et à la facilité d'utilisation du mode multifenêtre. Permettez l'exécution de votre application en mode multifenêtre avec d'autres applications, en mode écran partagé ou en mode libre.

Lorsque l'application est en mode multifenêtre, utilisez l'API WindowMetrics pour déterminer avec précision la taille de la fenêtre de l'application.

Consultez la page Compatibilité avec le mode multifenêtre.

Multireprise

Sous Android 10 (niveau d'API 29) ou version ultérieure, les activités non ciblées restent en mode RESUMED lorsqu'un appareil est en mode multifenêtre. Avant Android 10, ces activités conservaient l'état STARTED, sans utiliser RESUMED.

Assurez-vous que votre application est compatible avec la fonctionnalité de multireprise et qu'elle poursuit donc les processus en cours, comme la lecture de contenus multimédias ou le téléchargement de fichiers, lorsqu'elle n'est pas au premier plan. Votre application doit également gérer la perte de ressources exclusives, telles que l'appareil photo et le micro de l'appareil.

Consultez la section Cycle de vie multifenêtre dans Compatibilité avec le mode multifenêtre.

Aperçu de l'appareil photo

Si votre application inclut un aperçu de l'appareil photo, validez l'orientation et les proportions sur les grands écrans. Les grands écrans pliables en mode portrait peuvent être au format paysage, et le mode multifenêtre peut afficher les applications en mode portrait dans une fenêtre redimensionnable lorsque l'appareil est en mode paysage.

Consultez les références suivantes :

Projection multimédia

Une projection multimédia crée un écran virtuel en fonction des limites de l'écran réel (source). L'écran réel s'affiche en plein écran, même si l'appareil est en mode multifenêtre et que l'application qui crée la projection multimédia s'exécute dans une fenêtre.

Afin d'obtenir les limites appropriées d'une projection multimédia sur grand écran, utilisez l'API WindowMetrics ajoutée dans Android 11 (niveau d'API 30), ou l'API Jetpack WindowManager WindowMetrics pour les niveaux d'API 14 à 29.

Consultez Projection multimédia sur les grands écrans.

Compatibilité de base des périphériques d'entrée externes

Les utilisateurs connectent souvent un clavier ou une souris externe aux tablettes. Les Chromebooks sont équipés d'un clavier et d'un pavé tactile intégrés. Autorisez votre application à gérer les actions liées à un clavier, à une souris et à un pavé tactile afin de permettre l'utilisation de périphériques d'entrée externes. Par exemple :

  • Sélection des boutons, des champs de saisie et des icônes de navigation
  • Sélection d'éléments de menu, de cases d'option, de cases à cocher et de texte
  • Défilement vertical et horizontal dans des éléments tels que des listes

Consultez la section Entrées compatibles sur les grands écrans.

Optimisé pour les grands écrans

Lorsque votre application est optimisée pour les grands écrans, l'expérience utilisateur est immersive, productive et engageante. L'utilisation de votre application sur les appareils à grand écran leur apporte une totale satisfaction.

Mises en page responsives/adaptatives

Pour prendre en charge les écrans de toutes tailles, concevez des mises en page responsives/adaptatives qui offrent une expérience utilisateur optimale sur tous les types d'appareils.

Commencez par vous familiariser avec les références suivantes :

Classes de taille de fenêtre

Les classes de taille de fenêtre sont un ensemble de points d'arrêt de fenêtre d'affichage qui permettent d'implémenter une conception responsive/adaptative. Les classes de taille de fenêtre vous permettent de classer la zone d'affichage disponible pour votre application dans les catégories "Compacte", "Moyenne" ou "Grande", puis d'appliquer une mise en page optimisée.

Consultez la section Classes de taille de fenêtre sous Assurer la compatibilité avec différentes tailles d'écran.

Navigation adaptative dans l'application

Une barre de navigation inférieure fonctionne bien sur les petits écrans, mais sur les grands écrans, un rail ou un panneau de navigation permet de mieux exploiter l'espace supplémentaire disponible à l'écran. Adaptez la navigation de votre application aux changements de taille d'écran.

Consultez Material Design — Appliquer une mise en page.

Éléments d'UI responsifs

Mettez en forme les éléments d'interface utilisateur en fonction de la taille de l'écran Appliquez aux boutons, aux fiches et aux champs de texte qui s'étendent sur toute leur largeur sur les petits écrans, une largeur correspondant à une taille fonctionnellement appropriée sur les grands écrans. Ne laissez pas les boîtes de dialogue et les autres fenêtres modales remplir l'intégralité de l'écran. Placez les menus contextuels et autres fenêtres pop-up associées à côté de l'élément sélectionné par l'utilisateur, et non au centre de l'écran.

Consultez la section Composants de Material Design, en vous concentrant sur les éléments suivants : Boutons, Champs de texte, Menus etBoîtes de dialogue.

Accessibilité

Optimisez votre application pour les fonctionnalités d'accessibilité ("a11y"), telles que la navigation à l'aide de la touche de tabulation et des flèches. Fournissez des raccourcis clavier pour les actions couramment utilisées telles que sélectionner, copier, couper et coller. Activez le contrôle du clavier pour la lecture des contenus multimédias. Par exemple, activez la barre d'espace pour lire et mettre en pause les contenus multimédias, ou la touche Entrée pour envoyer des messages dans les applications de communication.

Découvrez comment créer des applications plus accessibles.

Amélioration de la compatibilité avec les périphériques d'entrée externes

Les applications optimisées pour les grands écrans offrent une meilleure compatibilité avec les entrées effectuées via le clavier, la souris et le pavé tactile. Les menus d'options sont accessibles via un clic droit sur la souris et le pavé tactile. Vous pouvez zoomer sur le contenu de l'application avec la molette de la souris et des gestes de pincement sur le pavé tactile. Lorsque vous passez la souris sur les éléments de l'interface utilisateur, des états spécifiques sont activés.

Différencié pour les grands écrans

Les applications différenciées pour les grands écrans se démarquent de celles des plates-formes de téléchargement d'applications. Elles offrent une expérience utilisateur inégalée par rapport aux petits écrans.

Multitâche

Les grands écrans facilitent le multitâche. Le mode multifenêtre permet de réaliser plusieurs tâches en même temps, mais il en va de même pour les modes d'affichage spéciaux de type Picture-in-picture et multi-instance.

Mode Picture-in-picture

Si votre application lit du contenu vidéo, implémentez le mode Picture-in-picture afin que la lecture de la vidéo se poursuive pendant que l'utilisateur interagit avec une autre application.

Consultez la section Compatibilité Picture-in-picture (PIP).

Mode multi-instance

Pour augmenter la productivité dans des applications telles que les éditeurs de documents ou les gestionnaires de contenu, vous pouvez activer l'exécution de plusieurs instances en même temps.

Consultez la section Multi-instance sous Compatibilité avec le mode multifenêtre.

Pliables

Les appareils pliables à grand écran combinent les avantages d'un téléphone et d'une tablette. Les fonctionnalités de pliage, comme les positions à plat et debout, offrent de nouvelles expériences utilisateur. Différenciez votre application avec les fonctionnalités uniques des appareils pliables.

Consultez les références suivantes :

Glisser-déposer

Les grands écrans conviennent particulièrement aux interactions de type "glisser-déposer" au sein d'une même application ou, à partir d'Android 7.0 (niveau d'API 24), entre plusieurs applications en mode multifenêtre.

Pour améliorer la productivité et l'engagement des utilisateurs, ajoutez des fonctionnalités de glisser-déposer à votre application.

Consultez la section Glisser-déposer.

Compatibilité différenciée pour les périphériques d'entrée externes

Assurez une compatibilité similaire à celle d'un ordinateur pour les périphériques d'entrée externes. Créez un ensemble complet de raccourcis clavier personnalisables. Activez les combinaisons clavier/souris ou clavier/pavé tactile, telles queCtrl + clic/Ctrl + appui et Maj + clic/Maj + appui pour fournir des fonctionnalités étendues.

Affichez une barre de défilement pendant que les utilisateurs font défiler le contenu à l'aide de la souris ou du pavé tactile. Dévoilez les éléments masqués de contenu tels que des menus déroulants ou des info-bulles lorsque l'utilisateur passe la souris ou le pavé tactile sur un élément précis. Incluez des menus semblables à ceux d'un ordinateur et des menus contextuels. Permettez le redimensionnement des panneaux de l'interface utilisateur avec la souris ou le pavé tactile. Activez plusieurs clics avec la souris et plusieurs pressions avec le pavé tactile.

Stylet

Les applications de haut niveau sont compatibles avec les appareils à grand écran équipés d'un stylet. Un stylet permet aux utilisateurs de dessiner, d'écrire, d'effacer, de glisser-déposer des éléments et de réaliser d'autres interactions tactiles ou gestuelles.

La prise en charge améliorée du stylet comprend la sensibilité à la pression, la détection d'inclinaison et le rejet de la paume et des doigts (pour que les touches parasites ne soient pas enregistrées).

Offrez une expérience utilisateur exceptionnelle sur les appareils premium en permettant à l'utilisateur d'effectuer n'importe quelle entrée avec le stylet.

Consultez Stylet dans Entrées compatibles sur les grands écrans.

Étapes suivantes

Consultez les consignes relatives à la qualité des applications pour grand écran pour découvrir comment concevoir une application adaptée aux grands écrans, optimisée ou différenciée.

Ressources supplémentaires

Collections de vidéos :