Coil — wat is het, kernconcepten en ImageLoader in Android

Wat is Coil?

Coil (Coroutine Image Loader) — is een bibliotheek voor het laden van afbeeldingen op Android, volledig geschreven in Kotlin en gebruikmakend van coroutines voor asynchrone verwerking. Het biedt een uniforme API voor het laden van bitmapafbeeldingen van het netwerk, bronnen, bestandssysteem en Content Provider, met automatische caching op meerdere niveaus.

In tegenstelling tot Glide en Picasso gebruikt Coil Kotlin Coroutines in plaats van callback-ketens, waardoor de code lineairder en voorspelbaarder wordt. Alle laad- en decodeerbewerkingen worden op de achtergrond uitgevoerd via Dispatchers.IO, en het resultaat wordt afgeleverd op de hoofdthread zonder expliciete omschakeling.

Coil ondersteunt transformaties (Round, Blur, Grayscale), overgangsanimaties, SVG en GIF, evenals aangepaste Target voor niet-standaard weergave. Volgens Google I/O 2023 wordt Coil aanbevolen in officiële Jetpack Compose-tutorials samen met Glide.

• APK-grootte — ongeveer 150 KB (tegenover 500 KB bij Glide)
• Minimale Android-versie — API 21 (Lollipop)
• Afhankelijkheid — Kotlin Coroutines (ingebouwd)

Hoe werkt Coil: ImageLoader en ImageRequest

ImageLoader — de belangrijkste component van Coil, verantwoordelijk voor het uitvoeren van laadverzoeken en cachebeheer. Elke instantie bevat verwijzingen naar MemoryCache, DiskCache, BitmapPool en een pool van coroutines. Standaard wordt een singleton gebruikt dat wordt aangemaakt via Coil.imageLoader(context).

ImageRequest

ImageRequest — een object dat één laadverzoek voor een afbeelding beschrijft: gegevensbron (URL, URI, Int-bron), doel-ImageView of Target, transformaties, cache-instellingen en placeholder. ImageRequest wordt samengesteld via een builder, wat flexibiliteit en leesbaarheid biedt.

val request = ImageRequest.Builder(context)
    .data("https://example.com/image.jpg")
    .crossfade(true)
    .size(512, 512)
    .transformations(listOf(RoundedCornersTransformation(12f)))
    .memoryCachePolicy(CachePolicy.ENABLED)
    .diskCachePolicy(CachePolicy.ENABLED)
    .target(imageView)
    .build()

Na samenstelling wordt ImageRequest doorgegeven aan ImageLoader via enqueue of execute. De methode enqueue start een coroutine en retourneert Disposable, waarmee het laden kan worden geannuleerd bij het verlaten van het scherm. De methode execute is een suspend-functie die rechtstreeks Result retourneert.

Uitvoeringsstroom van het verzoek

ImageLoader controleert achtereenvolgens MemoryCache, DiskCache en alleen bij een misser van beide voert het een netwerkverzoek uit via HttpEngine. Na het laden worden de bytes gedecodeerd naar Bitmap rekening houdend met de doelgrootte, worden transformaties toegepast, wordt het resultaat in beide caches opgeslagen en doorgegeven aan Target.

• Memory Cache — eerst gecontroleerd, sleutel — URL + parameters
• Disk Cache — gecontroleerd bij afwezigheid in geheugen, sleutel — MD5 van URL
• HttpEngine — standaard OkHttp, aanpasbaar via component

Belangrijkste componenten van Coil

Coil is gebouwd op een componentenarchitectuur waarbij elk onderdeel kan worden vervangen via Dependency Injection. Alle componenten worden geregistreerd in ImageLoaderFactory en doorgegeven aan de constructor van ImageLoader via de builder.

ImageLoader

ImageLoader — het startpunt voor alle laadoperaties. Elke instantie bevat een coroutine-pool, BitmapPool, MemoryCache, DiskCache en een lijst met interceptors. Standaard wordt één globale instantie aangemaakt, maar voor modulair testen kunnen afzonderlijke exemplaren met geïsoleerde cache worden gemaakt.

MemoryCache

MemoryCache — een in-memory cache op basis van LRU (Least Recently Used) die gedecodeerde Bitmap-objecten opslaat. De standaard maximale grootte is 25% van het beschikbare geheugen van de applicatie, maar niet minder dan 32 MB. De cachesleutel wordt gevormd uit URL + grootte + transformaties, wat het verstrekken van een verouderde afbeelding uitsluit.

DiskCache

DiskCache — een bestandscache voor ruwe gegevens (JPEG, PNG, WebP) en gedecodeerde metadata. Het bevindt zich in de cache-directory van de applicatie en ondersteunt automatische opschoning bij overschrijding van de limiet. Schijfbewerkingen worden uitgevoerd via DiskCache.Builder met configuratie van de directory en maximale grootte.

Cache-niveaus in Coil

Coil implementeert een gelaagde cachestrategie die netwerkverzoeken minimaliseert en het weergeven van afbeeldingen versnelt. Elk niveau heeft zijn eigen doel en levensduur van gegevens.

Memory Cache biedt onmiddellijke toegang tot reeds gedecodeerde bitmaps. Disk Cache garandeert dat de applicatie zonder netwerk werkt (offline-first) na de eerste keer laden. Http Cache op OkHttp-niveau verwerkt voorwaardelijke verzoeken ETag en If-Modified-Since.

Cachebeleid wordt per verzoek geconfigureerd via CachePolicy met drie waarden: ENABLED, READ_ONLY, WRITE_ONLY, DISABLED. Bijvoorbeeld voor gebruikersavatars kan READ_ONLY worden ingesteld voor Memory Cache en ENABLED voor Disk Cache.

Voorbeelden van Coil-gebruik in Kotlin

Coil biedt verschillende integratiemethoden, afhankelijk van de architectuur van de applicatie. Laten we drie belangrijke scenario’s bekijken met werkende codevoorbeelden.

Laden naar ImageView via extensie

load — extensiefunctie voor ImageView, de eenvoudigste manier om een afbeelding in één regel te laden. De functie accepteert URL, URI, Int-bron of File en alle optionele parameters via een lambda-configurator.

imageView.load("https://example.com/photo.jpg") {
    crossfade(true)
    placeholder(R.drawable.placeholder)
    error(R.drawable.error)
    size(300, 300)
    transformations(CircleCropTransformation())
}

De methode load retourneert een Disposable dat kan worden geannuleerd in onDestroy of bij hergebruik van de View. Dit voorkomt geheugenlekken en onnodige netwerkverzoeken bij snel scrollen door een lijst.

Gebruik in Jetpack Compose

AsyncImage — composable-functie voor het laden van afbeeldingen in declaratieve UI. Het accepteert elke gegevensbron en drie optionele parameters voor statussen: placeholder, error en success.

@Composable
fun NetworkImage(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "netwerkafbeelding",
        placeholder = ColorPainter(Color.Gray),
        error = ColorPainter(Color.Red)
    )
}

SubcomposeAsyncImage — een flexibelere versie die het mogelijk maakt de weergave tijdens het laden aan te passen via een content-slot. Dit is handig voor skeletons (shimmer) en voortgangsbalken.

Aangepaste Target voor niet-standaard uitvoer

Als ImageView of AsyncImage niet geschikt zijn, kan Target worden geïmplementeerd met een enkele methode onSuccess die Bitmap accepteert. Dit wordt gebruikt voor laden in Notification, RemoteViews of OpenGL-textuur.

val target = object : BitmapTarget() {
    override fun onSuccess(result: Bitmap) {
        notificationRemoteView.setImageViewBitmap(R.id.icon, result)
    }
}

imageLoader.enqueue(
    ImageRequest.Builder(context)
        .data(url)
        .target(target)
        .build()
)

Coil vergelijken met andere bibliotheken

De keuze van een bibliotheek voor het laden van afbeeldingen hangt af van de projectvereisten. Coil concurreert met Glide en Picasso, die elk hun sterke punten hebben. Een vergelijking van de belangrijkste kenmerken staat in de tabel.

Voor nieuwe projecten in Kotlin en Jetpack Compose wordt Coil een natuurlijke keuze dankzij nul extra afhankelijkheid van coroutines en minimale grootte. Glide blijft de voorkeur genieten voor complexe scenario’s met animaties en videovoorbeelden. Picasso doet onder voor beide qua functionaliteit, maar wint in eenvoud.

Coil instellen in een Android-project

Coil verbinden met een Android-project gebeurt via een Gradle-afhankelijkheid. Na toevoeging registreert de bibliotheek automatisch ImageLoader via ContentProvider, dus handmatige initialisatie in Application is niet vereist. Indien aanpassing nodig is, wordt een eigen ImageLoader gemaakt via de builder.

// build.gradle.kts (app-module)
dependencies {
    implementation("io.coil-kt:coil:2.6.0")
    // Extra voor Jetpack Compose:
    implementation("io.coil-kt:coil-compose:2.6.0")
    // Voor SVG-ondersteuning:
    implementation("io.coil-kt:coil-svg:2.6.0")
    // Voor GIF-ondersteuning:
    implementation("io.coil-kt:coil-gif:2.6.0")
}

Voor het aanpassen van ImageLoader wordt ImageLoaderFactory gebruikt — een singleton aangemaakt in Application.onCreate. In de fabriek kunnen cachemarges, HTTP-client, aangepaste decoders en logging worden geconfigureerd. Standaard gebruikt Coil OkHttp met een kant-en-klare verbindingspool.

class App : Application(), ImageLoaderFactory {
    override fun newImageLoader(): ImageLoader {
        return ImageLoader.Builder(this)
            .memoryCache {
                MemoryCache.Builder()
                    .maxSizePercent(0.25)
                    .build()
            }
            .diskCache {
                DiskCache.Builder()
                    .directory(cacheDir.resolve("coil_cache"))
                    .maxSizeBytes(512 * 1024 * 1024)
                    .build()
            }
            .build()
    }
}