Afficher une liste d'images à l'aide de vignettes

1. Avant de commencer

Dans l'atelier de programmation précédent, vous avez créé une application Affirmations qui affiche une liste de texte dans un RecyclerView.

Dans cet atelier de programmation, vous allez ajouter une image inspirante à chaque affirmation dans votre application. Vous allez afficher le texte et l'image de chaque déclaration dans une vignette, avec le widget MaterialCardView de la bibliothèque Composants Material pour Android. Enfin, vous affinerez l'application en créant une interface plus cohérente et plus élégante. Voici une capture d'écran de l'application terminée :

Conditions préalables

• Vous êtes capable d'ajouter des ressources image à une application.
• Vous savez modifier une mise en page XML.
• Vous savez créer une application qui affiche une liste de texte dans un RecyclerView.
• Vous savez créer un adaptateur pour un RecyclerView.

Points abordés

• Comment ajouter des images à la liste des affirmations affichées dans un RecyclerView.
• Comment utiliser MaterialCardView dans la mise en page d'un élément RecyclerView.
• Comment apporter des modifications visuelles dans l'interface utilisateur pour améliorer l'apparence de l'application.

Objectifs de l'atelier

• Créer une application Affirmations améliorée qui affiche une liste de vignettes à l'aide d'un RecyclerView. Chaque vignette contient une image et un texte d'affirmation.

Ce dont vous avez besoin

• Un ordinateur équipé d'Android Studio version 4.1 ou ultérieure.
• Une connexion Internet pour télécharger des fichiers image.
• L'application Affirmations de l'atelier de programmation précédent Créer une application Affirmations. (Aucun code de démarrage n'est fourni. La création de l'application est une condition préalable.)

2. Ajouter des images aux éléments de liste

Jusqu'à maintenant, vous avez créé un adaptateur ItemAdapter pour afficher les chaînes d'affirmation dans un RecyclerView. Sur le plan pratique, cette solution est très efficace, mais visuellement, elle manque de charme. Dans cette tâche, vous modifierez la mise en page de l'élément de liste et le code de l'adaptateur pour afficher les images associées aux affirmations.

Télécharger les images

1. Pour commencer, ouvrez le projet d'application Affirmations de l'atelier de programmation précédent dans Android Studio. Si vous n'avez pas ce projet à disposition, suivez les étapes de l'atelier de programmation précédent pour en créer un. Revenez ensuite sur cette page.
2. Ensuite, téléchargez les fichiers image sur votre ordinateur. Il devrait y avoir 10 images, une pour chaque affirmation de votre application. Le nom des fichiers doit suivre le format suivant : image1.jpg, puis image10.jpg, et ainsi de suite.
3. Copiez les images de votre ordinateur dans le dossier res > drawable de votre projet (app/src/main/res/drawable) dans Android Studio. Une fois ces ressources ajoutées à votre application, vous pourrez accéder à ces images depuis votre code en utilisant leur ID de ressource, comme R.drawable.image1. Vous devrez peut-être recréer votre code pour Android Studio afin de trouver l'image.

Vous pouvez maintenant utiliser les images dans l'application.

Ajouter la prise en charge des images dans la classe Affirmation

Au cours de cette étape, vous ajouterez une propriété dans la classe de données Affirmation pour contenir la valeur pour l'ID de ressource d'image. Ainsi, une seule instance d'objet Affirmation contiendra l'ID de ressource pour le texte de l'affirmation et l'ID de ressource pour l'image associée à l'affirmation.

1. Ouvrez le fichier Affirmation.kt dans le package model.
2. Modifiez le constructeur de la classe Affirmation en ajoutant un autre paramètre Int nommé imageResourceId.

Utiliser des annotations de ressource

stringResourceId et imageResourceId sont des nombres entiers. Cela semble correct, mais l'appelant pourrait malencontreusement transmettre les arguments dans le mauvais ordre (imageResourceId en premier au lieu de stringResourceId).

Pour éviter ce problème, vous pouvez utiliser des annotations de ressource. Les annotations sont utiles, car elles permettent d'ajouter des informations supplémentaires aux classes, méthodes ou paramètres. Les annotations sont toujours déclarées avec le symbole @. Dans ce cas, ajoutez l'annotation @StringRes à votre propriété d'ID de ressource de chaîne, et l'annotation @DrawableRes à votre propriété d'ID de ressource drawable. Vous recevrez ensuite un avertissement si le type d'ID de ressource indiqué est incorrect.

1. Ajoutez l'annotation @StringRes à stringResourceId.
2. Ajoutez l'annotation @DrawableRes à imageResourceId.
3. Assurez-vous que les importations androidx.annotation.DrawableRes et androidx.annotation.StringRes sont ajoutées en haut de votre fichier après la déclaration du package.

Affirmation.kt

package com.example.affirmations.model

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

data class Affirmation(
   @StringRes val stringResourceId: Int,
   @DrawableRes val imageResourceId: Int
)

Initialiser la liste des affirmations avec des images

Maintenant que vous avez modifié le constructeur de la classe Affirmation, vous devez mettre à jour la classe Datasource. Transmettez un ID de ressource d'image à chaque objet Affirmation initialisé.

1. Ouvrez Datasource.kt. Une erreur s'affiche normalement pour chaque instanciation de Affirmation.
2. Pour chaque Affirmation, ajoutez l'ID de ressource d'une image en tant qu'argument, comme R.drawable.image1.

Datasource.kt

package com.example.affirmations.data

import com.example.affirmations.R
import com.example.affirmations.model.Affirmation

class Datasource() {

    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10)
        )
    }
}

Ajouter un élément ImageView à la mise en page de l'élément de liste

Afin d'afficher une image pour chaque affirmation de votre liste, vous devez ajouter un ImageView à la mise en page de votre élément. Comme vous disposez désormais de deux vues (TextView et ImageView), vous devez les placer en tant que vues "enfant" dans un ViewGroup. Pour réorganiser les vues dans une colonne verticale, vous pouvez utiliser un LinearLayout. La mise en page LinearLayout aligne toutes les vues "enfant" dans une seule direction, verticale ou horizontale.

1. Ouvrez res > layouts > list_item.xml. Ajoutez un LinearLayout autour du TextView existant et définissez la propriété de orientation sur vertical.
2. Déplacez la ligne de déclaration xmlns schema de l'élément TextView vers l'élément LinearLayout pour résoudre l'erreur.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

3. Dans le LinearLayout, avant TextView,, ajoutez un élément ImageView avec un ID de ressource item_image.
4. Définissez une largeur de match_parent et une hauteur de 194dp pour ImageView. En fonction de la taille de l'écran, cette valeur devrait toujours afficher plusieurs vignettes à l'écran simultanément.
5. Définissez la valeur de scaleType sur centerCrop..
6. Définissez l'attribut importantForAccessibility sur no, car l'image est utilisée à des fins décoratives.

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="194dp"
        android:id="@+id/item_image"
        android:importantForAccessibility="no"
        android:scaleType="centerCrop" />

Mettre à jour ItemAdapter pour définir l'image

1. Ouvrez adapter/ItemAdapter.kt (app > java > adapter > ItemAdapter).
2. Accédez à la classe ItemViewHolder.
3. Une instance ItemViewHolder doit contenir une référence à la TextView et une référence à la ImageView dans la mise en page de l'élément de liste. Apportez la modification suivante.

Sous l'initialisation de la propriété textView, ajoutez un val nommé imageView. Utilisez findViewById() pour trouver la référence à ImageView avec l'ID item_image et attribuez-la à la propriété imageView.

ItemAdapter.kt

class ItemViewHolder(private val view: View): RecyclerView.ViewHolder(view) {
    val textView: TextView = view.findViewById(R.id.item_title)
    val imageView: ImageView = view.findViewById(R.id.item_image)
}

4. Recherchez la fonction onBindViewHolder() dans ItemAdapter.
5. Vous avez déjà défini stringResourceId pour l'affirmation sur textView dans ItemViewHolder. Définissez maintenant imageResourceId pour l'affirmation sur l'élément ImageView de la vue de l'élément de liste.

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val item = dataset[position]
        holder.textView.text = context.resources.getString(item.stringResourceId)
        holder.imageView.setImageResource(item.imageResourceId)
    }

6. Exécutez l'application et faites défiler la liste des affirmations.

L'application est beaucoup plus élégante avec des images ! Vous pouvez toujours améliorer l'UI de l'application. Dans la section suivante, vous allez procéder à quelques légers ajustements dans l'application afin d'améliorer l'interface utilisateur.

3. Affiner l'interface utilisateur

Jusqu'à présent, vous avez créé une application fonctionnelle qui repose sur une liste de chaînes et d'images d'affirmations. Dans cette section, vous verrez comment de petits changements dans le code et le XML peuvent améliorer le rendu de l'application.

Ajouter une marge intérieure

Pour commencer, ajoutez un espace blanc entre les éléments de liste.

1. Ouvrez item_list.xml (app > res > layout > item_list.xml) et ajoutez une marge intérieure de 16dp au LinearLayout existant.

list_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

2. Ajoutez une marge intérieure de 16dp à l'élément item_title de TextView .
3. Dans TextView, définissez la valeur ?attr/textAppearanceHeadline6 pour l'attribut textAppearance. textAppearance est un attribut qui vous permet d'appliquer un style spécifique au texte. Pour découvrir d'autres valeurs d'apparence prédéfinies, consultez la section TextAppearances de l'article de blog Attributs de thème courants.

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textAppearance="?attr/textAppearanceHeadline6" />

4. Exécutez l'application. La liste vous paraît-elle plus agréable à lire ?

Utiliser des vignettes

Il est toujours difficile de savoir si une image appartient au texte d'affirmation placé au-dessus ou en dessous. Pour résoudre ce problème, vous pouvez utiliser une vue Card (Vignette). Une vue "Card (Vignette)" vous permet de réunir facilement un groupe de vues tout en améliorant la cohérence visuelle du conteneur. Pour plus d'informations sur Material Design et l'utilisation des vignettes, consultez ce guide.

1. Ajoutez un MaterialCardView autour du LinearLayout existant.
2. Une fois encore, déplacez la déclaration du schéma de LinearLayout vers MaterialCardView.
3. Définissez la propriété layout_width de l'élément MaterialCardView sur match_parent et celle de layout_height sur wrap_content.
4. Ajoutez un layout_margin de 8dp.
5. Supprimez la marge intérieure de LinearLayout pour limiter les espaces blancs.
6. Exécutez de nouveau l'application. Est-il plus facile de différencier chaque affirmation avec MaterialCardView ?

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/item_image"
            android:layout_width="match_parent"
            android:layout_height="194dp"
            android:importantForAccessibility="no"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:textAppearance="?attr/textAppearanceHeadline6" />

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Modifier les couleurs du thème de l'application

La couleur par défaut du thème de l'application n'est peut-être pas la plus apaisante. Dans cette tâche, vous définirez la couleur du thème de l'application sur bleu. Vous pourrez la modifier ultérieurement selon vos préférences !

Vous pouvez trouver des nuances de bleu prédéfinies dans la palette de couleurs Material Design en cliquant sur ce lien.

Dans cet atelier de programmation, vous allez utiliser ces couleurs issues de la palette Material Design :

• blue_200 : #FF90CAF9
• blue_500 : #FF2196F3
• blue_700 : #FF1976D2

Ajouter des ressources de couleur

Centralisez la définition des couleurs utilisées dans votre application à l'aide du fichier colors.xml.

1. Ouvrez colors.xml (res > values > color.xml).
2. Ajoutez de nouvelles ressources de couleur au fichier pour les couleurs bleues définies ci-dessous :

<color name="blue_200">#FF90CAF9</color>
<color name="blue_500">#FF2196F3</color>
<color name="blue_700">#FF1976D2</color>

Modifier les couleurs du thème

Maintenant que vous disposez de nouvelles ressources de couleur, vous pouvez les utiliser dans votre thème.

1. Ouvrez themes.xml (res > values > topics > topics.xml).
2. Accédez à la section <!-- Primary brand color. -->.
3. Ajoutez ou modifiez colorPrimary pour utiliser @color/blue_500.
4. Ajoutez ou modifiez colorPrimaryVariant pour utiliser @color/blue_700.

<item name="colorPrimary">@color/blue_500</item>
<item name="colorPrimaryVariant">@color/blue_700</item>

5. Exécutez l'application. La barre d'application devient bleue.

Modifier les couleurs du thème sombre

Il est recommandé de choisir des couleurs plus désaturées pour le thème sombre de l'application.

1. Ouvrez le fichier themes.xml du thème sombre (themes > topics.xml (night)).
2. Ajoutez ou modifiez les attributs de thème colorPrimary et colorPrimaryVariant comme suit :

<item name="colorPrimary">@color/blue_200</item>
<item name="colorPrimaryVariant">@color/blue_500</item>

3. Exécutez votre application.
4. Dans les Paramètres de votre appareil, activez le Thème sombre.

5. L'application passe au thème sombre. Assurez-vous que votre application ressemble à la capture d'écran ci-dessous :

6. À ce stade, vous pouvez également supprimer les couleurs inutilisées de votre fichier colors.xml (p. ex. les ressources en violet utilisées dans le thème de l'application par défaut).

Modifier l'icône d'application

Pour terminer, vous mettrez à jour l'icône de l'application.

1. Téléchargez les fichiers de l'icône de l'application ic_launcher_foreground.xml et ic_launcher_background.xml. Si votre navigateur affiche le fichier au lieu de le télécharger, sélectionnez Fichier > Enregistrer la page sous pour l'enregistrer sur votre ordinateur.
2. Dans Android Studio, supprimez deux fichiers : drawable/ic_launcher_background.xml et drawable-v24/ic_launcher_foreground.xml, car il s'agit de l'icône d'application précédente. Vous pouvez décocher la case Safe delete (with usage search) (Suppression sécurisée [avec recherche de données d'utilisation]).
3. Ensuite, effectuez un clic droit sur le dossier res > drawable, puis sélectionnez New > Image Asset (Nouveau > Élément image).

4. Dans la fenêtre Configure Image Asset (Configurer l'élément image), assurez-vous que l'option Foreground layer (Calque d'avant-plan) est sélectionnée.

5. En dessous, recherchez le libellé Path (Chemin).
6. Cliquez sur l'icône de dossier dans la zone de texte Path (Chemin).
7. Recherchez et ouvrez le fichier ic_launcher_foreground.xml que vous avez téléchargé sur votre ordinateur.

8. Passez à l'onglet Background Layer (Calque d'arrière-plan).
9. Cliquez sur l'icône Browse (Parcourir) dans la zone de texte Path (Chemin).
10. Recherchez et ouvrez le fichier ic_launcher_background.xml sur votre ordinateur. Aucune autre modification n'est nécessaire.
11. Appuyez sur Next (Suivant).

12. Dans la boîte de dialogue Confirm Icon Path (Confirmer le chemin d'accès à l'icône), cliquez sur Finish (Terminer). Vous pouvez remplacer les icônes existantes.
13. Pour respecter les bonnes pratiques, vous pouvez déplacer les nouveaux drawables vectoriels ic_launcher_foreground.xml et ic_launcher_background.xml dans un nouveau répertoire de ressources appelé drawable-anydpi-v26. Les icônes adaptatives ont été introduites au niveau 26 de l'API. Ces ressources ne seront donc utilisées que sur les appareils exécutant l'API au niveau 26 ou supérieur (pour toutes les PPP).
14. Supprimez le répertoire drawable-v24 s'il est vide.
15. Exécutez l'application : une magnifique nouvelle icône apparaît maintenant dans le panneau des applications !

16. Pour finir, n'oubliez pas de reformater les fichiers Kotlin et XML du projet afin que votre code soit plus propre et respecte les consignes de style.

Félicitations ! Vous avez créé une application Affirmations inspirante.

Vous avez appris à afficher une liste de données dans une application Android : que pouvez-vous créer maintenant ?

4. Code de solution

Le code de solution pour l'application Affirmations se trouve dans le dépôt GitHub ci-dessous :

1. Accédez à la page du dépôt GitHub fournie pour le projet.
2. Vérifiez que le nom de la branche correspond à celui spécifié dans l'atelier de programmation. Par exemple, dans la capture d'écran suivante, le nom de la branche est main.

3. Sur la page GitHub du projet, cliquez sur le bouton Code pour afficher une fenêtre pop-up.

4. Dans la fenêtre pop-up, cliquez sur le bouton Download ZIP (Télécharger le fichier ZIP) pour enregistrer le projet sur votre ordinateur. Attendez la fin du téléchargement.
5. Recherchez le fichier sur votre ordinateur (il se trouve probablement dans le dossier Téléchargements).
6. 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 (Ouvrir).

Remarque : Si Android Studio est déjà ouvert, sélectionnez l'option de menu File > Open (Fichier > Ouvrir).

3. Dans l'explorateur de fichiers, accédez à l'emplacement du dossier du projet décompressé (il se trouve probablement dans le dossier Téléchargements).
4. Double-cliquez sur le dossier de ce projet.
5. Attendez qu'Android Studio ouvre le projet.
6. Cliquez sur le bouton Run (Exécuter) pour créer et exécuter l'application. Assurez-vous qu'elle fonctionne correctement.

5. Résumé

• Pour afficher du contenu supplémentaire dans un RecyclerView, modifiez la classe de modèle de données et la source de données sous-jacentes. Ensuite, mettez à jour la mise en page et l'adaptateur des éléments de liste pour intégrer ces données dans les vues.
• Utilisez les annotations de ressources pour vous assurer que le bon type d'ID de ressource est transmis à un constructeur de classe.
• Utilisez la bibliothèque Material Components pour Android pour que votre application respecte plus facilement les consignes Material Design recommandées.
• Utilisez MaterialCardView pour afficher le contenu dans une vignette Material.
• De légères modifications de couleur et d'espacement dans votre application vous permettront d'améliorer son apparence.

6. En savoir plus

• Créer une liste avec RecyclerView
• Classe RecyclerView
• Adaptateurs RecyclerView
• ViewHolder RecyclerView
• Listes dans Material Design
• Vignettes dans Material Design
• MaterialCardView
• Premiers pas avec les Composants Material pour Android
• Styles Android : thèmes et styles
• Icônes adaptatives

7. Défi

Dans cette série d'ateliers de programmation, vous avez appris à utiliser LinearLayoutManager avec RecyclerView. RecyclerView peut utiliser différents LayoutManagers pour modifier la mise en page des données.

• Remplacez la propriété layoutManager de RecyclerView par GridLayoutManager.
• Remplacez le nombre de colonnes par 3.
• Modifiez la mise en page de l'adaptateur pour visualiser les données dans une grille.