Cette page a été traduite par l'API Cloud Translation.

Principes de base d'Android en Kotlin 10.3 : Concevoir une application pour tous

Cet atelier de programmation fait partie du cours Principes de base d'Android en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.

Introduction

Il est logique de rendre une application utilisable par le plus grand nombre d'utilisateurs, que vous développiez pour le plaisir ou à des fins commerciales. Pour ce faire, plusieurs dimensions sont à prendre en compte.

Prise en charge des langues se lisant de droite à gauche Les langues européennes et de nombreuses autres langues se lisent de gauche à droite. Les applications provenant de ces paramètres régionaux sont généralement conçues pour s'adapter à ces langues. De nombreuses autres langues comptant un grand nombre de locuteurs se lisent de droite à gauche, comme l'arabe. Faites en sorte que votre application fonctionne avec les langues qui se lisent de droite à gauche pour élargir votre audience potentielle.
Analysez l'accessibilité. Deviner comment un autre utilisateur peut vivre l'expérience de votre application est une option qui comporte des pièges. L'application Accessibility Scanner analyse votre application et identifie les points à améliorer pour l'accessibilité.
Concevez des applications compatibles avec TalkBack et incluez des descriptions de contenu. Les déficiences visuelles sont plus fréquentes qu'on ne le pense, et de nombreux utilisateurs, pas seulement les aveugles, utilisent un lecteur d'écran. Les descriptions de contenu sont des phrases que le lecteur d'écran prononce lorsqu'un utilisateur interagit avec un élément de l'écran.
Prise en charge du mode Nuit Pour de nombreux utilisateurs malvoyants, la modification des couleurs de l'écran améliore le contraste et les aide à utiliser votre application. Android facilite la prise en charge du mode Nuit. Vous devez toujours prendre en charge ce mode pour offrir aux utilisateurs une alternative simple aux couleurs d'écran par défaut.

Dans cet atelier de programmation, vous allez explorer chacune de ces options et ajouter la prise en charge à l'application GDG Finder.

Vous apprendrez également à utiliser des chips avec votre application Android. Les chips vous permettent de rendre votre application plus intéressante tout en la gardant accessible.

Ce que vous devez déjà savoir

Vous devez maîtriser les éléments suivants :

Comment créer des applications comportant des activités et des fragments, et comment naviguer entre les fragments en transmettant des données.
Utiliser des vues et des groupes de vues pour organiser une interface utilisateur, en particulier RecyclerView.
Utiliser les composants d'architecture, y compris ViewModel, avec l'architecture recommandée pour créer une application bien structurée et efficace.
Liaison de données, coroutines et gestion des clics de souris.
Comment se connecter à Internet et mettre en cache des données localement à l'aide d'une base de données Room.
Découvrez comment définir les propriétés d'une vue, et comment extraire et utiliser des ressources à partir de fichiers de ressources XML.
Utiliser des styles et des thèmes pour personnaliser l'apparence de votre application.
Utiliser des composants Material, des ressources de dimension et des couleurs personnalisées.

Points abordés

Comment rendre votre application utilisable par le plus grand nombre d'utilisateurs.
Découvrez comment faire fonctionner votre application pour les langues qui se lisent de droite à gauche.
Évaluer l'accessibilité de votre application
Découvrez comment utiliser les descriptions de contenu pour améliorer le fonctionnement de votre application avec les lecteurs d'écran.
Utiliser des chips
Découvrez comment faire fonctionner votre application avec le mode sombre.

Objectifs de l'atelier

Évaluez et étendez une application donnée pour améliorer son accessibilité en la rendant compatible avec les langues qui se lisent de droite à gauche.
Analysez votre application pour déterminer où l'accessibilité pourrait être améliorée.
Utilisez des descriptions de contenu pour les images.
Découvrez comment utiliser les drawables.
Ajoutez la possibilité d'utiliser le mode Nuit à votre application.

L'application de démarrage GDG-finder s'appuie sur tout ce que vous avez appris jusqu'à présent dans ce cours.

L'application utilise ConstraintLayout pour organiser trois écrans. Deux des écrans ne sont que des fichiers de mise en page que vous utiliserez pour explorer les couleurs et le texte sur Android.

Le troisième écran est un outil de localisation des GDG. Les GDG (Google Developer Groups) sont des communautés de développeurs qui se concentrent sur les technologies Google, y compris Android. Les GDG du monde entier organisent des meetups, des conférences, des study jams et d'autres événements.

Lorsque vous développez cette application, vous travaillez sur la liste réelle des GDG. L'écran de recherche utilise la position de l'appareil pour trier les GDG par distance.

Si vous avez de la chance et qu'un GDG existe dans votre région, vous pouvez consulter son site Web et vous inscrire à ses événements. Les événements GDG sont un excellent moyen de rencontrer d'autres développeurs Android et d'apprendre les bonnes pratiques du secteur qui n'ont pas été abordées dans ce cours.

Les captures d'écran ci-dessous montrent comment votre application évoluera du début à la fin de cet atelier de programmation.

La principale différence entre les langues de gauche à droite (LTR) et de droite à gauche (RTL) est le sens du contenu affiché. Lorsque le sens de l'interface utilisateur passe de LTR à RTL (ou inversement), on parle souvent de mise en miroir. La mise en miroir affecte la majeure partie de l'écran, y compris le texte, les icônes des champs de texte, les mises en page et les icônes avec des directions (comme les flèches). D'autres éléments ne sont pas mis en miroir, comme les chiffres (horloge, numéros de téléphone), les icônes sans direction (mode Avion, Wi-Fi), les commandes de lecture, ainsi que la plupart des graphiques.

Les langues qui utilisent le sens de lecture de droite à gauche sont parlées par plus d'un milliard de personnes dans le monde. Les développeurs Android sont répartis dans le monde entier. L'application GDG Finder doit donc être compatible avec les langues qui se lisent de droite à gauche.

Étape 1 : Ajoutez la prise en charge des langues qui se lisent de droite à gauche

Dans cette étape, vous allez rendre l'application GDG Finder compatible avec les langues RTL.

Téléchargez et exécutez l'application GDGFinderMaterial, qui est l'application de départ pour cet atelier de programmation, ou continuez à partir du code final de l'atelier de programmation précédent.
Ouvrez le fichier manifeste Android.
Dans la section <application>, ajoutez le code suivant pour spécifier que l'application est compatible avec le mode d'affichage de droite à gauche.

<application
        ...
        android:supportsRtl="true">

Ouvrez activity_main.xml dans l'onglet Design.
Dans le menu déroulant Paramètres régionaux pour l'aperçu, sélectionnez Aperçu de droite à gauche. (Si vous ne trouvez pas ce menu, élargissez le volet ou fermez le volet Attributs pour le faire apparaître.)

Dans Preview (Prévisualisation), notez que l'en-tête "GDG Finder" a été déplacé vers la droite, et que le reste de l'écran est resté à peu près le même. Globalement, cet écran est acceptable. Cependant, l'alignement dans la vue de texte est désormais incorrect, car il est aligné à gauche au lieu d'être aligné à droite.

Pour que cela fonctionne sur votre appareil, dans les Paramètres de votre appareil ou de votre émulateur, dans Options pour les développeurs, sélectionnez Forcer écriture droite à gauche. (Si vous devez activer les options pour les développeurs, recherchez le numéro de version et cliquez dessus jusqu'à ce qu'un message s'affiche pour vous indiquer que vous êtes un développeur. Cela varie selon l'appareil et la version du système Android.)

Exécutez l'application et vérifiez sur l'appareil que l'écran principal s'affiche de la même manière que dans l'aperçu. Vous remarquerez que le bouton d'action flottant est désormais à gauche et le menu hamburger à droite.
Dans l'application, ouvrez le panneau de navigation et accédez à l'écran Rechercher. Comme indiqué ci-dessous, les icônes se trouvent toujours à gauche et aucun texte n'est visible. Il s'avère que le texte se trouve hors écran, à gauche de l'icône. En effet, le code utilise des références d'écran gauche/droite dans les propriétés de la vue et les contraintes de mise en page.

Étape 2 : Utilisez "start" (début) et "end" (fin) au lieu de "left" (à gauche) et "right" (à droite)

Les termes "gauche" et "droite" sur l'écran (lorsque vous êtes face à l'écran) ne changent pas, même si le sens du texte change. Par exemple, layout_constraintLeft_toLeftOf contraint toujours le côté gauche de l'élément au côté gauche de l'écran. Dans votre application, le texte est hors écran dans les langues RTL, comme le montre la capture d'écran ci-dessus.

Pour résoudre ce problème, utilisez les termes Start et End au lieu de "gauche" et "droite". Cette terminologie définit le début et la fin du texte de manière appropriée pour le sens de lecture de la langue actuelle, de sorte que les marges et les mises en page se trouvent dans les zones appropriées des écrans.

Open list_item.xml.
Remplacez toutes les références à Left et Right par des références à Start et End.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

Remplacez le layout_marginLeft de ImageView par layout_marginStart. La marge est ainsi déplacée au bon endroit pour éloigner l'icône du bord de l'écran.

<ImageView
android:layout_marginStart="
?

Ouvrez fragment_gdg_list.xml. Consultez la liste des GDG dans le volet Aperçu. Notez que l'icône pointe toujours dans la mauvaise direction, car elle est inversée (si l'icône n'est pas inversée, assurez-vous de toujours afficher l'aperçu de droite à gauche). Conformément aux consignes de Material Design, les icônes ne doivent pas être mises en miroir.
Ouvrez res/drawable/ic_gdg.xml.
Dans la première ligne du code XML, recherchez et supprimez android:autoMirrored="true" pour désactiver la mise en miroir.
Consultez l'aperçu ou exécutez de nouveau l'application et ouvrez l'écran "Search GDG" (Rechercher GDG). La mise en page devrait maintenant être corrigée.

Étape 3 : Laissez Android Studio faire le travail pour vous

Dans l'exercice précédent, vous avez fait vos premiers pas pour prendre en charge les langues qui se lisent de droite à gauche. Heureusement, Android Studio peut analyser votre application et configurer de nombreux éléments de base pour vous.

Dans list_item.xml, dans TextView, remplacez layout_marginStart par layout_marginLeft pour que le scanner puisse trouver quelque chose.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

Dans Android Studio, sélectionnez Refactor > Add RTL support where possible (Refactoriser > Prendre en charge les langues se lisant de droite à gauche, si possible), puis cochez les cases permettant de mettre à jour le fichier manifeste et les fichiers de mise en page pour utiliser les propriétés de début et de fin.

Dans le volet Aperçu de la refactorisation, recherchez le dossier app et développez-le jusqu'à ce que tous les détails soient visibles.
Sous le dossier de l'application, notez que le layout_marginLeft que vous venez de modifier est listé comme code à refactoriser.

Notez que l'aperçu liste également les fichiers système et de bibliothèque. Effectuez un clic droit sur layout, layout-watch-v20 et tous les autres dossiers qui ne font pas partie de app, puis sélectionnez Exclude (Exclure) dans le menu contextuel.

Effectuez la refactorisation maintenant. (Si un pop-up s'affiche concernant les fichiers système, assurez-vous d'avoir exclu tous les dossiers qui ne font pas partie du code de votre application.)

Notez que layout_marginLeft est redevenu layout_marginStart.

Étape 3 : Explorez les dossiers pour les paramètres régionaux

Jusqu'à présent, vous n'avez fait que modifier le sens de lecture de la langue par défaut utilisée pour l'application. Pour une application de production, vous enverriez le fichier strings.xml à un traducteur pour qu'il le traduise dans une nouvelle langue. Pour cet atelier de programmation, l'application fournit un fichier strings.xml en espagnol (nous avons utilisé Google Traduction pour générer les traductions, elles ne sont donc pas parfaites).

Dans Android Studio, passez à la vue Fichiers du projet.
Développez le dossier res et notez les dossiers res/values et res/values-es. Le code de langue es dans le nom du dossier correspond à l'espagnol. Les dossiers values-"code de langue" contiennent des valeurs pour chaque langue disponible. Le dossier values sans extension contient les ressources par défaut qui s'appliquent dans les autres cas.

Dans values-es, ouvrez strings.xml et notez que toutes les chaînes sont en espagnol.
Dans Android Studio, ouvrez activity_main.xml dans l'onglet Conception.
Dans le menu déroulant Paramètres régionaux pour l'aperçu, sélectionnez Espagnol. Votre texte devrait maintenant être en espagnol.

[Facultatif] Si vous maîtrisez une langue RTL, créez un dossier values et un fichier strings.xml dans cette langue, puis testez son affichage sur votre appareil.
[Facultatif] Modifiez les paramètres linguistiques de votre appareil et exécutez l'application. Veillez à ne pas définir une langue que vous ne comprenez pas, car il sera difficile de revenir en arrière.

Dans la tâche précédente, vous avez modifié manuellement votre application, puis utilisé Android Studio pour rechercher d'autres améliorations à apporter pour la prise en charge du RTL.

L'application Accessibility Scanner est votre meilleur allié pour rendre votre application accessible. Il analyse votre application sur l'appareil cible et suggère des améliorations, comme agrandir les cibles tactiles, augmenter le contraste et fournir des descriptions pour les images afin de rendre votre application plus accessible. Accessibility Scanner est une application Google que vous pouvez installer depuis le Play Store.

Étape 1 : Installez et exécutez Accessibility Scanner

Ouvrez le Play Store et connectez-vous si nécessaire. Vous pouvez le faire sur votre appareil physique ou sur l'émulateur. Cet atelier de programmation utilise l'émulateur.

Sur le Play Store, recherchez Accessibility Scanner de Google LLC. Assurez-vous d'obtenir la bonne application, émise par Google, car l'analyse nécessite de nombreuses autorisations.

Installez le scanner sur l'émulateur.
Une fois l'application installée, cliquez sur Ouvrir.
Cliquez sur Commencer.
Cliquez sur OK pour lancer la configuration d'Accessibility Scanner dans les paramètres.

Cliquez sur Accessibility Scanner pour accéder aux paramètres d'accessibilité de l'appareil.

Cliquez sur Utiliser le service pour l'activer.

Suivez les instructions à l'écran et accordez toutes les autorisations.
Cliquez ensuite sur OK, j'ai compris, puis revenez à l'écran d'accueil. Un bouton bleu avec une coche peut s'afficher à l'écran. Cliquer sur ce bouton déclenche le test de l'application au premier plan. Vous pouvez repositionner le bouton en le faisant glisser. Ce bouton reste au-dessus de toutes les applications, ce qui vous permet de déclencher des tests à tout moment.

Ouvrez ou exécutez votre application.
Cliquez sur le bouton bleu et acceptez les avertissements de sécurité et les autorisations supplémentaires.

La première fois que vous cliquez sur l'icône Accessibility Scanner, l'application vous demande l'autorisation d'accéder à tout ce qui s'affiche sur votre écran. Cette autorisation semble très effrayante, et elle l'est.

Vous ne devriez presque jamais accorder une autorisation de ce type, car elle permet aux applications de lire vos e-mails ou même de récupérer les informations de votre compte bancaire. Toutefois, pour qu'Accessibility Scanner puisse fonctionner, il doit examiner votre application comme le ferait un utilisateur. C'est pourquoi il a besoin de cette autorisation.

Cliquez sur le bouton bleu et attendez la fin de l'analyse. Vous devriez voir une image semblable à la capture d'écran ci-dessous, avec le titre et le bouton d'action flottant encadrés en rouge. Cela indique deux suggestions pour améliorer l'accessibilité sur cet écran.

Cliquez sur la zone entourant GDG Finder. Un volet s'ouvre avec des informations supplémentaires, comme indiqué ci-dessous, indiquant des problèmes de contraste de l'image.
Développez les informations sur le contraste de l'image. L'outil vous suggère des solutions.
Cliquez sur les flèches vers la droite pour obtenir des informations sur l'élément suivant.

Dans votre application, accédez à l'écran Apply for GDG (Postuler à GDG) et analysez-le avec l'application Accessibility Scanner. Vous obtiendrez ainsi plusieurs suggestions, comme indiqué ci-dessous à gauche. 12, pour être exact. Pour être juste, certains d'entre eux sont des doublons d'articles similaires.
Cliquez sur l'icône "pile" dans la barre d'outils inférieure pour obtenir la liste de toutes les suggestions, comme illustré ci-dessous dans la capture d'écran de droite. Vous allez résoudre tous ces problèmes dans cet atelier de programmation.

La Suite d'accessibilité Android, une collection d'applications Google, inclut des outils qui permettent de rendre les applications plus accessibles. Il inclut des outils tels que TalkBack. TalkBack est un lecteur d'écran qui fournit des commentaires audio, haptiques et vocaux. Il permet aux utilisateurs de naviguer et de consommer du contenu sur leurs appareils sans utiliser leurs yeux.

Il s'avère que TalkBack n'est pas seulement utilisé par les personnes aveugles, mais aussi par de nombreuses personnes souffrant d'une déficience visuelle. ou même les personnes qui veulent simplement se reposer les yeux !

L'accessibilité est donc pour tous ! Dans cette tâche, vous allez essayer TalkBack et mettre à jour votre application pour qu'elle fonctionne correctement avec cet outil.

Étape 1 : Installez et exécutez Accessibility Suite

TalkBack est préinstallé sur de nombreux appareils physiques, mais vous devez l'installer sur un émulateur.

Ouvrez le Play Store.
Recherchez Outils d'accessibilité. Assurez-vous qu'il s'agit bien de l'application Google appropriée.
Si ce n'est pas le cas, installez la suite d'accessibilité.
Pour activer TalkBack sur l'appareil, accédez à Paramètres > Accessibilité, puis sélectionnez Utiliser le service pour activer TalkBack. Tout comme l'outil d'analyse de l'accessibilité, TalkBack nécessite des autorisations pour lire le contenu de l'écran. Une fois que vous avez accepté les demandes d'autorisation, TalkBack vous accueille avec une liste de tutoriels pour vous apprendre à l'utiliser efficacement.
Faites une pause ici et suivez les tutoriels, ne serait-ce que pour apprendre à désactiver TalkBack une fois que vous aurez terminé.
Pour quitter le tutoriel, cliquez sur le bouton Retour pour le sélectionner, puis appuyez deux fois n'importe où sur l'écran.

Explorez l'application GDG Finder avec TalkBack. Repérez les endroits où TalkBack ne vous fournit aucune information utile sur l'écran ou un élément de commande. Vous allez résoudre ce problème dans le prochain exercice.

Étape 2 : Ajoutez une description du contenu

Les descripteurs de contenu sont des libellés descriptifs qui expliquent la signification des vues. La plupart de vos vues doivent comporter des descriptions de contenu.

Avec l'application GDG Finder en cours d'exécution et TalkBack activé, accédez à l'écran Apply to run GDG (Demander à organiser un GDG).
Appuyez sur l'image principale… et rien ne se passe.
Ouvrez add_gdg_fragment.xml.
Dans ImageView, ajoutez un attribut de description du contenu, comme indiqué ci-dessous. La chaîne stage_image_description vous est fournie dans strings.xml.

android:contentDescription="@string/stage_image_description"

Exécutez votre application.
Accédez à Apply to run GDG (Demander à organiser un GDG), puis cliquez sur l'image. Vous devriez maintenant entendre une brève description de l'image.
[Facultatif] Ajoutez des descriptions de contenu pour les autres images de cette application. Dans une application de production, toutes les images doivent avoir des descriptions de contenu.

Étape 3 : Ajouter des suggestions aux champs de texte modifiables

Pour les éléments modifiables, tels qu'un EditText, vous pouvez utiliser android:hint dans le fichier XML pour aider les utilisateurs à savoir quoi saisir. Un indice s'affiche toujours dans l'UI, car il s'agit du texte par défaut dans un champ de saisie.

Toujours dans add_gdg_fragment.xml.
Ajoutez des descriptions de contenu et des indices en vous inspirant du code ci-dessous.

Ajoutez le code suivant à textViewIntro :

android:contentDescription="@string/add_gdg"

Ajoutez les textes suivants aux modifications respectives :

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

Ajoutez une description du contenu à labelTextWhy.

android:contentDescription="@string/motivation"

Ajoutez un indice à EditTextWhy. Une fois les zones de modification libellées, ajoutez une description du contenu au libellé, ainsi qu'un indice à la zone.

android:hint="@string/enter_motivation"

Ajoutez une description du contenu pour le bouton "Envoyer". Tous les boutons doivent être accompagnés d'une description de ce qui se passe lorsqu'ils sont appuyés.

android:contentDescription="@string/submit_button_description"

Exécutez votre application avec TalkBack activé, puis remplissez le formulaire pour demander à exécuter un GDG.

Étape 4 : Créez un groupe de contenu

Pour les commandes d'interface utilisateur que TalkBack doit traiter comme un groupe, vous pouvez utiliser le regroupement de contenu. Les contenus associés regroupés sont annoncés ensemble. Les utilisateurs de technologies d'assistance n'auront alors pas besoin de balayer, d'analyser ni d'attendre aussi souvent pour découvrir toutes les informations affichées à l'écran. Cela n'a aucune incidence sur l'affichage des commandes à l'écran.

Pour regrouper des composants d'UI, enveloppez-les dans un ViewGroup, tel qu'un LinearLayout. Dans l'application GDG Finder, les éléments labelTextWhy et editTextWhy sont d'excellents candidats pour le regroupement, car ils appartiennent sémantiquement ensemble.

Ouvrez add_gdg_fragment.xml.
Entourez LabelTextWhy et EditTextWhy d'un LinearLayout pour créer un groupe de contenu. Copiez et collez le code ci-dessous. Ce LinearLayout contient déjà une partie du style dont vous avez besoin. (Assurez-vous que button se trouve EN DEHORS de LinearLayout.)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

Sélectionnez Code > Reformater le code pour indenter correctement tout le code.
Supprimez toutes les marges de mise en page de labelTextWhy et editTextWhy.
Dans labelTextWhy, remplacez la contrainte layout_constraintTop_toTopOf par contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

Dans editTextWhy, remplacez la contrainte layout_constraintBottom_toBottomOf par contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

Appliquez des contraintes à EditTextRegion et à Button pour qu'ils soient alignés sur contentGroup afin de supprimer les erreurs.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

Ajoutez des marges à LinearLayout. Vous pouvez également extraire cette marge en tant que dimension.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Si vous avez besoin d'aide, comparez votre code à add_gdg_fragment.xml dans le code de solution.

Exécutez votre application et explorez l'écran Apply to run GDG (Demander à exécuter GDG) avec TalkBack.

Étape 5 : Ajouter une région dynamique

Actuellement, le libellé du bouton "Envoyer" est OK. Il serait préférable que le bouton comporte un libellé et une description avant l'envoi du formulaire, puis qu'il soit remplacé par un autre libellé et une autre description de contenu après que l'utilisateur a cliqué dessus et que le formulaire a été envoyé. Pour ce faire, vous pouvez utiliser une région dynamique.

Une région active indique aux services d'accessibilité si l'utilisateur doit être averti lorsqu'une vue change. Par exemple, informer l'utilisateur d'un mot de passe incorrect ou d'une erreur réseau est un excellent moyen de rendre votre application plus accessible. Dans cet exemple, pour faire simple, vous informez l'utilisateur lorsque l'état du bouton d'envoi change.

Ouvrez add_gdg_fragment.xml.
Modifiez l'attribution de texte du bouton sur Envoyer à l'aide de la ressource de chaîne submit fournie.

android:text="@string/submit"

Ajoutez une région dynamique au bouton en définissant l'attribut android:accessibilityLiveRegion. Lorsque vous saisissez une valeur, plusieurs options s'offrent à vous. En fonction de l'importance de la modification, vous pouvez choisir d'interrompre ou non l'utilisateur. Avec la valeur "assertive", les services d'accessibilité interrompent la parole en cours pour annoncer immédiatement les modifications apportées à cette vue. Si vous définissez la valeur sur "none" (aucune), aucun changement n'est annoncé. S'ils sont définis sur "poli", les services d'accessibilité annoncent les changements, mais attendent leur tour. Définissez la valeur sur "polite".

android:accessibilityLiveRegion="polite"

Dans le package add, ouvrez AddGdgFragment.kt.
Dans le Observer showSnackBarEvent, une fois que vous avez affiché le SnackBar, définissez une nouvelle description de contenu et un nouveau texte pour le bouton.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

Exécutez votre application et cliquez sur le bouton. Malheureusement, le bouton et la police sont trop petits.

Étape 6 : Corriger le style du bouton

Dans add_gdg_fragment.xml, remplacez les valeurs width et height du bouton par wrap_content. Ainsi, le libellé complet est visible et le bouton est de la bonne taille.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Supprimez les attributs backgroundTint, textColor et textSize du bouton afin que l'application utilise le meilleur style de thème.
Supprimez l'attribut textColor de textViewIntro. Les couleurs du thème doivent offrir un bon contraste.
Exécutez l'application. Vous remarquerez que le bouton Submit (Envoyer) est beaucoup plus utilisable. Cliquez sur Envoyer et remarquez que le bouton devient OK.

Les chips sont des éléments compacts qui représentent un attribut, un texte, une entité ou une action. Ils permettent aux utilisateurs de saisir des informations, de faire un choix, de filtrer du contenu ou de déclencher une action.

Le widget Chip est un wrapper de vue fin autour de ChipDrawable, qui contient toute la logique de mise en page et de dessin. Cette logique supplémentaire permet de prendre en charge la navigation tactile, à la souris, au clavier et pour l'accessibilité. Le chip principal et l'icône de fermeture sont considérés comme des sous-vues logiques distinctes, avec leur propre comportement et état de navigation.

Les chips utilisent des drawables. Les drawables Android vous permettent de dessiner des images, des formes et des animations à l'écran. Ils peuvent avoir une taille fixe ou dynamique. Vous pouvez utiliser des images comme drawables, comme celles de l'application GDG. Vous pouvez également utiliser des dessins vectoriels pour dessiner tout ce que vous pouvez imaginer. Il existe également un élément graphique redimensionnable appelé élément graphique 9-patch, qui n'est pas abordé dans cet atelier de programmation. Le logo GDG, dans drawable/ic_gdg.xml, est un autre drawable.

Les drawables ne sont pas des vues. Vous ne pouvez donc pas placer un drawable directement dans un ConstraintLayout. Vous devez le placer dans un ImageView. Vous pouvez également utiliser des drawables pour fournir un arrière-plan à une vue de texte ou à un bouton. L'arrière-plan est dessiné derrière le texte.

Étape 1 : Ajoutez des chips à la liste des GDG

Le chip coché ci-dessous utilise trois drawables. L'arrière-plan et la coche sont chacun un élément graphique. Lorsque l'utilisateur appuie sur le chip, un effet d'onde se produit. Pour cela, un RippleDrawable spécial affiche un effet d'onde en réponse aux changements d'état.

Dans cette tâche, vous allez ajouter des chips à la liste des GDG et faire en sorte qu'ils changent d'état lorsqu'ils sont sélectionnés. Dans cet exercice, vous allez ajouter une rangée de boutons appelée chips en haut de l'écran Recherche. Chaque bouton filtre la liste des GDG afin que l'utilisateur ne reçoive que les résultats de la région sélectionnée. Lorsqu'un bouton est sélectionné, son arrière-plan change et une coche s'affiche.

Ouvrez fragment_gdg_list.xml.
Créez un com.google.android.material.chip.ChipGroup à l'intérieur de HorizontalScrollView.. Définissez sa propriété singleLine sur true afin que tous les chips soient alignés sur une seule ligne à faire défiler horizontalement. Définissez la propriété singleSelection sur true afin qu'un seul chip du groupe puisse être sélectionné à la fois. Voici le code.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

Dans le dossier layout, créez un fichier de ressources de mise en page nommé region.xml pour définir la mise en page d'un Chip.
Dans egion.xml, remplacez tout le code par la mise en page d'un Chip, comme indiqué ci-dessous. Notez que ce Chip est un composant Material. Notez également que vous obtenez la coche en définissant la propriété app:checkedIconVisible. Une erreur s'affiche pour la couleur selected_highlight manquante.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

Pour créer la couleur selected_highlight manquante, placez le curseur sur selected_highlight, affichez le menu d'intention et sélectionnez create color resource for selected highlight (créer une ressource de couleur pour la mise en surbrillance sélectionnée). Les options par défaut conviennent, il vous suffit donc de cliquer sur OK. Le fichier est créé dans le dossier res/color.
Ouvrez res/color/selected_highlight.xml. Dans cette liste de couleurs suivant l'état, encodée en tant que <selector>, vous pouvez fournir différentes couleurs pour différents états. Chaque état et la couleur associée sont encodés sous la forme d'un <item>. Pour en savoir plus sur ces couleurs, consultez Thèmes de couleur.

Dans <selector>, ajoutez un élément avec une couleur par défaut colorOnSurface à la liste d'états. Dans les listes d'états, il est important de toujours couvrir tous les états. Pour ce faire, vous pouvez définir une couleur par défaut.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

Au-dessus de la couleur par défaut, ajoutez un item avec une couleur colorPrimaryVariant et limitez son utilisation à l'état sélectionné true. Les listes d'états sont traitées de haut en bas, comme une instruction case. Si aucun état ne correspond, l'état par défaut s'applique.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

Étape 2 : Afficher la ligne de chips

L'application GDG crée une liste de chips affichant les régions qui disposent de GDG. Lorsqu'un chip est sélectionné, l'application filtre les résultats pour n'afficher que ceux des GDG de cette région.

Dans le package search, ouvrez GdgListFragment.kt.
Dans onCreateView(), juste au-dessus de l'instruction return, ajoutez un observateur sur viewModel.regionList et remplacez onChanged(). Lorsque la liste des régions fournie par le modèle de vue change, les chips doivent être recréés. Ajoutez une instruction pour renvoyer immédiatement si l'objet data fourni est null.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

Dans onChanged(), sous le test null, attribuez binding.regionList à une nouvelle variable appelée chipGroup pour mettre en cache regionList.

val chipGroup = binding.regionList

Créez un layoutInflator pour gonfler les chips à partir de chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

Nettoyez et recompilez votre projet pour vous débarrasser de l'erreur de liaison de données.

Sous l'inflateur, vous pouvez maintenant créer les chips proprement dites, une pour chaque région dans regionList.

Créez une variable, children, pour contenir tous les chips. Attribuez-lui une fonction de mappage sur le data transmis pour créer et renvoyer chaque chip.

val children = data.map {}

Dans le lambda de la carte, pour chaque regionName, créez et gonflez un chip. Le code final est donné ci-dessous.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

Dans le lambda, juste avant de renvoyer le chip, ajoutez un écouteur de clics. Lorsque l'utilisateur clique sur chip, définissez son état sur checked. Appelez onFilterChanged() dans viewModel, ce qui déclenche une séquence d'événements qui récupère le résultat de ce filtre.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

À la fin de la lambda, supprimez toutes les vues actuelles de chipGroup, puis ajoutez tous les chips de children à chipGroup. (Vous ne pouvez pas mettre à jour les chips. Vous devez donc supprimer et recréer le contenu de chipGroup.)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Votre observateur terminé devrait se présenter comme suit :

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

Exécutez votre application et recherchez GDGS pour ouvrir l'écran Search (Rechercher) et utiliser vos nouveaux chips. Lorsque vous cliquez sur chaque chip, l'application affiche les groupes de filtres en dessous.

Le mode Nuit permet à votre application de modifier ses couleurs pour passer à un thème sombre, par exemple lorsque les paramètres de l'appareil ont été définis pour activer le mode Nuit. En mode Nuit, les applications remplacent leur arrière-plan clair par défaut par un arrière-plan sombre et modifient tous les autres éléments de l'écran en conséquence.

Étape 1 : Activez le mode Nuit

Pour fournir le thème sombre à votre application, vous devez remplacer son thème Light par un thème appelé DayNight. Le thème DayNight apparaît clair ou sombre, selon le mode.

Dans styles.xml,, remplacez le thème parent AppTheme par DayNight au lieu de Light.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

Dans la méthode onCreate() de MainActivity, appelez AppCompatDelegate.setDefaultNightMode() pour activer le thème sombre de manière programmatique.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Exécutez l'application et vérifiez qu'elle est passée au thème sombre.

Étape 2 : Générez votre propre palette de couleurs pour le thème sombre

Pour personnaliser le thème sombre, créez des dossiers avec le qualificatif -night pour le thème sombre à utiliser. Par exemple, vous pouvez définir des couleurs spécifiques en mode Nuit en créant un dossier appelé values-night.

Accédez à l'outil de sélection de couleur material.io et créez une palette de couleurs pour le thème de nuit. Par exemple, vous pouvez le baser sur une couleur bleu foncé.
Générez et téléchargez le fichier colors.xml.
Passez à la vue Fichiers du projet pour lister tous les dossiers de votre projet.
Recherchez le dossier res et développez-le.
Créez un dossier de ressources res/values-night.
Ajoutez le nouveau fichier colors.xml au dossier de ressources res/values-night.
Exécutez votre application, toujours avec le mode Nuit activé. L'application devrait utiliser les nouvelles couleurs que vous avez définies pour res/values-night. Notez que les chips utilisent la nouvelle couleur secondaire.

Projet Android Studio : GDGFinderFinal.

Prise en charge des langues se lisant de droite à gauche

Dans le fichier manifeste Android, définissez android:supportsRtl="true".
Vous pouvez prévisualiser le RTL dans l'émulateur et utiliser votre propre langue pour vérifier les mises en page. Sur un appareil ou un émulateur, ouvrez Paramètres, puis dans Options pour les développeurs, sélectionnez Forcer écriture droite à gauche.
Remplacez les références à Left et Right par des références à Start et End.
Désactivez la mise en miroir pour les drawables en supprimant android:autoMirrored="true".
Choisissez Refactor > Add RTL support where possible (Refactoriser > Prendre en charge les langues qui se lisent de droite à gauche si possible) pour laisser Android Studio faire le travail à votre place.
Utilisez les dossiers values-"code de langue" pour stocker les ressources spécifiques à une langue.

Analyser l'accessibilité

Dans le Play Store, téléchargez Accessibility Scanner de Google LLC et exécutez-le pour rechercher les éléments d'écran à améliorer.

Concevoir des applications pour TalkBack avec des descriptions de contenu

Installez les Outils d'accessibilité Android de Google, qui incluent TalkBack.
Ajoutez des descriptions de contenu à tous les éléments de l'UI. Exemples :
android:contentDescription="@string/stage_image_description"
Pour un élément modifiable tel qu'un EditText, utilisez un attribut android:hint dans le fichier XML pour fournir à l'utilisateur une indication sur ce qu'il doit saisir.
Créez des groupes de contenu en encapsulant les éléments associés dans un groupe de vues.
Créez une région dynamique pour fournir aux utilisateurs des informations supplémentaires avec android:accessibilityLiveRegion.

Utiliser des chips pour implémenter un filtre

Les chips sont des éléments compacts qui représentent un attribut, du texte, une entité ou une action.
Pour créer un groupe de chips, utilisez un com.google.android.material.chip.ChipGroup.
Définissez la mise en page pour un com.google.android.material.chip.Chip.
Si vous souhaitez que vos chips changent de couleur, fournissez une liste de couleurs suivant l'état en tant que <selector> avec des couleurs avec état :
<item android:color="?attr/colorPrimaryVariant" android:state_selected="true" />
Liez les chips aux données en direct en ajoutant un observateur aux données du ViewModel.
Pour afficher les chips, créez un inflateur pour le groupe de chips :
LayoutInflater.from(chipGroup.context)
Créez les chips, ajoutez un écouteur de clics qui déclenche l'action souhaitée, puis ajoutez les chips au groupe de chips.

Prendre en charge le mode sombre

Utilisez DayNight AppTheme pour prendre en charge le mode sombre.
Vous pouvez définir le mode sombre de manière programmatique :
AppCompatDelegate.setDefaultNightMode()
Créez un dossier de ressources res/values-night pour fournir des couleurs et des valeurs personnalisées pour le mode sombre.

Documentation pour les développeurs Android :

Autres ressources :

Cours Udacity Developing Android Apps with Kotlin (Développement d'applications Android avec Kotlin)
Kotlin Bootcamp for Programmers (Formation Kotlin pour les programmeurs) (cours Udacity)
Ateliers de programmation Kotlin Bootcamp for Programmers

Cette section répertorie les devoirs possibles pour les élèves qui suivent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. Il revient à l'enseignant d'effectuer les opérations suivantes :

Attribuer des devoirs si nécessaire
Indiquer aux élèves comment rendre leurs devoirs
Noter les devoirs

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ne doivent pas hésiter à attribuer d'autres devoirs aux élèves s'ils le jugent nécessaire.

Si vous suivez cet atelier de programmation par vous-même, n'hésitez pas à utiliser ces devoirs pour tester vos connaissances.

Question 1

Que devez-vous faire pour prendre en charge les langues qui se lisent de droite à gauche ?

▢ Remplacez Left et Right dans les propriétés par Start et End.

▢ Passer à une langue se lisant de droite à gauche

▢ S'assurer que toutes les icônes utilisent android:autoMirrored="true"

▢ Fournir des descriptions de contenu

Question 2

Quels outils d'accessibilité sont disponibles sur la plupart des appareils Android ?

▢ TalkBack

▢ Accessibility Scanner

▢ Dans Android Studio, Refactor > Add RTL support where possible (Refactoriser > Prendre en charge les langues qui se lisent de droite à gauche si possible)

▢ Lint

Question 3

Quelle affirmation concernant les chips est fausse ?

▢ Vous affichez des chips dans un ChipGroup.

▢ Vous pouvez fournir une liste de couleurs suivant l'état pour un ChipGroup.

▢ Les chips sont des éléments compacts qui représentent une entrée, un attribut ou une action.

▢ Vous devez toujours activer DarkTheme si votre application utilise des chips.

Question 4

Quel thème définit le style des modes sombre et clair ?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Question 5

Qu'est-ce qu'une zone live ?

▢ Un nœud contenant des informations importantes pour l'utilisateur

▢ Une région de l'écran dont la forme change conformément aux consignes Material

▢ Une vue permettant de lire des vidéos en streaming

▢ Un drawable animé