Ajouter des images à votre application Android

1. Introduction

Dans cet atelier de programmation, vous allez apprendre à ajouter des images à votre application avec ImageView.

Conditions préalables

• Vous savez créer et exécuter une application dans Android Studio.
• Vous savez ajouter et supprimer des attributs, et les définir sur TextViews à l'aide de l'éditeur de mise en page.

Points abordés

• Comment ajouter une image ou une photo à votre application Android.
• Comment afficher une image dans votre application avec ImageView.
• Comment extraire du texte dans une ressource de chaîne pour faciliter la traduction de votre application et la réutilisation de chaînes.
• Comment rendre votre application utilisable par le plus grand nombre.

Objectifs de l'atelier

• Compléter l'application Happy Birthday pour ajouter une image.

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio
• L'application de l'atelier de programmation "Créer une application de carte d'anniversaire"

2. Configurer votre application

1. Ouvrez votre projet du précédent atelier de programmation dans Android Studio. Vous pouvez utiliser votre propre code ou celui de la solution. Lorsque vous l'exécutez, votre application devrait se présenter comme suit :

Ajouter une image à votre projet

Dans cette tâche, vous allez télécharger une image sur Internet et l'ajouter à votre application Happy Birthday.

1. Accédez à l'image de votre carte d'anniversaire sur GitHub.
2. Cliquez sur le bouton Download (Télécharger) à droite. L'image devrait s'afficher séparément.

3. Effectuez un clic droit sur l'image et enregistrez le fichier sur votre ordinateur, sous le nom androidparty.png. Notez l'emplacement où vous l'avez enregistrée (par exemple, dans le dossier Téléchargements).
4. Dans Android Studio, cliquez sur Vue > Fenêtres d'outil > Gestionnaire de ressources dans les menus ou cliquez sur l'onglet Gestionnaire de ressources à gauche de la fenêtre Projet.
5. Sous Gestionnaire de ressources, cliquez sur le signe +, puis sélectionnez Importer des éléments Drawables. Un explorateur de fichiers s'ouvre.

6. Dans l'explorateur, recherchez le fichier image que vous avez téléchargé, puis cliquez sur Ouvrir.
7. Cliquez sur Suivant. Android Studio affiche un aperçu de l'image.
8. Cliquez sur Importer.
9. Si l'image a bien été importée, Android Studio l'ajoute à votre liste Drawable. Cette liste inclut toutes les images et icônes de l'application. Vous pouvez désormais utiliser cette image dans votre application.

10. Pour revenir à la vue de projet, cliquez sur Vue > Fenêtres d'outil > Projet dans les menus, ou sur l'onglet Projet situé tout à gauche.
11. Vérifiez que l'image apparaît dans le dossier Drawable de votre application en développant app > res > drawable.

3. Ajouter une ImageView

Pour afficher une image, votre application doit lui réserver un emplacement. Tout comme vous utilisez TextView pour afficher du texte, vous pouvez utiliser ImageView pour afficher des images.

Dans cette tâche, vous allez ajouter une ImageView à votre application et l'utiliser pour afficher l'image de cupcake que vous avez téléchargée. Ensuite, vous devrez la positionner et ajuster sa taille afin qu'elle remplisse l'écran.

Ajouter une ImageView et définir son image

1. Dans la fenêtre Projet, ouvrez le fichier activity_main.xml (app > res > layouts > activity_main.xml).

Conseil : Si vous ne voyez pas l'éditeur de mise en page, cliquez sur le bouton du mode Conception en haut à droite.

2. Dans l'éditeur de mise en page, accédez à la Palette et faites glisser une ImageView vers votre application. Déposez-la près du centre, sans toucher aux éléments de texte.

La boîte de dialogue Choose a Resource (Sélectionner une ressource) s'ouvre. Elle répertorie toutes les ressources d'image disponibles pour votre application. Notez que l'image d'anniversaire est listée sous l'onglet Drawable. Une ressource drawable est un concept général d'élément graphique pouvant être affiché à l'écran. Cela inclut les images, bitmaps et icônes, ainsi que de nombreux autres types de ressources visuelles.

3. Dans la liste Drawable de la boîte de dialogue Pick a Resource, recherchez l'image du gâteau.
4. Cliquez sur l'image, puis sur OK.

L'image est ajoutée à votre application. Cependant, elle n'apparaît probablement pas au bon endroit et ne remplit pas l'écran. Vous corrigerez ces problèmes à l'étape suivante.

Positionner et redimensionner une ImageView

1. Cliquez sur votre ImageView et faites-la glisser dans l'éditeur de mise en page. Notez que lorsque vous faites glisser la souris, un rectangle rose apparaît autour de l'écran de l'application dans la vue Design. Le rectangle rose indique les limites de l'écran pour vous aider à positionner votre ImageView.
2. Positionnez l'élément ImageView de sorte à faire correspondre les bords gauche et droit avec ceux du rectangle rose. Android Studio ancre l'image lorsque vous l'approchez des bords de l'écran. (Vous corrigerez les dimensions verticales dans quelques instants.)

Dans une ConstraintLayout, les Views doivent avoir des contraintes horizontales et verticales pour indiquer à ConstraintLayout comment les positionner. Vous ajouterez ces contraintes dans la suite.

Remarque : Dans le contexte de l'éditeur de mise en page, une contrainte représente la connexion ou l'alignement d'une vue à une autre vue, à la mise en page parente ou à une ligne directrice invisible. Par exemple, une vue peut être limitée à une certaine distance du bord de son conteneur, se trouver toujours à droite d'une autre vue ou toujours apparaître en haut dans un conteneur.

3. Maintenez le pointeur sur le cercle situé en haut du contour de votre ImageView. Cela met un autre cercle en surbrillance.
4. Faites glisser ce cercle vers le haut de l'écran de l'application. Une flèche le connecte à votre pointeur pendant que vous le faites glisser. Continuez jusqu'à ce que le cadre s'ancre en haut de l'écran. Vous avez ajouté une contrainte liant le haut de votre ImageView au haut de la ConstraintLayout.

5. Ajoutez une contrainte pour lier le bas de votre ImageView au bas de la ConstraintLayout. Le cadre est peut-être trop proche du bord pour pouvoir le faire glisser comme pour le haut. Dans ce cas, vous pouvez cliquer sur le signe + situé en bas du widget Contrainte, dans la fenêtre Attributs, pour ajouter une contrainte. Vérifiez que la marge est définie sur 0.

Conseil : Il peut s'avérer difficile d'ajouter des contraintes lorsque vous multipliez les Views à l'écran. Si vous ajoutez une contrainte à la mauvaise View, vous pouvez annuler l'opération en appuyant sur Control+Z (Command+Z sur Mac). Vous pouvez aussi effectuer un clic droit sur la View. Dans le menu qui affiche, choisissez Clear Constraints of Selection (Supprimer les contraintes de la sélection) afin de supprimer toutes les contraintes de cette View.

6. Dans le volet Attributes, utilisez le widget Constraint pour définir une marge de 0 à gauche et à droite. Cela crée automatiquement une contrainte dans la direction concernée.

L'image est maintenant centrée, mais elle n'occupe pas encore tout l'écran. Vous corrigerez ce problème lors des étapes suivantes :

7. Sous le widget Contrainte, dans la section Contraintes, définissez layout_width sur 0dp (faire correspondre à la contrainte). 0dp est un raccourci indiquant à Android Studio d'utiliser une contrainte de correspondance pour la largeur de votre ImageView. En raison des contraintes que vous venez d'ajouter, l'élément est aussi large que la ConstraintLayout, moins les éventuelles marges.

8. Définissez layout_height sur 0dp (faire correspondre à la contrainte). En raison des contraintes que vous avez ajoutées, votre ImageView est aussi haute que la ConstraintLayout, moins les éventuelles marges.

9. Votre ImageView est aussi large et haute que l'écran de l'application, mais l'image reste centrée dans votre ImageView, et il reste de l'espace blanc au-dessus et en dessous de l'image. Comme ce n'est pas très élégant, vous allez ajuster le scaleType de votre ImageView, qui indique comment dimensionner et aligner l'image. Pour en savoir plus sur ScaleType, consultez le guide de référence des développeurs. Votre application devrait maintenant se présenter comme suit.

10. Recherchez l'attribut scaleType. Vous devrez peut-être faire défiler la page ou utiliser la fonction de recherche. Définissez différentes valeurs pour scaleType afin d'observer leur effet.

Conseil : Pour trouver une propriété spécifique dans la liste générale, cliquez sur l'icône de loupe située à droite du titre "Attributes", puis saisissez le début du nom de la propriété. Android Studio n'affiche que les propriétés qui contiennent cette chaîne de caractères.

11. Lorsque vous avez terminé, définissez scaleType sur centerCrop, afin que l'image remplisse l'écran sans être déformée.

L'image du gâteau devrait maintenant occuper tout l'écran, comme illustré ci-dessous.

En revanche, vous ne voyez plus votre message d'accueil ni votre signature. Vous corrigerez ces problèmes à l'étape suivante.

Placer l'ImageView derrière le texte

Lorsque ImageView remplit l'écran, vous ne pouvez plus voir le texte, qui se trouve recouvert par l'image. L'ordre des éléments de votre UI est important. Vous avez d'abord ajouté TextViews, puis ImageView, ce qui signifie qu'il est "au-dessus". Lorsque vous ajoutez des vues à une mise en page, elles sont ajoutées en fin de liste, et sont affichées dans l'ordre de la liste. Votre ImageView a été ajoutée à la fin de la liste Views de la ConstraintLayout, ce qui signifie qu'elle est restituée en dernier et se superpose à la TextViews. Pour résoudre ce problème, vous devez modifier l'ordre des vues et placer votre ImageView en début de liste, afin qu'elle soit affichée en premier.

Dans le Arborescence des composants, cliquez sur votre ImageView, puis faites-la glisser au-dessus de TextViews, directement sous ConstraintLayout. Une ligne bleue avec un triangle indique où ira se placera votre ImageView. Positionnez ImageView juste en dessous de ConstraintLayout.

L'élément ImageView doit maintenant figurer en premier dans la liste sous ConstraintLayout, suivi de la TextViews. Les messages "Happy Birthday, Sam!" (Joyeux anniversaire, Sam !) et "From Emma" (Signé Emma) devraient désormais être visibles. (Vous pouvez ignorer l'avertissement concernant la description du contenu manquante, pour le moment.)

Félicitations ! Vous avez ajouté une image à votre application Android.

4. Adopter les bonnes pratiques de codage

Lorsque vous avez ajouté TextViews lors de l'atelier de programmation précédent, Android Studio les a signalés par des avertissements (panneaux triangulaires). Vous allez maintenant corriger ces avertissements et celui concernant ImageView.

Traduction

Lorsque vous développez des applications, gardez à l'esprit qu'elles seront peut-être traduites dans d'autres langues. Comme vous l'avez appris dans un atelier de programmation précédent, une chaîne est une séquence de caractères. "Happy Birthday, Sam!" en est un exemple.

Une chaîne codée en dur est écrite directement dans le code de votre application. Les chaînes codées en dur compliquent la traduction de votre application, ainsi que la réutilisation d'une chaîne à différents endroits de votre application. Pour résoudre ces problèmes, vous pouvez extraire ces chaînes dans un fichier de ressources. Au lieu de coder en dur la chaîne dans votre code, vous la placerez dans un fichier et lui attribuerez un nom. Ensuite, vous utiliserez ce nom à chaque fois que vous voulez utiliser la chaîne concernée. Le nom reste le même, même si la chaîne est modifiée ou traduite dans une autre langue.

1. Cliquez sur le triangle orange à côté de la première TextView contenant le texte "Happy Birthday, Sam!". Android Studio ouvre une fenêtre d'informations et suggère une solution. Vous devrez peut-être faire défiler la page vers le bas pour voir la suggestion de solution.

2. Cliquez sur le bouton Corriger. Android Studio ouvre la boîte de dialogue Extraire la ressource. Dans cette boîte de dialogue, vous pouvez personnaliser le nom de votre ressource de chaîne et préciser comment elle sera stockée. Le champ Nom de la ressource détermine le nom attribué à la chaîne. Le champ Valeur de la ressource correspond à la chaîne elle-même.
3. Dans la boîte de dialogue Extraire la ressource, saisissez happy_birthday_text dans le champ Nom de la ressource. Le nom des ressources de chaîne doit être écrit en minuscules. S'il comporte plusieurs mots, reliez-les par des traits de soulignement. Conservez les autres paramètres par défaut.

4. Cliquez sur le bouton OK.
5. Dans le volet Attributs, recherchez l'attribut texte. Notez qu'Android Studio l'a défini automatiquement sur @string/happy_birthday_text.

6. Ouvrez le fichier strings.xml (app > res > values > strings.xml). Notez qu'Android Studio a créé une ressource de chaîne appelée happy_birthday_text.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

Le fichier strings.xml contient une liste de chaînes que l'utilisateur verra dans votre application. Notez que le nom de votre application est également une ressource de chaîne. En réunissant les chaînes au même endroit, vous pouvez plus facilement traduire tout le texte de votre application et réutiliser la même chaîne à différents endroits.

7. Suivez la même procédure pour extraire le texte de la signature TextView. Nommez cette ressource signature_text.

Votre fichier final devrait se présenter comme suit :

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

Vérifier l'accessibilité de votre application

En matière d'accessibilité, le respect de bonnes pratiques de codage permet à tous vos utilisateurs, y compris ceux en situation de handicap, de naviguer et d'interagir plus facilement avec votre application.

Remarque : Android fournit de nombreux outils aux utilisateurs. Par exemple, TalkBack est un lecteur d'écran Google préinstallé sur les appareils Android. TalkBack permet d'utiliser l'appareil sans regarder l'écran grâce à des commentaires audio. Pour en savoir plus sur l'accessibilité, consultez le guide de référence des développeurs.

Android Studio fournit des conseils et des avertissements pour vous aider à rendre votre application plus accessible.

1. Dans l'arborescence des composants, notez le triangle orange situé à côté de l'élément ImageView que vous avez ajouté précédemment. Si vous passez la souris dessus, une info-bulle s'affiche avec un avertissement concernant l'attribut "contentDescription" manquant pour l'image. Les descriptions de contenu contribuent à rendre votre application plus compatible avec TalkBack en définissant la fonction des éléments d'interface utilisateur.

Toutefois, l'image de cette application n'est incluse qu'à des fins décoratives. Au lieu de définir une description de contenu qui sera lue à l'utilisateur, vous pouvez simplement indiquer à TalkBack d'ignorer l'élément ImageView en définissant l'attribut importantForAccessibility sur no (non).

2. Dans l'arborescence des composants, sélectionnez votre ImageView.
3. Accédez à la fenêtre Attributs. Dans la section Tous les attributs, recherchez importantForAccessibility et définissez-le sur no.

Le triangle orange à côté de l'élément ImageView disparaît.

4. Exécutez à nouveau votre application pour vous assurer qu'elle fonctionne toujours.

Félicitations ! Vous avez ajouté une image à l'application Happy Birthday, appliqué les recommandations en matière d'accessibilité et simplifié la traduction de l'application dans d'autres langues.

5. Code de solution

Le code de solution pour l'application Happy Birthday a été importé sur GitHub, au cas où vous souhaiteriez examiner le code que nous obtenons.

GitHub est un service qui permet aux développeurs de gérer le code de leurs projets logiciels. Il utilise Git, un système de contrôle des versions qui garde une trace des modifications apportées à chaque version du code. Dans Google Docs, vous pouvez consulter l'historique des versions d'un document et voir quand et quelles modifications y ont été apportées. Git offre une fonctionnalité similaire permettant de suivre l'historique des versions du code d'un projet. Elle est très utile si vous travaillez sur un projet, que ce soit seul ou en équipe.

GitHub dispose également d'un site Web sur lequel vous pouvez afficher et gérer votre projet. Ce lien GitHub vous permet de consulter en ligne les fichiers du projet Happy Birthday en ligne ou de les télécharger sur votre ordinateur.

URL du code de solution : https://github.com/google-developer-training/android-basics-kotlin-birthday-card-with-image-app-solution

Pour obtenir le code de cet atelier de programmation et l'ouvrir dans Android Studio, procédez comme suit :

Obtenir le code

1. Cliquez sur l'URL indiquée. La page GitHub du projet s'ouvre dans un navigateur.
2. Sur la page GitHub du projet, cliquez sur le bouton Code pour afficher une boîte de dialogue.

3. Dans la boîte de dialogue, cliquez sur le bouton Download ZIP (Télécharger le ZIP) pour enregistrer le projet sur votre ordinateur. Attendez la fin du téléchargement.
4. Recherchez le fichier sur votre ordinateur (qui se trouve probablement dans le dossier Téléchargements).
5. Double-cliquez sur le fichier ZIP pour le décompresser. Un dossier contenant les fichiers du projet est alors créé.

Ouvrir le projet dans Android Studio

1. Lancez Android Studio.
2. Dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), cliquez sur Open an existing Android Studio project (Ouvrir un projet Android Studio existant).

Remarque : Si Android Studio est déjà ouvert, sélectionnez l'option de menu File (Fichier) > New (Nouveau) > Import Project (Importer un projet).

3. Dans la boîte de dialogue Import Project (Importer un projet), accédez à l'emplacement du dossier du projet décompressé (qui se trouve probablement dans le dossier Téléchargements).
4. Dans le dossier du projet, sélectionnez le dossier "Happy Birthday".
5. Cliquez sur "Open" (Ouvrir).
6. Attendez qu'Android Studio ouvre le projet.
7. Cliquez sur le bouton Exécuter pour créer et exécuter l'application. Assurez-vous qu'elle fonctionne correctement.
8. Parcourez les fichiers du projet dans la fenêtre de l'outil Project (Projet) pour voir comment l'application est configurée.

6. Résumé

• L'outil Resource Manager (Gestionnaire de ressources) d'Android Studio permet d'ajouter et d'organiser vos images et autres ressources.
• Une ImageView est un élément d'interface utilisateur permettant d'afficher des images dans votre application.
• Une ImageViews doit inclure une description du contenu pour rendre votre application plus accessible.
• Le texte présenté à l'utilisateur, comme les vœux d'anniversaire, doit être extrait dans une ressource de chaîne afin de faciliter la traduction de votre application dans d'autres langues.

7. En savoir plus

• Vocabulaire pour les bases d'Android en Kotlin
• Resource Manager dans Android Studio
• Classe ImageView
• Accessibilité
• Prise en charge d'autres langues
• Premiers pas avec GitHub

8. Pour s'entraîner

Remarque : Ces exercices sont facultatifs. Ils vous permettent de mettre en pratique ce que vous avez appris dans cet atelier de programmation.

Actions à effectuer :

1. Créez votre propre application de carte d'anniversaire, basée sur un concept personnel.
2. Commencez par réfléchir aux Views dont vous aurez besoin.
3. Dans quel ordre faudrait-il les ajouter ?
4. Quelles images devez-vous ajouter au dossier des drawables ?

Il existe deux types d'images bitmap couramment utilisées dans les applications Android : les fichiers JPEG et les fichiers PNG. Les fichiers PNG peuvent comporter des zones transparentes (vides). Pour en savoir plus sur les formats d'image, consultez le guide de référence des développeurs.

5. N'oubliez pas de positionner d'abord les Views avec des contraintes et des marges, puis de paramétrer leurs styles.
6. Pour rendre le texte plus lisible sur certaines images, essayez d'utiliser shadowColor, shadowDx, shadowDy et shadowRadius.

Vérifier votre travail :

Une fois terminée, votre application devrait fonctionner sans erreur et afficher la carte d'anniversaire que vous avez conçue.

Félicitations ! Vous avez terminé de créer votre propre application de carte d'anniversaire. Partagez le fruit de vos efforts sur les réseaux sociaux. Utilisez le hashtag #LearningKotlin pour le montrer !