Les applications Android ont un rôle important à jouer dans la redéfinition de l'informatique moderne sur grand écran. Toutefois, le simple fait d'exécuter votre application mobile sur un Chromebook n'offre pas la meilleure expérience à vos utilisateurs.
Cette page décrit certaines façons de personnaliser votre expérience pour les ordinateurs portables et les appareils convertibles. Consultez notre liste complète de tests pour en savoir plus sur les tests de compatibilité de votre application sur ces appareils.
Exploiter la compatibilité avec le mode multifenêtre de forme libre
La mise en œuvre des applications Android dans ChromeOS propose une compatibilité de base avec le mode multifenêtre. Au lieu d'occuper toujours l'intégralité de l'écran, Android affiche les applications sur ChromeOS dans des conteneurs de fenêtres de forme libre, ce qui est plus adapté à ces appareils.
Les utilisateurs peuvent redimensionner la fenêtre contenant votre application Android, comme illustré sur la figure 1. Pour vous assurer que vos fenêtres de forme libre sont redimensionnées de manière fluide et affichent l'intégralité de 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 n'est pas la fenêtre la plus utilisée au premier plan.
- 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 au-dessus de l'application, qui s'affiche lorsque les utilisateurs maintiennent enfoncés les commandes de fenêtre et le bouton "Retour". Pour que votre application ait l'air soignée et personnalisée pour ChromeOS, définissez les valeurs colorPrimary et, si possible, colorPrimaryDark dans le thème de votre application.
colorPrimaryDark est utilisé pour colorer la barre supérieure. Si seul colorPrimary est défini, ChromeOS utilise une version plus sombre de cette couleur 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 dotés d'un clavier physique et d'un pavé tactile, et certains Chromebooks sont également pourvus d'un écran tactile. Certains ordinateurs portables peuvent être convertis en tablettes.
Dans vos applications pour ChromeOS, gérez les entrées de la souris, du pavé tactile et du clavier pour que l'application soit utilisable sans écran tactile. La plupart des 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 en fonction de la souris, et de prendre en charge et de faire la distinction entre les entrées de la souris et les entrées tactiles.
Vérifiez les points suivants :
- Vous pouvez cliquer sur toutes les cibles avec la souris.
- Il doit être possible de faire défiler toutes les surfaces déroulantes à l'aide de la molette de la souris, comme illustré sur la figure 2.
- Les états de survol sont implémentés avec soin pour améliorer la découverte de l'UI sans submerger l'utilisateur, comme illustré sur la figure 3.
Figure 2. Défilement avec la molette de la souris.
Figure 3. États de pointage des boutons.
Le cas échéant, faites la différence entre les entrées de la souris et les entrées tactiles. Par exemple, un appui prolongé sur un élément peut déclencher une interface utilisateur de sélection multiple, tandis qu'un clic droit sur le même élément peut déclencher un menu d'options.
Curseurs personnalisés
Personnalisez les curseurs de souris de votre application pour indiquer aux utilisateurs comment interagir avec les éléments de son interface utilisateur.
Vous pouvez définir le PointerIcon approprié à utiliser lorsque les utilisateurs interagissent avec un élément en appliquant le modificateur
pointerHoverIcon.
Dans vos applications, affichez tous les éléments suivants :
- Pointeurs en forme de I pour le texte
- Poignées de redimensionnement sur les bords des calques redimensionnables
- Pointeur en forme de main ouverte ou fermée pour le contenu qui peut être déplacé ou fait glisser à 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
Comme chaque Chromebook est équipé d'un clavier physique, fournissez des touches de raccourci pour permettre à vos utilisateurs d'être plus productifs. Par exemple, si votre application est compatible avec l'impression, vous pouvez utiliser Control+P pour ouvrir une boîte de dialogue d'impression.
De même, gérez tous les éléments d'UI importants à l'aide de la navigation par tabulation. Ce point est particulièrement important pour l'accessibilité. Pour répondre aux normes d'accessibilité, toutes les surfaces de l'UI doivent présenter des états de sélection évidents et conformes à l'accessibilité, comme illustré dans les figures suivantes :
Figure 4. Tabulation transversale.
Figure 5. Remplacer un geste de balayage par une commande qui apparaît au survol.
Veillez à implémenter des alternatives au clavier ou à la souris pour les fonctionnalités de base masquées sous des interactions tactiles spécifiques, telles que les actions d'appui prolongé, les balayages ou d'autres gestes multitouch. Par exemple, vous pouvez fournir des boutons qui s'affichent sur une surface au passage de la souris.
Pour en savoir plus sur la compatibilité avec les claviers, les pavés tactiles et les souris, consultez Entrées compatibles sur les grands écrans.
Améliorer encore les entrées utilisateur
Pour que votre application offre des fonctionnalités de qualité équivalente à celles d'un ordinateur, tenez compte des entrées axées sur la productivité suivantes.
Menus contextuels
Les menus contextuels Android, qui sont un autre accélérateur permettant aux utilisateurs d'accéder aux fonctionnalités de votre application, peuvent être déclenchés en cliquant sur le bouton secondaire de la souris ou du pavé tactile, ou en appuyant de manière prolongée sur un écran tactile :
Figure 6. Menu contextuel qui s'affiche lorsque vous effectuez un clic droit.
Faire glisser
La création d'interactions de déplacement, comme celle de la figure ci-dessous, peut apporter des fonctionnalités de productivité efficaces et intuitives à votre application. Pour en savoir plus, consultez Déplacement.
Figure 7. Glissez-déposez des fichiers dans une interface en arborescence.
Compatible avec les stylets
La prise en charge du stylet est essentielle pour les applications de dessin et de prise de notes. Fournissez une assistance améliorée pour les Chromebooks et les tablettes équipés d'un stylet en implémentant des interactions adaptées à l'utilisation du stylet.
Tenez compte des variations potentielles des différents stylets lorsque vous concevez vos interactions avec le stylet. Pour obtenir un aperçu des API de stylet, consultez Entrées compatibles sur les grands écrans.
Rendre vos mises en page responsives
Exploitez pleinement l'espace d'affichage disponible pour votre application, quel que soit son état visuel (plein écran, portrait, paysage ou fenêtré). Voici quelques exemples d'utilisation judicieuse de l'espace :
- Afficher l'architecture de l'application
- Limitez la longueur du texte et la taille de l'image à une largeur maximale.
- Mieux utiliser l'espace disponible grâce à la barre d'outils de l'application
- Améliorez l'emplacement des affordances de l'UI en adaptant l'application à l'utilisation de la souris plutôt qu'à celle 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.
- Utilisez des classes de taille de fenêtre et des mises en page de volets pour implémenter une conception adaptative.
Tenez également compte des points suivants :
- Supprimez ou réduisez l'importance des composants à défilement horizontal.
- Évitez l'UI modale en plein écran. Utilisez l'UI intégrée, comme les indicateurs de progression et les alertes, pour toutes les actions non critiques.
- Utilisez des composants d'UI améliorés, tels que des sélecteurs de date et d'heure, des champs de texte et des menus conçus pour la souris, le clavier et les grands écrans.
- Utilisez des 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 ou moyenne taille.
- Supprimez ou modifiez les boutons d'action flottants pour améliorer la navigation au clavier. Par défaut, un FAB se positionne en dernier dans l'ordre de tabulation transversal. Placez-le en premier, car il s'agit de l'action principale, ou remplacez-le par une autre affordance de niveau supérieur.
Figure 8. Maquettes d'une mise en page responsive sur un écran de téléphone et d'ordinateur.
Modifier les schémas de navigation
Le bouton Retour au niveau du système est un modèle hérité des racines mobiles d'Android, qui ne convient pas aussi bien dans un contexte de bureau.
À mesure que votre application devient de plus en plus personnalisée pour un environnement d'ordinateur portable, envisagez d'adopter un modèle de navigation qui minimise le bouton Retour. Laissez l'application gérer sa propre pile d'historique en fournissant des boutons de retour, des fil d'Ariane ou d'autres moyens de quitter l'application, comme des boutons de fermeture ou d'annulation, dans son 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>. Le paramètre true permet de masquer 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 la caméra
Des problèmes de caméra peuvent survenir lorsque l'application ne peut s'exécuter qu'en orientation portrait, mais que l'utilisateur l'exécute sur un écran en orientation paysage. Dans ce cas, l'aperçu ou le résultat capturé peuvent être mal orientés.
Pour simplifier le développement de l'appareil photo, pensez à utiliser la bibliothèque CameraX.
Pour en savoir plus, consultez l'explication des problèmes liés à l'aperçu de l'appareil photo.
Gérer les paramètres de l'appareil
Tenez compte des paramètres d'appareil suivants pour les applications exécutées sur ChromeOS.
Régler le volume
Les appareils ChromeOS sont des appareils à volume fixe : les applications qui émettent du son disposent de leurs propres commandes de volume. Suivez les consignes pour travailler avec des appareils à volume fixe.
Modifier la luminosité de l'écran
Vous ne pouvez pas régler la luminosité de l'appareil sur ChromeOS. Les appels à system settings et WindowManager.LayoutParams sont ignorés.