Loading Images with Coil
Async image loading in Compose.
Why You Need an Image Loader
Most modern apps show images from the internet: profile photos, product pictures, article thumbnails. Downloading and decoding those images correctly is harder than it looks.
You have to fetch bytes over the network on a background thread, decode them into a bitmap, cache them so you don't refetch, and cancel the request if the user scrolls away. Doing this by hand is error-prone.
Coil (Coroutine Image Loader) handles all of this for you with a tiny, Compose-friendly API. In this lesson you'll load your first remote image.
Adding Coil to Your Project
Coil ships as a Gradle dependency. For Jetpack Compose you want the coil-compose artifact, which gives you the AsyncImage composable.
Add it to your module's build.gradle.kts. Coil 3 is the current major version and works across platforms; the Compose integration is what we use here.
// 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")
}All lessons in this course
- Loading Images with Coil
- Placeholders and Error States
- Caching and Performance
- Playing Audio and Video