Les applications Android ont un rôle important à jouer dans la redéfinition de l'informatique moderne sur les grands écrans. Toutefois, le simple fait d'exécuter votre application mobile sur un Chromebook n'offre pas à vos utilisateurs la meilleure expérience possible.
Cette page présente quelques façons d'adapter votre expérience aux ordinateurs portables et aux facteurs de forme convertibles. Consultez notre liste complète de tests pour en savoir plus sur la façon de tester la compatibilité de votre application sur ces appareils.
Profitez de la compatibilité avec le mode multifenêtre de format libre.
L'implémentation d'applications Android sous ChromeOS inclut la compatibilité multifenêtre de base. Au lieu d'occuper toujours tout l'écran, Android affiche les applications sur ChromeOS dans des conteneurs de fenêtre de format libre, ce qui convient davantage à ces appareils.
Les utilisateurs peuvent redimensionner la fenêtre contenant 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 présentent tout leur contenu à l'utilisateur, consultez les consignes de la section Gestion des fenêtres.
Figure 1 : Fenêtre d'application redimensionnable.
Vous pouvez améliorer l'expérience utilisateur lorsque votre application s'exécute sur ChromeOS en suivant 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'UI, même lorsque votre application ne se trouve pas dans la fenêtre la plus active.
- Assurez-vous que la mise en page de votre application est ajustée de manière appropriée chaque fois que l'utilisateur redimensionne la 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 appuient de manière prolongée sur les commandes de la fenêtre et le bouton "Retour". Pour soigner et personnaliser l'apparence de votre application pour ChromeOS, définissez des valeurs colorPrimary et, si possible, colorPrimaryDark dans le thème de votre application.
colorPrimaryDark permet de colorer la barre supérieure. Si seul colorPrimary est défini, ChromeOS en utilise une version plus sombre dans la barre supérieure. Pour en savoir plus, consultez la section Styles et thèmes.
Assurer la compatibilité avec 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 sont également dotés d'un écran tactile. Certains appareils peuvent passer de l'ordinateur portable au format de tablette.
Dans vos applications pour ChromeOS, prenez en charge la saisie à l'aide de la souris, du pavé tactile et du clavier afin que l'application soit utilisable sans écran tactile. De nombreuses applications sont déjà compatibles avec 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 en fonction de la souris, et de prendre en charge et de distinguer les entrées tactiles des souris.
Vérifiez les points suivants:
- Toutes les cibles sont cliquables avec la souris.
- Toutes les surfaces tactiles déroulantes défilent à l'aide de la molette de la souris, comme illustré dans la figure 2.
- Les états de survol sont implémentés avec discernement 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 du bouton pointé
Si nécessaire, faites la différence entre les saisies tactiles et celles à la souris. Par exemple, appuyer de manière prolongée sur un élément peut déclencher une UI à sélection multiple, tandis que cliquer avec le bouton droit sur le même élément peut déclencher un menu d'options.
Curseurs personnalisés
Personnalisez les curseurs de la souris de vos applications pour indiquer quel élément de l'interface utilisateur avec lequel 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 tous les éléments suivants:
- Curseurs en forme de I pour le texte
- Poignées de redimensionnement sur les bords des calques redimensionnables
- Curseurs en forme de main ouverte et fermée pour le contenu qui peut être déplacé ou déplacé en cliquant et en faisant glisser
- 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
Étant donné que chaque Chromebook dispose d'un clavier physique, fournissez des touches d'accès rapide pour permettre à vos utilisateurs d'être plus productifs. Par exemple, si votre application prend en charge l'impression, vous pouvez utiliser Ctrl+P pour ouvrir une boîte de dialogue d'impression.
De même, vous pouvez gérer tous les éléments importants de l'interface utilisateur à l'aide de la navigation par onglet. Ceci est particulièrement important pour l’accessibilité. Pour respecter les normes d'accessibilité, toutes les surfaces d'interface utilisateur doivent présenter des états ciblés évidents et conformes à l'accessibilité, comme illustré dans les figures suivantes:
Figure 4. la touche de 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 lors des interactions spécifiques à l'écran tactile, telles que les actions d'appui prolongé, les balayages ou d'autres gestes à plusieurs doigts. Un exemple de solution consiste à fournir des boutons qui apparaissent sur une surface lorsque l'utilisateur pointe dessus.
Pour en savoir plus sur la compatibilité des claviers, pavés tactiles et souris, consultez la section Entrées compatibles sur les grands écrans.
Améliorer encore les entrées utilisateur
Pour que votre application bénéficie de fonctionnalités de bureau, prenez en compte les entrées suivantes axées sur la productivité.
Menus contextuels
Les menus contextuels Android, qui constituent un autre accélérateur permettant aux utilisateurs d'accéder aux fonctionnalités de votre application, peuvent être déclenchés par un clic de souris ou le bouton secondaire du pavé tactile, ou en appuyant de manière prolongée sur un écran tactile:
Figure 6. Un menu contextuel apparaît lorsque l'utilisateur effectue un clic droit.
Glisser-déposer
La création d'interactions de type "glisser-déposer", comme celle illustrée sur la figure suivante, peut apporter à votre application des fonctionnalités de productivité efficaces et intuitives. 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 compatibilité avec le stylet est essentielle pour les applications de dessin et de prise de notes. Améliorez la compatibilité avec les Chromebooks et les tablettes équipés d'un stylet en mettant en œuvre des interactions adaptées à l'utilisation de la saisie au stylet.
Tenez compte des variations potentielles des différents matériels de stylet lorsque vous concevez vos interactions avec ce type de produit. 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 à bon escient 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:
- Affichez l'architecture des applications.
- Limitez la longueur du texte et la taille de l'image à une largeur maximale.
- Faites un meilleur usage de l'espace dans la barre d'outils de l'application.
- Amélioration du placement des affordances de l'interface utilisateur en adaptant l'application à l'utilisation de la souris au lieu de 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 responsif. Pour en savoir plus, consultez la section Grille de mise en page responsive.
- Redimensionnez et modifiez l'UI si nécessaire à l'aide du système de colonnes. Évitez d'ouvrir de nouvelles fenêtres dans la mesure du possible.
- Supprimez ou réduisez l'importance des composants à défilement horizontal.
- Évitez l'interface utilisateur modale plein écran. Utilisez l'interface utilisateur intégrée, comme les indicateurs de progression et les alertes, pour toutes les actions non critiques.
- Utilisez des composants d'interface utilisateur améliorés, tels que des sélecteurs d'heure et de date, des champs de texte et des menus conçus pour la souris, le clavier et les grands écrans.
- Pour une fonctionnalité de modification de petite à moyenne taille, utilisez des modifications intégrées, des colonnes supplémentaires ou une interface utilisateur modale au lieu d'une nouvelle activité.
- Supprimez ou modifiez les boutons d'action flottants pour une meilleure navigation au clavier. Par défaut, les positions d'un bouton d'action flottant se situent en dernier dans l'ordre de tabulation transversal. Faites-le 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 réactive sur un écran de téléphone et d'ordinateur de bureau.
Modifier les schémas de navigation
Un bouton "Retour" au niveau du système est un schéma transmis depuis les appareils mobiles racine d'Android, qui ne convient pas aussi bien dans un contexte d'ordinateur de bureau.
Étant donné que votre application est de plus en plus personnalisée pour un environnement d'ordinateur portable, envisagez d'adopter un modèle de navigation qui met moins 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 "Fermer" ou "Annuler" dans l'interface utilisateur pour 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 sur un écran 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 Android 7.0 au minimum (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
Tenez compte des paramètres suivants concernant les appareils pour les applications exécutées sur ChromeOS.Régler le volume
Les appareils ChromeOS sont des appareils à volume fixe: les applications qui diffusent du son disposent de leurs propres commandes 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.
Supports de formation supplémentaires
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 (Intégrer votre application Android sur les Chromebooks) sur le blog des développeurs Android.
- Regardez la session Applications Android pour les Chromebooks et les appareils à grand écran de la conférence Google I/O 2017.