Android Academy · Leçon

Charger des images avec Coil

Chargez et mettez en cache efficacement des images réseau avec Coil. Appliquez des transformations (CircleCrop, RoundedCorners) et gérez les espaces réservés ainsi que les erreurs.

Charger des images avec Coil est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 6. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 6 leçons au total.

Pourquoi utiliser une bibliothèque d'images ?

Charger des images depuis Internet est étonnamment complexe :

Télécharger sur un thread d'arrière-plan
Mettre en cache sur le disque et en mémoire
Décoder efficacement (éviter les plantages OOM)
Afficher une image d'attente pendant le chargement
Gérer les erreurs (lien invalide, absence de réseau)

Coil gère tout cela en une seule ligne de code.

Qu'est-ce que Coil ?

Coil (Coroutine Image Loader) est une bibliothèque moderne de chargement d'images pour Android, conçue pour Kotlin et les coroutines.

Légère — plus petite que Glide ou Picasso
Conçue d'abord pour Kotlin, avec prise en charge des coroutines
Sensible au cycle de vie — annule automatiquement les chargements
Prend en charge les GIF, les SVG et les images vidéo

Ajouter Coil

Ajoutez la dépendance dans app/build.gradle :

// app/build.gradle
dependencies {
    implementation 'io.coil-kt:coil:2.6.0'
}

// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />

Chargement basique d'une image

Chargez une image dans une ImageView en une seule ligne :

import coil.load

// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")

// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
    placeholder(R.drawable.ic_placeholder)
    error(R.drawable.ic_error)
    crossfade(true)  // smooth fade-in animation
}

Chargement dans un RecyclerView

Coil annule automatiquement les chargements en attente lorsqu'un ViewHolder est réutilisé, ce qui empêche l'affichage d'images incorrectes dans les mauvaises lignes :

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val post = getItem(position)

    holder.tvTitle.text = post.title

    holder.ivCover.load(post.imageUrl) {
        placeholder(R.drawable.ic_image_placeholder)
        error(R.drawable.ic_broken_image)
        crossfade(300)  // 300ms fade-in
        size(200, 200)  // resize to 200×200 pixels
    }
}

Transformations

Appliquez des transformations aux images chargées :

CircleCropTransformation() — image ronde (parfaite pour les avatars)
RoundedCornersTransformation(radius) — coins arrondis
BlurTransformation(context, radius) — effet de flou

Exemple de transformation

Affichez un avatar utilisateur circulaire :

import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation

// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
    transformations(CircleCropTransformation())
    placeholder(R.drawable.ic_default_avatar)
    error(R.drawable.ic_default_avatar)
}

// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
    transformations(RoundedCornersTransformation(16f))
    crossfade(true)
}

Comportement de la mise en cache

Coil met automatiquement les images en cache à deux niveaux :

Cache mémoire — le plus rapide, vidé lorsque l’application est arrêtée
Cache disque — conservé entre les lancements de l’application, 250 Mo par défaut

Si la même URL est chargée deux fois, le deuxième chargement provient du cache : aucune requête réseau n’est effectuée.

Chargement depuis différentes sources

Coil peut charger des images depuis différentes sources, et pas uniquement depuis des URL :

// From a URL (most common)
imageView.load("https://example.com/image.jpg")

// From a URI (e.g., gallery image)
imageView.load(uri)

// From a drawable resource
imageView.load(R.drawable.my_image)

// From a File
imageView.load(File("/sdcard/photo.jpg"))

// From a bitmap
imageView.load(bitmap)

Vérification rapide

Quelle transformation Coil utiliseriez-vous pour afficher la photo de profil d’un utilisateur sous forme de cercle ?

Récapitulatif : charger des images avec Coil

Vous pouvez maintenant afficher efficacement des images provenant du réseau :

Ajoutez Coil avec une seule dépendance Gradle
imageView.load(url) { } — chargez une image sur une seule ligne
Images de remplacement pour l’espace réservé et les erreurs
Transformations : CircleCrop, RoundedCorners, Blur
Mise en cache automatique en mémoire et sur le disque
Fonctionne avec les URL, les URI, les fichiers, les drawables et les bitmaps

Ensuite : gérez correctement les erreurs et fournissez aux utilisateurs des informations utiles.

Questions Fréquemment Posées

La leçon « Charger des images avec Coil » est-elle gratuite ?

Oui — le texte complet de « Charger des images avec Coil » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 6 leçons au total.

Qu'est-ce que j'apprendrai dans « Charger des images avec Coil » ?

Chargez et mettez en cache efficacement des images réseau avec Coil. Appliquez des transformations (CircleCrop, RoundedCorners) et gérez les espaces réservés ainsi que les erreurs. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 6.

Combien de temps prend la leçon « Charger des images avec Coil » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Retrofit et API REST
Charger des images avec Coil
Gestion des erreurs et expérience utilisateur
Notifications push
WorkManager et tâches en arrière-plan
Publier sur le Play Store

← Retour à Android Academy