Kotlin Android Fundamentals 10.3: Design for universel

Cet atelier de programmation fait partie du cours Android Kotlin Fundamentals. Vous tirerez le meilleur parti de ce cours si vous suivez les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont répertoriés sur la page de destination des ateliers de programmation Android Kotlin Fundamentals.

Cet atelier de programmation fait partie d'une série qui vous fera découvrir les principes de base de la conception d'applications Android et vous aidera à créer une application qui met en relation les développeurs Google Groupes. L'application affiche de manière magnifique et accessible des informations sur les prochains meetups.

Nous vous recommandons de suivre les trois ateliers de programmation de cette série, car ils avancent étape par étape:

• 10.1 Styles et thèmes
• 10.2 Material Design, dimensions et couleurs
• 10.3 Conception pour tous

Présentation

Il est donc judicieux de développer une application pour qu'elle soit utilisable par le plus grand nombre d'utilisateurs possible, que ce soit pour en tirer le meilleur parti ou pour développer une activité professionnelle. Pour ce faire, il existe plusieurs dimensions.

• Compatible avec les langues qui se lisent de droite à gauche. Les langues européennes et de nombreuses autres langues se lisent de gauche à droite, et les applications provenant de ces langues sont généralement conçues pour s'adapter à ces langues. De nombreuses autres langues sont lues de droite à gauche, comme l'arabe. Faites en sorte que votre application fonctionne avec des langues qui se lisent de droite à gauche afin d'élargir votre audience potentielle.
• Rechercher l'accessibilité Il peut s'agir de quelques pièges à éviter. L'application Accessibility Scanner permet de répondre directement à la demande et analyse votre application afin de déterminer où vous pourriez l'améliorer.
• Conception pour TalkBack avec des descriptions de contenu. Les déficiences visuelles sont plus courantes que ce que vous pourriez penser, et de nombreux utilisateurs, pas seulement les non-voyants, utilisent un lecteur d'écran. Les descriptions de contenu sont des expressions destinées à un lecteur d'écran lorsqu'un utilisateur interagit avec un élément de l'écran.
• Compatible avec le mode Nuit Pour de nombreux utilisateurs malvoyants, modifier les couleurs de l'écran améliore le contraste et les aide à travailler sur votre application. Android facilite l'utilisation du mode Nuit, et vous devez toujours utiliser le mode Nuit pour proposer aux utilisateurs une alternative simple aux couleurs d'écran par défaut.

Dans cet atelier de programmation, vous allez découvrir chacune de ces options et ajouter une compatibilité à l'application GDG Finder.

Vous allez également apprendre à utiliser des chips avec votre application Android. Grâce aux chips, vous pouvez rendre votre application plus intéressante tout en la rendant accessible.

Ce que vous devez déjà savoir

Vous devez être au fait:

• Créer des applications comportant des activités et des fragments, et passer d'un fragment à un autre
• Utiliser les vues et les groupes de vues pour disposer d'une interface utilisateur, en particulier de RecyclerView.
• Utiliser des composants d'architecture (y compris ViewModel) avec l'architecture recommandée pour créer une application efficace et bien structurée
• Liaison de données, coroutines et gestion des clics avec la souris
• Se connecter à Internet et mettre en cache les données localement en utilisant une base de données Room
• Définissez des propriétés de vue, et découvrez comment extraire des ressources à partir de fichiers de ressources XML et les utiliser.
• Utiliser des styles et des thèmes pour personnaliser l'apparence de votre application
• Utilisation des composants Material, des ressources de dimension et des coloris personnalisés.

Points abordés

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

Objectifs de l'atelier

• Évaluez et amplifiez une application donnée pour améliorer l'accessibilité en l'utilisant pour 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.
• Apprenez à utiliser les drawables.
• Possibilité d'utiliser le mode Nuit dans votre application

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

L'application utilise ConstraintLayout pour définir trois écrans. Deux d'entre eux sont simplement 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 recherche GDG. Les GDG, ou 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 séances d'étude et d'autres événements.

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

Si vous avez de la chance et que vous rencontrez un GDG dans votre région, vous pouvez consulter le site Web et vous inscrire à ses événements. Les événements GDG sont un excellent moyen de rencontrer d'autres développeurs Android et de découvrir les bonnes pratiques du secteur qui ne correspondent pas à 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 qui se lisent de gauche à droite et de droite à gauche est l'orientation du contenu affiché. Lorsque la direction de l'interface utilisateur passe de LTR à RTL (ou inversement), on parle souvent de mise en miroir. La duplication d'écran affecte la plupart de l'écran, y compris le texte, les icônes de champs de texte, les mises en page et les icônes avec des instructions (comme les flèches). Les autres éléments ne sont pas dupliqués, comme les chiffres (horloge, numéros de téléphone), les icônes qui n'ont pas de direction (mode Avion, Wi-Fi), les commandes de lecture et la plupart des tableaux et graphiques.

Les langues qui utilisent la direction de texte en texte à voix haute sont utilisées par plus d'un milliard de personnes dans le monde. Les développeurs Android sont partout dans le monde. Une application GDG Finder doit donc être compatible avec les langues qui se lisent de droite à gauche.

Étape 1: Activez l'affichage à droite

À cette étape, vous allez utiliser l'application GDG Finder pour les langues qui se lisent de droite à gauche.

1. Téléchargez et exécutez l'application GDGFinderMaterial, qui constitue l'application de départ de cet atelier de programmation, ou continuez à partir du code final de l'atelier de programmation précédent.
2. Ouvrez le fichier manifeste Android.
3. Dans la section <application>, ajoutez le code suivant pour indiquer que l'application est compatible avec les langues qui s'écrivent de droite à gauche.

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

4. Ouvrez le fichier activity_main.xml dans l'onglet Design.
5. Dans le menu déroulant Paramètres régionaux pour l'aperçu, sélectionnez Prévisualiser de droite à gauche. (Si vous ne voyez pas ce menu, élargissez le volet ou fermez le volet Attributs pour le voir.)

Conseil : Vous n'avez pas besoin de changer de langue sur votre appareil pour vérifier la façon dont votre application s'affiche visuellement en langues qui s'écrivent de droite à gauche.

6. Dans l'aperçu, vous remarquerez que l'en-tête "GDG Finder" a été déplacé vers la droite, et que le reste de l'écran reste à peu près le même. Dans l'ensemble, cet écran peut être transmis. Toutefois, l'alignement dans la vue Texte est désormais incorrect, car il est aligné à gauche et non à droite.

7. Pour que cela se déroule sur votre appareil, dans Paramètres de votre appareil ou de votre émulateur, accédez à Options pour les développeurs et sélectionnez Forcer la mise en page dans la version droite. Si vous devez activer les options pour les développeurs, recherchez le numéro de build, puis cliquez dessus jusqu'à ce que vous entendiez un toast indiquant que vous êtes un développeur. Cela dépend de l'appareil et de la version du système Android."

8. Exécutez l'application et vérifiez que l'écran principal s'affiche sur l'appareil comme dans Preview (Aperçu). Notez que le bouton d'action flottant se trouve maintenant à gauche, et que le menu Hamburger s'affiche à droite.
9. Dans l'application, ouvrez le panneau de navigation et accédez à l'écran Rechercher. Comme illustré ci-dessous, les icônes sont toujours à gauche et aucun texte n'est visible. Il s'avère que le texte ne s'affiche pas à gauche de l'icône. En effet, le code utilise des références d'écran de gauche/droite dans les propriétés de la vue et les contraintes de mise en page.

Étape 2: Utilisez les valeurs de début et de fin au lieu de gauche et de droite

"Gauche &;bt; droite &;;c; à l'écran (lorsque vous faites face à l'écran) ne change pas, même si la direction du texte change. Par exemple, layout_constraintLeft_toLeftOf limite toujours le côté gauche de l'élément sur le côté gauche de l'écran. Dans le cas de votre application, le texte n'est pas affiché dans les langues qui se lisent de droite à gauche, comme illustré dans la capture d'écran ci-dessus.

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

1. Open list_item.xml
2. 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"

3. Remplacez les layout_marginLeft de ImageView par layout_marginStart. Cette option permet de déplacer la marge au bon endroit pour éloigner l'icône du bord de l'écran.

<ImageView
android:layout_marginStart="
?

4. 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 en miroir. Si l'icône n'est pas en miroir, assurez-vous que vous regardez toujours l'aperçu de droite à gauche. Conformément aux consignes Material Design, les icônes ne doivent pas être mises en miroir.
5. Ouvrez res/drawable/ic_gdg.xml.
6. Dans la première ligne du code XML, recherchez et supprimez android:autoMirrored="true" pour désactiver la mise en miroir.
7. Vérifiez le bouton Prévisualiser ou exécutez à nouveau l'application et ouvrez l'écran "Rechercher dans GDG". La mise en page est en cours de correction !

Astuce : Android Studio propose des conseils surlignés en jaune pour encourager l'utilisation des attributs "start" et "end".

Utilisez la fonctionnalité de recherche et de remplacement avec correspondance de casse pour rechercher toutes les occurrences de Left et Right dans vos mises en page XML.

Étape 3: Laissez Android Studio travailler pour vous

Lors de l'exercice précédent, vous avez fait les premiers pas pour utiliser ce langage. Heureusement, Android Studio peut analyser votre application et configurer de nombreux éléments de base.

1. Dans list_item.xml, dans TextView, remplacez layout_marginStart par layout_marginLeft, afin que l'outil de recherche ait besoin de trouver un élément.

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

2. Dans Android Studio, sélectionnez Refactor > Add RTL supported (Refactoriser &gt ; ajouter la compatibilité RTL si possible), puis cochez les cases correspondant à la mise à jour du fichier manifeste et les fichiers de mise en page à utiliser pour les propriétés de début et de fin.

3. Dans le volet Refactoriser l'aperçu, recherchez le dossier app et développez-le jusqu'à ce qu'il soit ouvert à tous les détails.
4. Notez que le layout_marginLeft que vous venez de modifier est indiqué comme code pour le refactorisation sous le dossier de l'application.

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

6. Vous pouvez à présent effectuer la refactorisation. Si un pop-up s'affiche à propos des fichiers système, vérifiez que vous avez exclu tous les dossiers qui ne font pas partie du code de votre application.

7. Notez que layout_marginLeft a été rétabli à layout_marginStart.

Remarque: Certains composants View nécessitent une personnalisation plus avancée pour fonctionner correctement avec les langues qui se lisent de droite à gauche. Pour un contrôle plus précis de l'interface utilisateur, vous pouvez utiliser quatre API différentes:

• android:layoutDirection pour définir la direction de la mise en page d'un composant.
• android:textDirection pour définir la direction du texte d'un composant.
• android:textAlignment pour définir l'alignement du texte d'un composant.
• getLayoutDirectionFromLocale() est une méthode permettant d'obtenir des paramètres régionaux qui spécifient un itinéraire.

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

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

1. Dans Android Studio, passez à la vue Projets.
2. Développez le dossier res/values, et notez les dossiers res/values et res/values-es. Le nom du dossier correspond au code de langue utilisé pour l'espagnol. Les dossiers values-&code code" contiennent des valeurs pour chaque langue acceptée. Le dossier values sans extension contient les ressources par défaut qui s'appliquent.

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

6. [Facultatif] Si vous maîtrisez un langage qui se lit de droite à gauche, créez un dossier values et un fichier strings.xml dans cette langue, puis testez son affichage sur votre appareil.
7. [Facultatif] Modifiez les paramètres de langue de votre appareil et exécutez l'application. Assurez-vous de ne pas modifier la langue de votre appareil et de ne pas la lire, car il est difficile d'annuler cette opération.

À l'étape précédente, vous avez modifié votre application manuellement, puis utilisé Android Studio pour vérifier si d'autres langues étaient disponibles pour cette langue.

L'application Accessibility Scanner est la solution la plus adaptée pour rendre votre application accessible. Elle analyse votre application sur votre appareil cible et suggère des améliorations, par exemple en augmentant la taille des cibles tactiles, en augmentant le contraste et en fournissant des descriptions pour rendre l'application plus accessible. Accessibility Scanner a été fabriqué par Google et peut être installé depuis le Play Store.

Étape 1: Installez et exécutez Accessibility Scanner

1. 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.
   

Remarque : Si vous n'avez pas accès au Play Store sur l'émulateur, vous devrez peut-être en créer un autre. Assurez-vous de sélectionner une option pour laquelle l'icône Play Store est activée lors de la création de l'émulateur.

Important : Pour utiliser le Play Store depuis l'émulateur, vous devez vous connecter avec un compte. Vous pouvez utiliser votre compte standard ou créer un compte uniquement pour effectuer des tests avec l'émulateur. Tout compte que vous créez est réel, et vous vous connectez aux vrais services Play, et non à une version émulée.

Important : Vous pouvez passer à la configuration des options de facturation.

2. Sur le Play Store, recherchez Accessibility Scanner par Google LLC. Assurez-vous de disposer de l'application fournie par Google, car toute analyse nécessite de nombreuses autorisations.

3. Installez le scanner sur l'émulateur.
4. Une fois l'application installée, cliquez sur Open (Ouvrir).
5. Cliquez sur Commencer.
6. Cliquez sur OK pour commencer à configurer Accessibility Scanner dans les paramètres.

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

8. Cliquez sur Utiliser le service pour l'activer.

9. Suivez les instructions à l'écran et accordez toutes les autorisations.
10. Cliquez ensuite sur OK pour revenir à l'écran d'accueil. Il est possible qu'un bouton bleu avec une coche apparaisse à l'écran. Le fait de 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 associé à toutes les applications, ce qui vous permet de déclencher des tests à tout moment.

Pour désactiver le scanner, accédez aux Paramètres, puis désactivez Accessibility Scanner.

11. Ouvrez ou exécutez votre application.
12. Cliquez sur le bouton bleu, puis acceptez des avertissements et des autorisations de sécurité supplémentaires.

La première fois que vous cliquez sur l'icône Accessibility Scanner, l'application demande l'autorisation d'afficher tous les éléments à l'écran. Cette autorisation semble effrayante.

Vous ne devriez quasiment accorder aucune autorisation comme celle-ci, car elle permet aux applis de lire vos e-mails et même de récupérer vos informations de compte bancaire. Toutefois, pour que Accessibility Scanner fonctionne, il doit examiner votre application comme le ferait un utilisateur, c'est pourquoi il a besoin de cette autorisation.

Important : Avant d'activer cette autorisation, vérifiez que l'application que vous avez installée est bien Accessibility Scanner by Google LLC.

13. Cliquez sur le bouton bleu et attendez la fin de l'analyse. La capture d'écran ci-dessous s'affiche avec le titre et le bouton d'action flottant en rouge. Deux suggestions d'amélioration de l'accessibilité s'affichent sur cet écran.

14. Cochez la case située autour de l'outil de recherche GDG. Cela ouvre un volet avec des informations supplémentaires, comme illustré ci-dessous, indiquant les problèmes de contraste de l'image.
15. Développez les informations Contraste de l'image pour que l'outil vous suggère des remèdes.
16. Cliquez sur les flèches à droite pour obtenir des informations sur l'élément suivant.

17. Dans l'application, accédez à l'écran Apply for GDG (Envoyer une demande pour GDG), puis scannez-la avec l'application Accessibility Scanner. Vous obtiendrez quelques suggestions, comme illustré à gauche. 12, pour être exact. Notez que certains d'entre eux sont des doublons d'éléments similaires.
18. Cliquez sur l'icône "stack" dans la barre d'outils inférieure pour obtenir la liste de toutes les suggestions, comme illustré ci-dessous sur la capture d'écran de droite. Vous allez résoudre tous ces problèmes dans cet atelier de programmation.

Les Outils d'accessibilité Android, un ensemble d'applications Google, comprennent des outils pour rendre les applications plus accessibles. tels que TalkBack. Le lecteur d'écran TalkBack offre un retour audio, un retour haptique et des commentaires audio permettant aux utilisateurs de naviguer et de regarder des contenus sur leurs appareils sans avoir à les yeux.

Il s'avère que TalkBack n'est pas uniquement utilisé par les non-voyants, mais aussi par les personnes malvoyantes. y compris des personnes qui veulent simplement se reposer les yeux !

L'accessibilité est à la portée de tous ! Dans cette tâche, vous allez essayer TalkBack et mettre à jour votre application pour qu'elle fonctionne correctement.

Étape 1: Installez et exécutez la suite Accessibility

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

1. Ouvrez le Play Store.
2. Recherchez les outils Accessibility Suite. Assurez-vous qu'il s'agit de la bonne application Google.
3. Si elle n'est pas installée, installez les outils d'accessibilité.
4. Pour activer TalkBack sur l'appareil, accédez à Paramètres et accessibilité, puis activez TalkBack en sélectionnant Utiliser le service. Tout comme le scanner d'accessibilité, TalkBack requiert des autorisations pour lire le contenu à l'écran. Une fois que vous avez accepté les demandes d'autorisation, TalkBack vous présente une liste de tutoriels pour vous apprendre à utiliser efficacement TalkBack.
5. Suivez les tutoriels ci-dessous, si seulement pour découvrir comment désactiver TalkBack lorsque vous avez terminé.
6. Pour quitter le tutoriel, cliquez sur le bouton "Retour" pour le sélectionner, puis appuyez deux fois sur l'écran.

Astuce:Si vous n'entendez rien, activez le volume.

Conseil:Pour cliquer sur un élément, appuyez deux fois dessus. Pour le faire glisser ou le faire glisser, appuyez deux fois dessus.

7. Découvrez comment utiliser l'application GDG Finder avec TalkBack. Remarquez les fonctionnalités pour lesquelles TalkBack ne fournit aucune information utile sur l'écran ni une commande. Vous allez résoudre ce problème au cours de l'exercice suivant.

É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 avoir des descriptions de contenu.

1. Une fois l'application GDG Finder exécutée et l'application Talback activée, accédez à l'écran Appliquer à l'exécution du GDG.
2. Appuyez sur l'image principale, et rien ne se passe.
3. Ouvrez add_gdg_fragment.xml.
4. Dans ImageView, ajoutez un attribut descripteur de contenu comme indiqué ci-dessous. La chaîne stage_image_description vous est fournie dans le fichier strings.xml.

android:contentDescription="@string/stage_image_description"

5. Exécutez votre application.
6. Accédez à Appliquer à l'exécution du GDG, puis cliquez sur l'image. Vous devriez maintenant entendre une brève description de l'image.
7. [Facultatif] Ajoutez des descriptions de contenu pour les autres images de cette application. Dans une application en production, toutes les images doivent disposer d'une description de contenu.

Étape 3: Ajoutez des indications aux champs de texte modifiables

Pour les éléments modifiables, tels que EditText, vous pouvez utiliser android:hint dans le code XML pour aider les utilisateurs à déterminer ce qu'ils doivent saisir. Un indice s'affiche toujours dans l'interface utilisateur, car il s'agit du texte par défaut dans un champ de saisie.

1. Toujours dans add_gdg_fragment.xml.
2. Ajoutez des descriptions de contenu et des conseils à l'aide du code ci-dessous.

Ajouter à textViewIntro :

android:contentDescription="@string/add_gdg"

Ajoutez du texte de modification respectivement:

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"

3. Ajoutez une description du contenu à labelTextWhy.

android:contentDescription="@string/motivation" 

4. Ajoutez une astuce à EditTextWhy. Une fois que vous avez ajouté un libellé aux zones de modification, ajoutez une description de contenu au libellé, ainsi qu'une astuce à cet effet.

android:hint="@string/enter_motivation"

5. Ajoutez une description du contenu pour le bouton "Envoyer". Tous les boutons doivent avoir une description de ce qui se passe si l'utilisateur appuie dessus.

android:contentDescription="@string/submit_button_description"

6. Exécutez votre application avec Talback activé et remplissez le formulaire pour demander l'exécution d'un GDG.

Étape 4: Créez un groupe de contenu

Vous pouvez utiliser le regroupement de contenu pour les commandes de l'interface utilisateur que TalkBack doit traiter. Les contenus associés, qui sont regroupés, sont annoncés ensemble. Les utilisateurs de la technologie d'assistance n'ont ensuite pas besoin de balayer l'écran, d'effectuer une recherche ou d'attendre aussi souvent pour découvrir toutes les informations à l'écran. Cela n'affecte pas la façon dont les commandes s'affichent à l'écran.

Pour regrouper des composants d'interface utilisateur, encapsulez-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 sont sémantiquement liés.

1. Ouvrez add_gdg_fragment.xml.
2. Encapsulez un LinearLayout autour de LabelTextWhy et EditTextWhy pour créer un groupe de contenu. Copiez et collez le code ci-dessous. Cet élément (LinearLayout) contient déjà certains des styles dont vous avez besoin. Assurez-vous que le button se trouve en dehors de la 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/>

3. Sélectionnez Code > Reformat Code (Reformater le code) pour mettre correctement le retrait dans le code.
4. Supprimez toutes les marges de mise en page de labelTextWhy et editTextWhy.
5. Dans labelTextWhy, définissez la contrainte layout_constraintTop_toTopOf sur contentGroup.

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

6. Dans editTextWhy, définissez la contrainte layout_constraintBottom_toBottomOf sur contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. Appliquez EditTextRegion et Button à contentGroup pour éliminer les erreurs.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. Ajoutez des marges à la LinearLayout. (Facultatif) Extrayez cette marge en tant que dimension.

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

Si vous avez besoin d'aide, comparez votre code au add_gdg_fragment.xml du code de la solution.

9. Exécutez votre application et explorez l'écran Apply to run GDG (Appliquer à l'exécution du GDG) avec TalkBack.

Étape 5: Ajoutez une région en ligne

Actuellement, le libellé du bouton d'envoi est OK. Il serait préférable que le bouton comporte un libellé et une description avant l'envoi du formulaire, et qu'ils soient modifiés de façon dynamique en fonction du libellé et de la description du contenu une fois que l'utilisateur a cliqué sur le formulaire et envoyé le formulaire. Vous pouvez le faire en utilisant une région active.

Une région active indique aux services d'accessibilité si l'utilisateur doit être averti lorsqu'une vue change. Par exemple, si vous informez l'utilisateur d'un mot de passe incorrect ou d'une erreur réseau, vous pouvez améliorer l'accessibilité de votre application. Dans cet exemple, pour simplifier le processus, vous devez informer l'utilisateur lorsque le bouton d'envoi change d'état.

1. Ouvrez add_gdg_fragment.xml.
2. Remplacez l'attribution de texte du bouton par Envoyer à l'aide de la ressource de chaîne submit fournie.

android:text="@string/submit"

3. Ajoutez une région active au bouton en définissant l'attribut android:accessibilityLiveRegion. Plusieurs options s'offrent à vous au fur et à mesure de la saisie. Selon l'importance de la modification, vous pouvez choisir d'interrompre l'utilisateur. Avec la valeur "assertive", les services d'accessibilité interrompent immédiatement la parole pour annoncer immédiatement les modifications apportées à cette vue. Si vous définissez la valeur sur &nonet, aucune modification n'est annoncée. Défini sur "polite", les services d'accessibilité annoncent des changements, mais attendez leur tour. Définissez la valeur sur &polit.

android:accessibilityLiveRegion="polite"

4. Dans le package add, ouvrez AddGdgFragment.kt.
5. Dans l'interface showSnackBarEvent Observer, lorsque vous avez terminé d'afficher le SnackBar, définissez une nouvelle description et du texte pour le bouton.

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

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

Étape 6: Corrigez le style du bouton

1. Dans add_gdg_fragment.xml, remplacez width et height par le bouton wrap_content, afin que le libellé complet soit visible et que le bouton soit de bonne taille.

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

2. Supprimez les attributs backgroundTint, textColor et textSize du bouton afin que l'application utilise un meilleur style de thème.
3. Supprimez l'attribut textColor de textViewIntro. Les couleurs du thème offrent un bon contraste.
4. Exécutez l'application. Vous remarquerez que le bouton Submit (Fonctionne) est beaucoup plus facile à utiliser. Cliquez sur Submit (Envoyer) et notez l'état du libellé Done (OK).

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

Le widget Chip est un wrapper de vue fin pour le ChipDrawable, qui contient toute la logique de mise en page et de dessin. La logique supplémentaire permet d'utiliser les fonctionnalités tactiles, la souris, le clavier et la navigation dans l'accessibilité. Le chip principal et l'icône de fermeture sont considérés comme des sous-vues logiques distinctes, et contiennent leur propre état et comportement de navigation.

Les chips utilisent des drawables. Les drawables Android vous permettent de dessiner des images, des formes et des animations sur l'écran. Leur taille peut être fixe ou dynamique. Vous pouvez utiliser des images comme drawables, comme les images de l'application GDG. Vous pouvez utiliser des dessins vectoriels pour dessiner n'importe quel contenu. Il existe également un drawable redimensionnable appelé 9 patchs, qui n'est pas traité dans cet atelier de programmation. Le logo GDG, dans drawable/ic_gdg.xml, est un autre drawable.

Les dessins ne sont pas des vues. Vous ne pouvez donc pas placer un drawable directement dans un ConstraintLayout. Vous devez les placer dans un ImageView. Vous pouvez également utiliser des drawables pour fournir un arrière-plan à un affichage de texte ou un bouton, et l'arrière-plan se dessine derrière le texte.

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

Le chip sélectionné ci-dessous utilise trois drawables. L'arrière-plan et la coche représentent chacun un drawable. Lorsque vous appuyez sur la puce, vous obtenez un effet Ripple effectué avec un RippleDrawable spécial qui affiche un effet Ripple en réponse à des 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 ligne de boutons appelée chips en haut de l'écran Rechercher. Chaque bouton filtre la liste GDG de sorte que l'utilisateur ne reçoive que les résultats provenant de la région sélectionnée. Lorsqu'un bouton est sélectionné, son arrière-plan change et affiche une coche.

1. Ouvrez fragment_gdg_list.xml.
2. Créez un com.google.android.material.chip.ChipGroup dans le HorizontalScrollView.Propriété singleLine sur true, de sorte que tous les chips soient alignés sur une ligne défilante horizontalement. Définissez la propriété singleSelection sur true pour sélectionner uniquement un chip à 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"/>

3. Dans le dossier layout, créez un fichier de ressources de mise en page appelé region.xml pour définir la mise en page d'un Chip.
4. Dans region.xml, remplacez tout le code par la mise en page pour un Chip, comme indiqué ci-dessous. Notez que cet élément Chip est un composant Material. Notez également que vous obtenez la coche en définissant la propriété app:checkedIconVisible. Une erreur s'affichera 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"/>

5. Pour créer la couleur selected_highlight manquante, placez le curseur sur selected_highlight, ouvrez le menu d'intent et créez la ressource de couleur pour la mise en surbrillance sélectionnée. Les options par défaut sont acceptées. Il vous suffit donc de cliquer sur OK. Le fichier est créé dans le dossier res/color.
6. Ouvrez res/color/selected_highlight.xml. Dans cette liste d'états de couleurs, encodée en <selector>, vous pouvez fournir différentes couleurs pour les différents États. Chaque État et la couleur associée sont encodés en tant que <item>. Pour en savoir plus sur ces couleurs, consultez la page Thèmes de couleur.

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

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

8. Au-dessus de la couleur par défaut, ajoutez un item avec une couleur de colorPrimaryVariant, puis limitez son utilisation lorsque l'état sélectionné est true. Les listes d'États sont gérées de haut en bas, comme une instruction CASE. Si aucun des États ne correspond, l'état par défaut s'applique.

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

Étape 2: Affichez la ligne des chips

L'application GDG crée une liste de chips indiquant les régions qui en possèdent. Lorsqu'un chip est sélectionné, l'application filtre les résultats pour n'afficher que les résultats du GDG pour cette région.

Remarque:Cette procédure ne concerne pas la création de cette liste ni le filtrage des résultats. Pour savoir comment la liste des GDG est obtenue et comment le filtrage est implémenté, examinez les fichiers dans les packages search et network. En particulier, examinez GdgListViewModel.

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

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

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

val chipGroup = binding.regionList

4. Ci-dessous, créez un layoutInflator pour gonfler les puces de chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

5. Nettoyez et recréez votre projet pour supprimer l'erreur de liaison de données.

Sous le gonfleur, vous pouvez désormais créer les chips réels (un pour chaque région) dans le regionList.

6. 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 {} 

7. 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
   }
}

8. 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)
}

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

chipGroup.removeAllViews()

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

L'observateur terminé doit 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)
       }
   }
})

12. Exécutez votre application et recherchez GDGS pour ouvrir l'écran Search (Rechercher) afin d'utiliser vos nouvelles icônes. Lorsque vous cliquez sur chaque chip, l'application affiche les groupes de filtres en dessous.

Important : Si la création de cartes ne vous permet pas d'obtenir la liste, pour que cela fonctionne sur l'émulateur, fermez tous les émulateurs en cours d'exécution. Exécutez l'application, démarrez un nouvel émulateur, démarrez l'application Maps sur cet émulateur, puis exécutez l'application.

Le mode Nuit permet à votre application de remplacer ses couleurs par un thème sombre, par exemple lorsque les paramètres de l'appareil ont été activés pour activer le mode Nuit. En mode Nuit, les arrière-plans lumineux par défaut de l'application sont sombres et les autres éléments de l'écran le changent en conséquence.

Étape 1: Activez le mode Nuit

Pour proposer le thème sombre de votre application, vous devez remplacer le thème Light par le thème DayNight. Le thème DayNight est clair ou sombre, selon le mode.

1. Dans styles.xml,, remplacez le thème parent AppTheme par Light par DayNight.

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

2. Dans la méthode onCreate() de MainActivity, appelez AppCompatDelegate.setDefaultNightMode() pour activer le thème sombre par programmation.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. 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. Par exemple, vous pouvez avoir des couleurs spécifiques en mode Nuit en créant un dossier nommé values-night.

1. Accédez au sélecteur de couleurs Material.io et créez une palette de couleurs en thème nocturne. Par exemple, vous pouvez vous baser sur une couleur bleu foncé.
2. Générez et téléchargez le fichier colors.xml.
3. Accédez à la vue Fichiers de projet pour consulter la liste de tous les dossiers de votre projet.
4. Recherchez le dossier res et développez-le.
5. Créez un dossier de ressources res/values-night.
6. Ajoutez le nouveau fichier colors.xml au dossier de ressources res/values-night.
7. Exécutez votre application, toujours en mode Nuit et l'application devra utiliser les nouvelles couleurs que vous avez définies pour res/values-night. Notez que les puces utilisent la nouvelle couleur secondaire.

Projet Android Studio: GDGFinderFinal.

Compatibilité avec les langues qui se lisent de droite à gauche

• Dans le fichier manifeste Android, définissez android:supportsRtl="true".
• Vous pouvez prévisualiser les langues qui se lisent de droite à gauche dans l'émulateur, et vérifier votre mise en page dans votre propre langue. Sur un appareil ou un émulateur, ouvrez Paramètres, puis, dans Options pour les développeurs, sélectionnez Forcer la mise en page dans la liste droite.
• Remplacez les références à Left et Right par des références à Start et End.
• Désactiver la mise en miroir pour les drawables en supprimant android:autoMirrored="true".
• Sélectionnez Refactor > Add RTL support any possible (Refactoriser &gt ; ajouter la compatibilité RTL si possible) pour laisser Android Studio s'en charge.
• Stockez les ressources spécifiques à une langue à l'aide de dossiers de valeurs-code de langue.

Rechercher l'accessibilité

• Sur le Play Store, téléchargez Accessibility Scanner de Google LLC et exécutez-le pour rechercher des éléments à améliorer.

Conception 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'interface utilisateur. Exemples :
  android:contentDescription="@string/stage_image_description"
• Pour un élément modifiable tel qu'un EditText, utilisez un attribut android:hint dans le XML afin d'indiquer à l'utilisateur ce qu'il doit saisir.
• Créez des groupes de contenu en encapsulant les éléments associés dans un groupe d'affichage.
• Créez une région active pour envoyer d'autres commentaires d'utilisateurs avec android:accessibilityLiveRegion.

Insérer un filtre à l'aide d'icônes

• Les puces sont des éléments compacts qui représentent un attribut, un 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 puces changent de couleur, fournissez une liste d'état de couleurs sous forme de <selector> avec des couleurs avec état :
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• Associer les chips aux données en direct en ajoutant un observateur aux données du modèle de vue.
• Pour afficher les chips, créez un gonfleur 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.

Activer le mode sombre

• Utilisez le AppTheme DayNight pour activer le mode sombre.
• Vous pouvez configurer le mode sombre par programmation :
  AppCompatDelegate.setDefaultNightMode()
• Créez un dossier de ressources res/values-night pour fournir des couleurs et des valeurs personnalisées en mode sombre.

Documentation pour les développeurs Android:

• LayoutDirection (RTL)
• Bidirectionnel
• Premiers pas avec Accessibility Scanner
• TalkBack
• Gestes TalkBack
• Documentation de présentation des dessins
• Descripteurs du contenu
• Regroupement de contenu
• Régions actives
• Dessins à faire dans neuf neuf
• Dessiner un outil à 9 patchs
• Frites
• ChipGroup
• Thème sombre
• Thèmes de couleur
• Outil de couleur
• Animer des images dessinables

Autres ressources:

• Developing Android Apps with Kotlin (Développer des applications Android avec Kotlin) (cours Udacity)
• Kotlin Bootcamp for Programmers (Formation Kotlin pour les programmeurs) (cours Udacity)
• Atelier de programmation Kotlin pour les programmeurs

Cette section répertorie les devoirs possibles pour les élèves qui effectuent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. C'est à l'enseignant de procéder comme suit:

• Si nécessaire, rendez-les.
• Communiquez aux élèves comment rendre leurs devoirs.
• Notez les devoirs.

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ils n'ont pas besoin d'attribuer les devoirs de leur choix.

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

Question 1

Laquelle des propositions suivantes est obligatoire pour les langues qui se lisent de droite à gauche ?

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

▢ Passer à une langue qui se lit de droite à gauche

▢ Assurez-vous que toutes les icônes utilisent android:autoMirrored="true"

▢ Fournir des descriptions de contenu

Question 2

Parmi les outils d'accessibilité suivants, lequel est intégré à la plupart des appareils Android ?

▢ TalkBack

▢ Accessibility Scanner

▢ dans Android Studio : refactoriser &gt ; ajouter la compatibilité avec les langues qui s'écrivent de droite à gauche si possible.

▢ Lint

Question 3

Parmi les affirmations suivantes concernant les chips, laquelle est vraie ?

▢ Vous affichez des chips dans le cadre d'un ChipGroup.

▢ Vous pouvez fournir une liste d'état des couleurs pour un élément 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 appliquez-vous les styles pour les modes sombre et clair ?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Question 5

Qu'est-ce qu'une région active ?

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

▢ Une zone de l'écran qui change de forme conformément aux consignes de Material

▢ Une vue qui permet de diffuser des vidéos en streaming

▢ Un drawable animé