Android Academy · Les

Placeholders en fouttoestanden

Elegant omgaan met laden en fouten.

Les 2 van 413 stappen

Placeholders en fouttoestanden is een gratis Android Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 4 lessen.

Laden gaat niet direct

Afbeeldingen via het netwerk hebben tijd nodig. Tijdens die wachttijd toont je interface ... niets, tenzij je dit afhandelt. Soms komt de afbeelding helemaal niet aan: de URL is ongeldig, de server is niet beschikbaar of de gebruiker is offline.

Een verzorgde app toont tijdens het laden een tijdelijke afbeelding en gebruikt bij problemen een terugvaloptie, in plaats van een leeg gat of een crash. Coil maakt beide eenvoudig.

In deze les voeg je tijdelijke afbeeldingen, foutafbeeldingen en aangepaste interface voor elke status toe.

Een eenvoudige tijdelijke afbeelding

De snelste manier om een tijdelijke afbeelding toe te voegen is een tekenbron via de parameter placeholder aan AsyncImage door te geven met painterResource. Coil toont deze totdat het laden van de echte afbeelding is voltooid.

Gebruik een neutrale, lichte tekenbron, zoals een grijs vlak of een silhouet van een logo.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun ImageWithPlaceholder(url: String) {
    AsyncImage(
        model = url,
        contentDescription = null,
        placeholder = painterResource(R.drawable.placeholder_gray)
    )
}

Een foutafbeelding toevoegen

De parameter error toont een terugvaltekenbron wanneer het verzoek mislukt. Er is ook fallback, die specifiek wordt gebruikt wanneer het model null is en er helemaal geen gegevens zijn om te laden.

Als je alle drie instelt — placeholder, error en fallback — dek je vrijwel zonder code elke visuele status af.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun RobustImage(url: String?) {
    AsyncImage(
        model = url,
        contentDescription = null,
        placeholder = painterResource(R.drawable.placeholder_gray),
        error = painterResource(R.drawable.image_broken),
        fallback = painterResource(R.drawable.no_image)
    )
}

Een tijdelijke afbeelding via ImageRequest

Je kunt deze statussen ook rechtstreeks op de ImageRequest instellen. Dat is handig wanneer je het verzoek één keer bouwt en opnieuw gebruikt, of wanneer je tegelijk andere opties voor het verzoek nodig hebt.

De functies op verzoekniveau accepteren ids van tekenbronnen.

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

fun buildRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .crossfade(true)
        .placeholder(R.drawable.placeholder_gray)
        .error(R.drawable.image_broken)
        .build()

Aangepaste interface met SubcomposeAsyncImage

Tekenbronnen zijn prima, maar soms wil je per status een laadindicator, glans-effect of tekst tonen. Met SubcomposeAsyncImage kun je echte composables opgeven voor loading, error en success.

Deze aanpak is flexibeler maar iets zwaarder. Gebruik daarom voor lange lijsten bij voorkeur tijdelijke tekenbronnen en bewaar subcompositie voor grote afbeeldingen.

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

@Composable
fun HeroImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Hero",
        loading = { CircularProgressIndicator() },
        error = { Text("Could not load image") }
    )
}

De status rechtstreeks lezen

Gebruik voor volledige controle de API rememberAsyncImagePainter en inspecteer de state. De status is een gesloten type met de gevallen Loading, Success, Error en Empty.

Zo kun je je eigen lay-out, animaties of analyses aansturen op basis van wat er is gebeurd.

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import coil3.compose.AsyncImagePainter
import coil3.compose.rememberAsyncImagePainter

@Composable
fun StateAwareImage(url: String) {
    val painter = rememberAsyncImagePainter(model = url)
    val state = painter.state.collectAsState().value

    when (state) {
        is AsyncImagePainter.State.Loading -> { /* show spinner */ }
        is AsyncImagePainter.State.Error -> { /* show error UI */ }
        else -> Image(painter = painter, contentDescription = null)
    }
}

Een glans-effect als tijdelijke afbeelding tonen

Een populair patroon is een glans-effect: een geanimeerd grijs kleurverloop dat suggereert dat de inhoud eraan komt. Je kunt een eenvoudige versie bouwen met een effen gekleurd vlak achter de laadstatus.

Hier gebruiken we tijdens het laden SubcomposeAsyncImage met een gekleurd vlak. Vervang het vlak door een bibliotheek voor glans-effecten als je de animatie wilt toevoegen.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import coil3.compose.SubcomposeAsyncImage

@Composable
fun ShimmerImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = null,
        loading = {
            androidx.compose.foundation.layout.Box(
                Modifier.fillMaxSize()
                    .background(MaterialTheme.colorScheme.surfaceVariant)
            )
        }
    )
}

Een null- of leeg model afhandelen

Wat doe je als je nog geen URL hebt, bijvoorbeeld bij een gebruiker zonder profielfoto? Als je null als model doorgeeft, wordt de tekenbron voor fallback gebruikt, of die voor error als er geen fallback is ingesteld.

Zo hoef je null niet speciaal in je eigen code af te handelen; laat Coil een standaardavatar tonen.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun ProfilePicture(photoUrl: String?) {
    // If photoUrl is null, Coil shows the fallback default avatar.
    AsyncImage(
        model = photoUrl,
        contentDescription = "Profile picture",
        fallback = painterResource(R.drawable.default_avatar),
        error = painterResource(R.drawable.default_avatar)
    )
}

Naar fouten luisteren met een listener

Soms moet je in code reageren wanneer het laden mislukt, bijvoorbeeld om het te loggen of opnieuw te proberen. ImageRequest.Builder accepteert een listener met terugbelacties voor geslaagd laden en fouten.

Houd deze terugbelacties licht; ze worden uitgevoerd op de hoofdthread.

import android.content.Context
import android.util.Log
import coil3.request.ImageRequest

fun loggedRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .listener(
            onError = { _, result ->
                Log.e("Coil", "Load failed", result.throwable)
            },
            onSuccess = { _, _ ->
                Log.d("Coil", "Loaded $url")
            }
        )
        .build()

Kleurfilters en tinten toepassen

Tijdelijke tekenbronnen en fouttekenbronnen zien er vaak beter uit wanneer ze een tint krijgen die bij je thema past. Je kunt een ColorFilter toepassen op een AsyncImage. Dat is ideaal voor monochrome terugvalpictogrammen die zich moeten aanpassen aan de lichte en donkere modus.

Pas het filter alleen toe op de tijdelijke of foutweergave waarvoor je het nodig hebt; bij echte foto's laat je het meestal weg.

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun TintedFallback(url: String?) {
    AsyncImage(
        model = url,
        contentDescription = null,
        error = painterResource(R.drawable.ic_image_placeholder),
        colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant)
    )
}

Een robuuste afbeeldingscomponent

Laten we een herbruikbare component samenstellen die elke status netjes afhandelt: een achtergrond tijdens het laden, een terugvaloptie bij fouten, een vloeiende overgang en bijsnijden. Voeg deze toe aan een lijst en je hoeft je nooit meer zorgen te maken over lege gaten.

import androidx.compose.foundation.layout.size
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.res.painterResource
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ResilientImage(url: String?, size: Int = 96) {
    val context = LocalContext.current
    AsyncImage(
        model = ImageRequest.Builder(context)
            .data(url)
            .crossfade(true)
            .build(),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        placeholder = painterResource(R.drawable.placeholder_gray),
        error = painterResource(R.drawable.image_broken),
        fallback = painterResource(R.drawable.default_avatar),
        modifier = Modifier.size(size.dp)
    )
}

Korte controle

Je geeft model = null door aan AsyncImage. Welke drawable toont Coil standaard?

Beantwoord dit in de interactieve les

Samenvatting

Je hebt het laden van afbeeldingen foutbestendig gemaakt. De belangrijkste punten:

placeholder wordt tijdens het laden getoond, error bij een fout en fallback wanneer het model null is.
Stel ze in op AsyncImage of op de ImageRequest.
Met SubcomposeAsyncImage kun je per status echte composables opgeven, zoals een laadindicator of shimmer-effect.
rememberAsyncImagePainter stelt de ruwe state beschikbaar voor volledige controle.
Gebruik een listener voor een verzoek om laadresultaten te loggen of erop te reageren.

Hierna behandelen we caching en prestaties, zodat afbeeldingen de tweede keer direct laden.

Gratis beginnen

Leer Kotlin met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 36
Lessen: 152

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Placeholders en fouttoestanden” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Placeholders en fouttoestanden”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 4 lessen.

Wat leer ik in “Placeholders en fouttoestanden”?

Elegant omgaan met laden en fouten. Je oefent met Android Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Android Academy te beginnen?

Ervaring vooraf is niet nodig. Android Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Placeholders en fouttoestanden”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Android Academy?

Ja. Elke les over Android Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Android Academy