Afbeeldingen laden met Coil
Laad en cache netwerkafbeeldingen efficiënt met Coil. Pas transformaties toe (CircleCrop, RoundedCorners) en handel placeholders en fouten af.
Afbeeldingen laden met Coil is een gratis Android Academy-les op CoddyKit. Dit is les 2 van 6. 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 6 lessen.
Waarom een afbeeldingsbibliotheek?
Afbeeldingen van internet laden is verrassend complex:
- Downloaden op een achtergrondthread
- Opslaan in de schijf- en geheugencache
- Efficiënt decoderen (OOM-crashes voorkomen)
- Een tijdelijke afbeelding tonen tijdens het laden
- Fouten afhandelen (kapotte link, geen netwerk)
Coil regelt dit allemaal met één regel code.
Wat is Coil?
Coil (Coroutine Image Loader) is een moderne Android-bibliotheek voor het laden van afbeeldingen, gebouwd voor Kotlin en Coroutines.
- Lichtgewicht — kleiner dan Glide of Picasso
- Kotlin als uitgangspunt, met ondersteuning voor coroutines
- Houdt rekening met de levenscyclus — annuleert laadbewerkingen automatisch
- Ondersteunt GIF, SVG en videoframes
Coil toevoegen
Voeg de afhankelijkheid toe in 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" />Afbeeldingen basaal laden
Laad een afbeelding in een ImageView met één regel:
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
}Laden in een RecyclerView
Coil annuleert wachtende laadbewerkingen automatisch wanneer een ViewHolder opnieuw wordt gebruikt — zo verschijnen er geen verkeerde afbeeldingen in de verkeerde rijen:
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
}
}Transformaties
Pas transformaties toe op geladen afbeeldingen:
CircleCropTransformation()— ronde afbeelding (perfect voor avatars)RoundedCornersTransformation(radius)— afgeronde hoekenBlurTransformation(context, radius)— vervagingseffect
Voorbeeld van een transformatie
Een ronde avatar van een gebruiker weergeven:
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)
}Gedrag van de cache
Coil slaat afbeeldingen automatisch op in twee soorten caches:
- Geheugencache — het snelst, wordt gewist wanneer de app wordt beëindigd
- Schijfcache — blijft bewaard tussen het starten van de app, standaard 250 MB
Als dezelfde URL twee keer wordt geladen, komt de tweede keer uit de cache — er wordt geen netwerkaanvraag gedaan.
Laden vanuit verschillende bronnen
Coil kan afbeeldingen uit verschillende bronnen laden, niet alleen uit URL's:
// 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)Korte controle
Welke Coil-transformatie zou je gebruiken om een profielfoto van een gebruiker als cirkel weer te geven?
Samenvatting: afbeeldingen laden met Coil
Je kunt nu efficiënt netwerkafbeeldingen weergeven:
- Voeg Coil toe met één Gradle-afhankelijkheid
imageView.load(url) { }— laden met één regel- Afbeeldingen als tijdelijke aanduiding en terugvalafbeeldingen bij fouten
- Transformaties: CircleCrop, RoundedCorners, Blur
- Automatisch cachen in het geheugen en op schijf
- Werkt met URL's, URI's, bestanden, drawables en bitmaps
Volgende stap: fouten netjes afhandelen en gebruikers duidelijke feedback geven.
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
Veelgestelde vragen
Is de les “Afbeeldingen laden met Coil” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Afbeeldingen laden met Coil”, 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 6 lessen.
Wat leer ik in “Afbeeldingen laden met Coil”?
Laad en cache netwerkafbeeldingen efficiënt met Coil. Pas transformaties toe (CircleCrop, RoundedCorners) en handel placeholders en fouten af. 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 6.
Hoe lang duurt de les “Afbeeldingen laden met Coil”?
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
- Retrofit en REST-API's
- Afbeeldingen laden met Coil
- Foutafhandeling en UX
- Pushmeldingen
- WorkManager en achtergrondtaken
- Publiceren in de Play Store