0Pricing
Android Academy · Leçon

Charger des images avec Coil

Chargement asynchrone d’images dans Compose.

Charger des images avec Coil est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. 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 4 leçons au total.

Pourquoi utiliser un chargeur d’images

La plupart des applications modernes affichent des images provenant d’Internet : photos de profil, images de produits et miniatures d’articles. Télécharger et décoder correctement ces images est plus difficile qu’il n’y paraît.

Vous devez récupérer les octets sur le réseau dans un thread d’arrière-plan, les décoder en bitmap, les mettre en cache pour éviter de les télécharger à nouveau et annuler la requête si l’utilisateur fait défiler l’écran. Faire tout cela manuellement est source d’erreurs.

Coil (Coroutine Image Loader) s’occupe de tout cela pour vous grâce à une petite API adaptée à Compose. Dans cette leçon, vous chargerez votre première image distante.

Ajouter Coil à votre projet

Coil est fourni sous forme de dépendance Gradle. Pour Jetpack Compose, vous avez besoin de l’artefact coil-compose, qui fournit le composable AsyncImage.

Ajoutez-le au build.gradle.kts de votre module. Coil 3 est la version majeure actuelle et fonctionne sur plusieurs plateformes ; c’est l’intégration Compose que nous utiliserons ici.

// build.gradle.kts (module level)
dependencies {
    implementation("io.coil-kt.coil3:coil-compose:3.0.4")
    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4")
}

Autorisation d’accès à Internet

Pour télécharger des images depuis une URL, votre application a besoin de l’autorisation INTERNET. Il s’agit d’une autorisation normale, accordée lors de l’installation ; vous devez donc seulement la déclarer dans le manifeste. Aucune demande n’est affichée à l’exécution.

Sans cette autorisation, chaque requête réseau échoue avec une exception de sécurité.

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application ...>
        ...
    </application>
</manifest>

Votre premier AsyncImage

La manière la plus simple d’afficher une image distante dans Compose est d’utiliser AsyncImage. Fournissez-lui un model, généralement une chaîne contenant une URL, ainsi qu’une contentDescription, et Coil s’occupe du reste : téléchargement en arrière-plan, décodage et affichage.

Le composable utilise automatiquement des coroutines liées à la composition ; la requête est donc annulée si le composable quitte l’écran.

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun Avatar() {
    AsyncImage(
        model = "https://example.com/avatar.png",
        contentDescription = "User avatar",
        modifier = Modifier.size(96.dp)
    )
}

contentScale : ajuster l’image

Les images correspondent rarement exactement aux dimensions de l’espace prévu par votre mise en page. ContentScale contrôle la manière dont le bitmap est mis à l’échelle dans ses limites.

  • ContentScale.Crop remplit la boîte et découpe le dépassement, ce qui convient parfaitement aux avatars et aux miniatures.
  • ContentScale.Fit conserve l’image entière, quitte à laisser de l’espace vide.
  • ContentScale.FillBounds étire l’image pour remplir l’espace, ce qui peut la déformer.

Crop est le choix le plus courant pour les espaces de dimensions fixes.

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun CircleAvatar(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "Avatar",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(80.dp)
            .clip(CircleShape)
    )
}

Construire une requête avec ImageRequest

Transmettre une chaîne contenant une URL est la solution la plus rapide. Pour davantage de contrôle, construisez un ImageRequest. Vous pourrez ainsi définir des options comme le fondu, les en-têtes, les transformations et les clés de cache.

Vous avez besoin d’un Context, que Compose fournit via LocalContext.current.

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ProductImage(url: String) {
    val context = LocalContext.current
    val request = ImageRequest.Builder(context)
        .data(url)
        .crossfade(true)
        .build()

    AsyncImage(
        model = request,
        contentDescription = "Product photo"
    )
}

Un fondu pour des chargements fluides

Par défaut, l’image apparaît instantanément une fois son chargement terminé, ce qui peut sembler brusque. crossfade(true) fait apparaître l’image progressivement au cours d’une courte animation.

Vous pouvez également indiquer une durée en millisecondes pour obtenir un fondu plus lent ou plus rapide. Ce petit détail rend les listes beaucoup plus soignées.

import coil3.request.ImageRequest
import coil3.request.crossfade
import android.content.Context

fun smoothRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .crossfade(durationMillis = 300)
        .build()

Charger des images depuis différentes sources

Le model de AsyncImage est flexible. Coil peut charger de nombreux types de sources, et pas uniquement des URL distantes :

  • Une String ou une Uri pour des fichiers réseau ou locaux.
  • L’identifiant d’une ressource drawable (R.drawable.logo).
  • Un File présent sur l’appareil.
  • Une Uri de contenu provenant du sélecteur de photos.

Le même composable peut ainsi gérer les images distantes et locales de manière transparente.

import android.net.Uri
import androidx.compose.runtime.Composable
import coil3.compose.AsyncImage

@Composable
fun FlexibleImage(source: Any) {
    // source can be a URL String, a Uri, a File, or a resource id
    AsyncImage(
        model = source,
        contentDescription = null
    )
}

// Examples:
// FlexibleImage("https://example.com/pic.jpg")
// FlexibleImage(Uri.parse("content://media/external/images/1"))

Réagir à l’état du chargement

Vous pouvez parfois avoir besoin de savoir si l’image est en cours de chargement, si le chargement a réussi ou s’il a échoué, afin d’afficher une interface différente. AsyncImagePainter expose cet état, mais l’approche la plus simple consiste à utiliser SubcomposeAsyncImage, qui vous permet de fournir un contenu pour chaque état.

Nous approfondirons les espaces réservés dans la prochaine leçon ; voici pour l’instant la structure d’un chargement dépendant de l’état.

import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import coil3.compose.SubcomposeAsyncImage

@Composable
fun StatefulImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Photo",
        loading = { CircularProgressIndicator() }
    )
}

L’annulation est automatique

L’un des principaux avantages de Coil est l’annulation automatique. Comme AsyncImage lance sa requête dans la composition, lorsque le composable quitte l’écran, par exemple lorsqu’une ligne sort d’un LazyColumn pendant le défilement, la requête en cours est annulée.

Cela économise de la bande passante et du CPU, tout en évitant le travail inutile. Vous n’avez vous-même aucun code d’annulation à écrire, ce qui explique pourquoi Coil s’adapte si bien aux longues listes.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun PhotoFeed(urls: List<String>) {
    LazyColumn {
        items(urls) { url ->
            AsyncImage(
                model = url,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            )
        }
    }
}

Une carte d’image complète

Combinons ce que nous avons appris : une carte avec une image distante qui remplit la partie supérieure, utilise un fondu et est recadrée à une hauteur fixe. Il s’agit du schéma de base que vous réutiliserez constamment.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ImageCard(title: String, imageUrl: String) {
    val context = LocalContext.current
    Card(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Column {
            AsyncImage(
                model = ImageRequest.Builder(context)
                    .data(imageUrl)
                    .crossfade(true)
                    .build(),
                contentDescription = title,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth().height(180.dp)
            )
            Text(text = title, modifier = Modifier.padding(16.dp))
        }
    }
}

Vérification rapide

Quel composable de coil-compose est le moyen le plus simple d’afficher une image distante à partir de son URL dans Jetpack Compose ?

Récapitulatif

Vous avez chargé vos premières images distantes avec Coil. Points essentiels :

  • Ajoutez coil-compose et une dépendance réseau OkHttp, ainsi que l’autorisation INTERNET.
  • AsyncImage(model = url, contentDescription = ...) est la solution la plus rapide.
  • Utilisez ContentScale.Crop avec une taille fixe pour les avatars et les miniatures.
  • Construisez un ImageRequest pour ajouter un fondu et bénéficier d’un contrôle accru.
  • Coil annule automatiquement les requêtes en cours lorsque les composables quittent l’écran.

Ensuite : rendre le chargement plus agréable avec des espaces réservés et des états d’erreur.

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 4 leçons au total.

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

Chargement asynchrone d’images dans Compose. 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 1 sur 4.

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

  1. Charger des images avec Coil
  2. Espaces réservés et états d’erreur
  3. Mise en cache et performances
  4. Lire des fichiers audio et vidéo
← Retour à Android Academy