Les applications Android jouent un rôle important dans la refonte de l'informatique moderne sur les grands écrans. Toutefois, le simple fait d'exécuter votre application mobile sur un Chromebook ne garantit pas une expérience optimale à vos utilisateurs.
Cette page présente quelques façons d'adapter votre expérience aux facteurs de forme portables et convertibles. Consultez notre liste complète de tests pour savoir comment tester la compatibilité de votre application sur ces appareils.
Profitez du mode multifenêtre de format libre.
L'implémentation des applications Android sous ChromeOS inclut la prise en charge du mode multifenêtre de base. Au lieu d'occuper systématiquement tout l'écran, Android affiche les applications sur ChromeOS dans des conteneurs de fenêtres de format libre, ce qui est plus approprié pour ces appareils.
Les utilisateurs peuvent redimensionner la fenêtre qui contient votre application Android, comme illustré dans la figure 1. Pour vous assurer que vos fenêtres de format libre sont redimensionnées de manière fluide et que l'utilisateur peut voir l'intégralité de leur contenu, consultez les consignes de la section Gestion des fenêtres.
Figure 1 : Fenêtre d'application redimensionnable
Pour améliorer l'expérience utilisateur lorsque votre application s'exécute sur ChromeOS, suivez ces bonnes pratiques:
- Gérez correctement le cycle de vie de l'activité en mode multifenêtre et assurez-vous de continuer à mettre à jour l'interface utilisateur, même lorsque votre application n'est pas la fenêtre la plus active.
- Assurez-vous que votre application ajuste sa mise en page de manière appropriée chaque fois que l'utilisateur redimensionne sa fenêtre.
- Personnalisez les dimensions initiales de la fenêtre de l'application en spécifiant sa taille de lancement.
- Sachez que l'orientation de l'activité racine de l'application affecte toutes ses fenêtres.
Personnaliser la couleur de la barre supérieure
ChromeOS utilise le thème de l'application pour colorer la barre supérieure affichée en haut de l'application, qui s'affiche lorsque les utilisateurs maintiennent les commandes de la fenêtre et le bouton Retour enfoncés. Pour que votre application ait une apparence soignée et personnalisée pour ChromeOS, définissez les valeurs colorPrimary et, si possible, colorPrimaryDark dans le thème de votre application.
colorPrimaryDark permet de colorer la barre supérieure. Si seule colorPrimary est définie, ChromeOS en utilise une version plus sombre dans la barre supérieure. Pour en savoir plus, consultez la section Styles et thèmes.
Prendre en charge le clavier, le pavé tactile et la souris
Tous les Chromebooks sont équipés d'un clavier physique et d'un pavé tactile, et certains possèdent également un écran tactile. Certains appareils peuvent être convertis sous forme d'ordinateur portable en tablette.
Dans vos applications pour ChromeOS, prenez en charge la saisie à partir de la souris, du pavé tactile et du clavier afin que l'application puisse être utilisée sans écran tactile. De nombreuses applications prennent déjà en charge la souris et le pavé tactile sans nécessiter de travail supplémentaire. Toutefois, il est préférable de personnaliser le comportement de votre application de manière appropriée pour la souris, et de prendre en charge et de faire la distinction entre les entrées à la souris et les entrées tactiles.
Vérifiez les points suivants:
- Vous pouvez cliquer sur toutes les cibles avec la souris.
- Toutes les surfaces à défilement tactile défilent à l'aide de la molette de la souris, comme illustré dans la figure 2.
- Les états de pointage sont implémentés avec précaution afin d'améliorer la découverte de l'interface utilisateur sans submerger l'utilisateur, comme illustré dans la figure 3.
Figure 2. Défilement avec la molette de la souris
Figure 3. États de survol du bouton.
Le cas échéant, faites la différence entre les saisies à la souris et les entrées tactiles. Par exemple, un appui prolongé sur un élément peut déclencher une interface utilisateur à sélection multiple, tandis qu'un clic droit sur cet élément peut déclencher un menu d'options.
Curseurs personnalisés
Personnalisez les curseurs de la souris de vos applications pour indiquer avec quel élément de l'interface utilisateur l'utilisateur peut interagir et comment. Vous pouvez définir le PointerIcon à utiliser lorsque les utilisateurs interagissent avec une vue en appelant la méthode setPointerIcon().
Dans vos applications, affichez les éléments suivants:
- Pointeurs en faisceau en I pour le texte
- Poignées de redimensionnement sur les bords des calques redimensionnables
- Pointeurs à main ouverte et fermée vers le contenu qui peut être affiché en mode panoramique ou déplacé à l'aide d'un geste de clic et de déplacement
- Icônes de chargement signalant qu'un traitement est en cours
La classe PointerIcon fournit des constantes que vous pouvez utiliser pour implémenter des curseurs personnalisés.
Raccourcis clavier et navigation
Chaque Chromebook étant doté d'un clavier physique, fournissez des touches d'accès rapide pour permettre à vos utilisateurs d'être plus productifs. Par exemple, si votre application est compatible avec l'impression, vous pouvez utiliser les touches Ctrl+P pour ouvrir une boîte de dialogue d'impression.
De même, gérez tous les éléments importants de l'interface utilisateur à l'aide de la navigation via la touche de tabulation. Cela est particulièrement important pour l'accessibilité. Pour respecter les normes d'accessibilité, toutes les surfaces d'UI doivent avoir des états ciblés évidents et conformes à l'accessibilité, comme illustré dans les figures suivantes:
Figure 4. Tabulation transversale
Figure 5 : Remplacement d'un geste de balayage par une commande qui s'affiche lorsque l'utilisateur pointe dessus.
Veillez à implémenter des alternatives au clavier ou à la souris pour les fonctionnalités de base masquées dans les interactions tactiles, telles que les actions d'appui prolongé, les balayages ou d'autres gestes à plusieurs doigts. Un exemple de solution consiste à fournir des boutons qui s'affichent sur une surface lorsque l'utilisateur pointe dessus.
Pour en savoir plus sur la compatibilité avec le clavier, le pavé tactile et la souris, consultez la section Compatibilité avec la saisie sur les grands écrans.
Améliorer encore les entrées utilisateur
Pour que votre application bénéficie d'une fonctionnalité de niveau ordinateur de bureau, prenez en compte les entrées suivantes axées sur la productivité.
Menus contextuels
Les menus contextuels Android, qui sont un autre accélérateur permettant de rediriger les utilisateurs vers les fonctionnalités de votre application, peuvent être déclenchés par un clic de souris ou sur le bouton secondaire du pavé tactile, ou par un appui prolongé sur un écran tactile:
Figure 6. Un menu contextuel s'affiche lorsque l'utilisateur effectue un clic droit.
Glisser-déposer
La création d'interactions de type "glisser-déposer", comme celle illustrée ci-dessous, peut apporter des fonctionnalités de productivité efficaces et intuitives à votre application. Pour en savoir plus, consultez la section Glisser-déposer.
Figure 7. Glisser-déposer dans une interface d'arborescence de fichiers
Compatible avec les stylets
La prise en charge des stylets est essentielle pour les applications de dessin et de prise de notes. Prise en charge améliorée des Chromebooks et tablettes équipés d'un stylet en implémentant des interactions adaptées à l'utilisation de la saisie au stylet.
Tenez compte des variations potentielles des différents types de stylet lorsque vous concevez vos interactions avec le stylet. Pour en savoir plus sur les API de stylet, consultez la section Entrées compatibles sur les grands écrans.
Rendre vos mises en page responsives
Utilisez au mieux l'espace disponible à l'écran pour votre application, quel que soit son état visuel (plein écran, portrait, paysage ou fenêtre). Voici quelques exemples d'utilisation correcte de l'espace:
- Afficher l'architecture des applications
- Limitez la longueur du texte et la taille des images à une largeur maximale.
- Optimisez l'utilisation de l'espace disponible dans la barre d'outils de l'application.
- Améliorer le placement des affordances d'UI en adaptant l'application à l'utilisation de la souris plutôt qu'à l'utilisation du pouce.
- Optimisez la taille des vidéos et des images, définissez une largeur et une hauteur maximales pour tous les contenus multimédias, et maximisez la lisibilité et la numérisation.
- Implémentez un système de colonnes réactif. Pour en savoir plus, consultez la section Grille de mise en page responsive.
- Redimensionnez et modifiez l'interface utilisateur si nécessaire à l'aide du système de colonnes. Dans la mesure du possible, évitez d'ouvrir de nouvelles fenêtres.
- Supprimez les composants à défilement horizontal ou réduisez leur importance.
- Évitez d'utiliser une interface utilisateur modale plein écran. Utilisez une interface utilisateur intégrée, comme des indicateurs de progression et des alertes, pour toutes les actions non critiques.
- Utilisez des composants d'interface utilisateur améliorés, tels que les sélecteurs de date et d'heure, les champs de texte et les menus, conçus pour la souris, le clavier et les grands écrans.
- Utilisez les modifications intégrées, des colonnes supplémentaires ou une interface utilisateur modale au lieu d'une nouvelle activité pour une fonctionnalité de modification de petite à moyenne taille.
- Supprimez ou modifiez les boutons d'action flottants pour améliorer la navigation au clavier. Par défaut, un bouton d'action flottant se positionne en dernier dans l'ordre de tabulation transversal. Utilisez plutôt cette option en premier, car il s'agit de l'action principale, ou remplacez-la par une autre affordance de niveau supérieur.
Figure 8. Simulations d'une mise en page responsive sur un écran de téléphone et d'ordinateur de bureau.
Modifier les modèles de navigation
Un bouton "Retour" au niveau du système est un schéma transféré depuis les systèmes racines d'Android, c'est-à-dire un modèle qui ne s'adapte pas aussi bien à un environnement de bureau.
À mesure que votre application est de plus en plus personnalisée pour un environnement d'ordinateur portable, envisagez de passer à un schéma de navigation qui ne met pas l'accent sur le bouton "Retour". Laissez l'application gérer sa propre pile d'historique en fournissant des boutons "Retour", des fils d'Ariane ou d'autres routes d'échappement comme des boutons de fermeture ou d'annulation dans son interface utilisateur sur grand écran.
Vous pouvez contrôler si votre application affiche un bouton "Retour" dans sa fenêtre en définissant une préférence dans la balise <activity>. Un paramètre true masque le bouton "Retour" :
<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />
Résoudre les problèmes liés aux images d'aperçu de l'appareil photo
Des problèmes d'appareil photo peuvent survenir lorsque l'application ne peut s'exécuter qu'en mode portrait, mais que l'utilisateur l'exécute en mode paysage. Dans ce cas, la rotation de l'aperçu ou du résultat capturé peut être incorrecte.
Le mode de compatibilité modifie la façon dont le système gère les événements, tels que les changements d'orientation, dans ChromeOS. Cela permet d'éviter les problèmes lorsque l'appareil photo est utilisé dans le mauvais mode d'orientation. Pour activer le mode de compatibilité, remplissez les critères suivants:
- Ciblez au moins Android 7.0 (niveau d'API 24). Le niveau minimal du SDK peut être inférieur.
- Faites en sorte que votre application puisse être redimensionnée.
Gérer les paramètres de l'appareil
Examinez les paramètres suivants pour les applications exécutées sous ChromeOS.
Régler le volume
Les appareils ChromeOS sont des appareils à volume fixe: les applications qui diffusent du son disposent de leur propre commande de volume. Suivez les consignes pour utiliser des appareils à volume fixe.
Modifier la luminosité de l'écran
Vous ne pouvez pas régler la luminosité de l'appareil sous ChromeOS. Les appels à system settings et WindowManager.LayoutParams sont ignorés.
Autres supports de formation
Pour en savoir plus sur l'optimisation de vos applications Android pour les Chromebooks, consultez les ressources suivantes:
- Lisez l'article Bring your Android App to Chromebooks (Importer votre application Android sur les Chromebooks) sur le blog des développeurs Android.
- Regardez la session sur les applications Android pour les Chromebooks et les appareils à grand écran de la conférence Google I/O 2017.