Jetpack Compose has simplified Android UI development, but handling images remains a critical aspect of most apps. When it comes to loading images in Jetpack Compose, my go-to solution is Coil. A fast, lightweight, and Kotlin-first image loading library.

In this article, I’ll walk you through why Coil is my favorite library for image loading in Compose, and how to integrate it effectively into your projects.

Why Choose Coil?

Coil, short for Coroutine Image Loader, is designed with modern Android in mind. It leverages Kotlin Coroutines for efficient asynchronous image loading, making it a perfect match for Compose’s declarative nature.

What makes Coil particularly appealing is its lightweight design, offering a significantly smaller dependency footprint compared to larger libraries like Glide or Picasso. Despite its small size, Coil doesn’t compromise on capability. It is deeply integrated with Kotlin, leveraging both Coroutines and Flow to provide an intuitive, clean API that simplifies asynchronous operations.

The library requires no additional configuration to work within Compose, offering developers a seamless experience from the start. Performance-wise, Coil excels in areas like image caching, memory management and decoding optimizations, ensuring fast, fluid UI interactions even when dealing with complex images.

Getting Started with Coil in Jetpack Compose

First, add the Coil dependency to your project:

implementation("io.coil-kt:coil-compose:2.7.0")

Once the dependency is added, loading images in Compose becomes very easy.

@Composable
fun CoilImageExample(imageUrl: String) {
    AsyncImage(
        model = imageUrl,
        contentDescription = "Sample image"
    )
}

AsyncImage does all the heavy work for you. Just provide a URL (or any image source), and Coil will handle the loading, caching, and displaying.

Customizing Image Loading

One of Coil’s strengths is its flexibility. You can customize how images are loaded and displayed. For example, adding placeholders, handling loading and error states, or transforming images:

AsyncImage(
    model = imageUrl,
    contentDescription = "Sample image",
    placeholder = painterResource(R.drawable.placeholder),
    error = painterResource(R.drawable.error),
    onLoading = { /* Show loading spinner */ },
    onError = { /* Handle error */ },
    onSuccess = { /* Do something on success */ }
)

This makes it incredibly easy to manage different image states and ensure a smooth user experience. For instance, in my case, I decided to fill the background of the image container with the dominant color of the loaded image, creating a more visually cohesive design.

Here’s how I implemented this feature:

var backgroundColor by remember {
    mutableStateOf(Color.White)
}

AsyncImage(
    model = imageUrl,
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .fillMaxSize()
        .background(backgroundColor),
    onSuccess = {
        val bitmap = (it.result.drawable as BitmapDrawable).bitmap.copy(
            Bitmap.Config.ARGB_8888, true
        )
        backgroundColor = ImageUtils.parseColorSwatch(
            Palette.from(bitmap).generate().dominantSwatch
        )
    },
)

object ImageUtils {
    fun parseColorSwatch(color: Palette.Swatch?): Color {
        return if (color != null) {
            val parsedColor = Integer.toHexString(color.rgb)
            return Color(parseColor("#$parsedColor"))
        } else {
            Color.White
        }
    }
}

In this example, when an image is successfully loaded, I extract the dominant color from the image using the Palette library

  implementation("androidx.palette:palette-ktx:1.0.0")

and update the background color accordingly.

Advanced Coil Features in Jetpack Compose

Image Transformations

Coil supports various transformations like circular cropping, blurring, and grayscale. Here’s how you can apply transformations to your images:

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .transformations(CircleCropTransformation())
        .build(),
    contentDescription = "Circular cropped image"
)

With the above example, the image will be displayed as a circular crop.

ImageLoader for GIFs, SVGs and VideoFrames

One of the standout features of Coil is its ability to handle more than just static images. With ImageLoader, Coil supports a wide variety of formats, making it an extremely versatile solution for all your image-related needs in Jetpack Compose. It can handle various image formats, including:

• GIFs: Coil seamlessly loads and displays animated GIFs.
• SVGs: Coil efficiently renders SVGs, maintaining their quality across different screen sizes.
• VideoFrames: Coil allows you to extract individual frames from videos and display them as static images.

This broad format support makes Coil a versatile solution for various image-related needs in your Compose apps.

Let’s see an example of how to load a GIF. Fisrt add the dependency:

implementation("io.coil-kt:coil-gif:2.7.0")

Define the Painter with the right ImageLoader and use it:

 val painter = rememberAsyncImagePainter(
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://example.com/image.gif")
                .build(),
            imageLoader = ImageLoader.Builder(context)
                      .components {
                          if (SDK_INT >= 28) {
                              add(ImageDecoderDecoder.Factory())
                          } else {
                              add(GifDecoder.Factory())
                          }
                      }
                      .build()
        )

        Image(
            painter = painter,
            contentDescription = stringResource(R.string.description)
        )

Important Note:

Coil recommends maintaining a single ImageLoader instance across your entire application to ensure consistency and prevent potential conflicts. This approach optimizes performance and avoids issues (like one I encountered when integrating Coil with Google Maps in the same app).

There are several ways to implement a single ImageLoader:

• From Application Class:
  You can create the ImageLoader in your Application class by implementing the ImageLoaderFactory interface. This ensures the same instance is used throughout your app’s lifecycle.

class MyApplication : Application(), ImageLoaderFactory {
    override fun newImageLoader(): ImageLoader {
        return ImageLoader.Builder(this)
            .crossfade(true)
            .build()
    }
}

• In Your MainActivity:
  You can set the ImageLoader in your MainActivity and keep it available globally:

Coil.setImageLoader(ImageLoader.Builder(this)
   .crossfade(true)
   .build()
)

• Using Dependency Injection:
  Alternatively, you can integrate the ImageLoader into your app as a singleton using a dependency injection (DI) framework like Hilt or Koin. This ensures the ImageLoader is provided to any part of your app while maintaining a single instance.

By following these practices, you ensure that Coil performs efficiently across your app and avoids any potential issues caused by using multiple instances of the ImageLoader.

Conclusion

Coil stands out as a powerful, lightweight, and Kotlin-first image loading library, making it my preferred solution for managing images in Jetpack Compose. Its seamless integration with Compose simplifies development, while its focus on performance, ensures smooth, responsive UI interactions, even with complex image scenarios.

Coil’s versatility extends beyond static images, with support for formats like GIFs, SVGs, and video frames. To maximize performance and prevent potential conflicts, it’s important to maintain a single ImageLoader instance throughout your application.

By incorporating Coil and following these best practices, you can streamline image handling, boost app performance, and create visually appealing user interfaces with ease. Coil’s combination of features and benefits makes it a valuable asset for our Jetpack Compose development journey.

If you found this article interesting, feel free to follow me for more insightful content on Android development and Jetpack Compose. I publish new articles almost every week. Don’t hesitate to share your comments or reach out to me on LinkedIn for further discussions.

Have a great day!

This article is previoulsy published on proandroiddev.com