Skip to main content

Coil 3 Image Loading in Kotlin Multiplatform (KMM) – A Complete Guide

Coil 3 Image Loading in Kotlin Multiplatform (KMM) – Complete Guide | KMP with Suraj

Coil 3 Image Loading in Kotlin Multiplatform (KMM) – A Complete Guide

Author: Suraj Sharma – kmpwithsuraj.com

Introduction

Loading images efficiently in a Kotlin Multiplatform Mobile (KMM) project can be challenging. You need a solution that works across Android, iOS, Desktop, and Web. Coil 3 v3.3.0 is a lightweight, Kotlin-first image loading library designed for Compose Multiplatform. It works perfectly with Ktor v3.3.0 for network requests. Whether you are building profile screens, product catalogs, or news feeds, Coil 3 makes image loading simple with support for placeholders, error handling, caching, and animations.

Coil 3 v3.3.0 and Ktor v3.3.0 Dependencies

Add these entries in your libs.versions.toml:

# ==============================
# Coil 3 Image Loading Setup
# ==============================
coil3 = "3.3.0"
coil3-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil3" }
coil3-compose       = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil3" }

# ==============================
# Ktor HTTP Clients
# ==============================
ktor = "3.3.0"
ktor-client-okhttp  = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }   # Android
ktor-client-darwin  = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }   # iOS
ktor-client-cio     = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }      # Desktop (JVM)
ktor-client-js      = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }      # Web

Build Script Setup

Add Coil 3 v3.3.0 and Ktor v3.3.0 dependencies in your build.gradle.kts:

androidMain.dependencies {
    implementation(compose.preview)
    implementation(libs.androidx.activity.compose)
    implementation(libs.ktor.client.okhttp)
}

commonMain.dependencies {
    implementation(compose.runtime)
    implementation(compose.foundation)
    implementation(compose.material3)
    implementation(compose.ui)
    implementation(compose.components.resources)
    implementation(compose.components.uiToolingPreview)
    implementation(libs.androidx.lifecycle.viewmodelCompose)
    implementation(libs.androidx.lifecycle.runtimeCompose)
    implementation(libs.coil3.network.ktor)
    implementation(libs.coil3.compose)
}

jvmMain.dependencies {
    implementation(compose.desktop.currentOs)
    implementation(libs.kotlinx.coroutinesSwing)
    implementation(libs.ktor.client.cio)
}

iosMain.dependencies {
    implementation(libs.ktor.client.darwin)
}

wasmJsMain.dependencies {
    implementation(libs.ktor.client.js)
}

Tip: Coil 3 works best if your project already uses Ktor for API calls. This ensures smooth network image fetching across platforms.

Using AsyncImage in Compose Multiplatform

Example: Loading a news banner image with Coil 3 v3.3.0:

AsyncImage(
    model = url, 
    contentDescription = "News Banner",
    placeholder = painterResource(Res.drawable.placeholder),
    error = painterResource(Res.drawable.image_error),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .fillMaxWidth()
        .height(180.dp)
        .clip(RoundedCornerShape(16.dp))
)

Explanation:

  • model – Image URL, with automatic caching.
  • placeholder – Temporary image while loading.
  • error – Displayed if loading fails.
  • contentScale – Adjusts how the image fits the space.
  • clip – Rounded corners for better UI.

Why Coil 3 is Ideal for KMM Developers

  • Cross-platform ready: Works on Android, iOS, Desktop, and Web.
  • Network integration: Perfect with Ktor v3.3.0.
  • Lightweight & Kotlin-first: Minimal boilerplate.
  • AsyncImage support: Placeholders and error handling improve UX.
  • Customizable: Rounded corners, circle crop, borders, crossfade animations.

Example Project

Check a working Coil 3 v3.3.0 + KMM example project here: GitHub Repo

Conclusion

Using Coil 3 v3.3.0 in KMM projects is a clean and efficient solution for image loading on multiple platforms. It simplifies network image fetching, caching, and UI rendering in Compose, saving time for KMM and Compose Multiplatform developers.

For more tutorials, tips, and Kotlin Multiplatform insights, visit KMP with Suraj.

Comments

Post a Comment

Popular posts from this blog

Fixing the Razorpay-Pod Issue in Kotlin Multiplatform Mobile (KMM) for iOS

Fixing Razorpay CocoaPod Integration in KMM for iOS Fixing Razorpay CocoaPod Integration in KMM for iOS Kotlin Multiplatform Mobile (KMM) enables developers to share code between Android and iOS. However, integrating certain CocoaPods, such as ** razorpay-pod **, can be challenging due to naming conventions. This guide provides a step-by-step solution to resolve these issues, ensuring a smooth integration of Razorpay's SDK into your KMM iOS application. Understanding the Issue When integrating ** razorpay-pod ** into a KMM project, developers may encounter errors related to unresolved modules. This often stems from the hyphen in the pod's name, which can cause KMM to misinterpret the module structure, leading to import issues. Solution: Explicitly Defining the moduleName Step 1: Update Your Gradle Configuration In your shared module's build.gradle.kts file, add the following code to explic...
Post a Comment
Read more

How to Load Images in Kotlin Multiplatform (KMM) Using Coil

How to Load Images in Kotlin Multiplatform (KMM) Using Coil How to Load Images in Kotlin Multiplatform (KMM) Using Coil Feature Description Library Used Coil (Image Loading Library) Platforms Supported Android, iOS, Web, Desktop (via KMM) Key Benefits Fast, lightweight, easy integration Implementation Kotlin Multiplatform with Jetpack Compose & SwiftUI Use Cases Displaying remote/local images, caching, placeholders Introduction to KMM and Coil Kotlin Multiplatform (KMM) allows developers to build cross-platform apps for Android, iOS, Web, and Desktop with a single codebase. One challenge in KMM is image loading since different platforms handle images differently. The Coil image loading library , originally built for Android, now supports Kotlin Multiplatform and integrates smoothly with Jetpack Compose, offering a robust solution. Why Use Coil ...
Post a Comment
Read more

How to Integrate Razorpay in Kotlin Multiplatform Mobile (KMM) for WebApp JS Browser Target

Integrate Razorpay in KMM for WebApp JS Browser Target How to Integrate Razorpay in Kotlin Multiplatform Mobile (KMM) for WebApp JS Browser Target If you're working with Kotlin Multiplatform Mobile (KMM) and want to integrate Razorpay for payments, you might find plenty of documentation for Android and iOS. However, integrating Razorpay into the WebApp JS Browser target isn't as straightforward. In this blog post, I'll guide you through the steps to get Razorpay working in your KMM project for the WebApp JS Browser target. Why Kotlin Multiplatform Mobile (KMM)? KMM allows you to share business logic across Android, iOS, Web, and other platforms, making it easier to maintain a single codebase. But, when it comes to platform-specific features like payments, you need to implement certain functionality separately for each platform. Integrating Razorpay in the JS Browser Target To integrate Razo...
Post a Comment
Read more