Taking a look at Coil. An image loading library for Kotlin on Android.

Kudzai — Thu, 02 Jan 2020 16:11:45 +0000

Happy New Year everyone! If you're reading this, it probably means that its time to get back to the code editor. I recently discovered Coil, an image loading library, I thought I would explore it a little bit and share what I found. Ehem,

Coil: What is it?

Well, according to their documentation Coil stands for Coroutine Image Loader and it is an image loading library backed by Kotlin Coroutines. If you aren't familiar with Kotlin Coroutines, then fear not, these are just lightweight threads. Also knowledge of Coroutines isn't required to use this library so I will not be diving into the intricate details of Kotlin Coroutines.

But do we really need another image loading library?

You are probably wondering if we really need another image loading library in a world full of Glide and Picasso or Universal Image Loader - for those of you who have been developing on the Android platform for a while now😉. However two things caught my attention with regards to Coil and that is:

It is smaller in size compared to Glide, which was my image loading library of choice. And,
It is surprisingly very easy to use. You shall see further down in this article, that the library is very idiomatic, which is what Kotlin is all about and that is awesome.

Okay I'm sold, what next?

In order to use Coil in your project you need to have your project already using AndroidX. It must also compile with SDK level 29 as well as use Java 8.

If you satisfy the above per-requisites then you need to add in the following line to your application level dependencies in your build.gradle file before you can use the library:

implementation("io.coil-kt:coil:0.9.1")

This will include the default artifact with the Coil singleton. Just like that, you are ready to start easier and faster Image Loading in your Android applications.

Loading an Image

To load an image to an ImageView, Coil offers a nifty extension function called load().

Below is a code snippet of the library in action:

//Loading from a URL
imageView.load("https://via.placeholder.com/600/92c952")

//Loading from an image drawable
imageView.load(R.drawable.some_image_placeholder)

// Loading from a file
imageView.load(File("/path/to/some_image_placeholder.png"))

Walla! It's really that simple. You can't make this stuff up!

Under the hood, the load() function does a lot of things. Take for instance loading from a URL:

Coil creates a RequestDisposable object, which is basically an object responsible for connecting to the network.
The image specified in the URL is requested for over the network and the result is loaded onto a target.
In this case the instance of the ImageViewis the intended target(and hence the beauty of extension functions).

Let's explore a little more...

At this point, you are probably wondering how to make this library do certain things like configure a placeholder or maybe apply a transformation to circle crop your image.

Well its really easy. You just add in your configurations to a trailing lambda after the load() extension function.

Observe:

//Applying image loading with configurations
imageView.load("https://via.placeholder.com/600/92c952") {
    crossfade(true)
    placeholder(R.drawable.placeholder_image)
    transformations(CircleCropTransformation())
}

Very simple!.

As if that wasn't enough, Coil supports loading to custom targets.

Using the load() extension function from the Coil singleton, you just have something like:

//Custom targets
Coil.load("https://via.placeholder.com/600/92c952"){
    target{ drawable ->
        //Do something with result e.g apply a filter to greyscale image.
    }
}

You can even listen in for specific events like onSuccess, onStart, onError and onCancel, however I will not be getting into these in this article. You can let me know if you want me to dive deeper. And I will create a Coil party tricks 2 part article touching every aspect of the library I can find.

A little bit of more information on Transformations

The Coil library provides 4 transformations out of the box namely,

BlurTransformation - Applies a Gaussian Blur.
CircleCropTransformation - Crops and centers the image into a circle.
GrayscaleTransformation - Shades the image into grayscale.
RoundedCornersTransformation - Crops the image to fit the target's dimensions and rounds the corners of the image.

Other cool things to note 😎

There are a few cool other things to note about the Coil library.

Its support for extensions is massive and this allows for developers to support more file types in their projects to suit their needs.
Its has features which makes testing easier. You can basically mock instances of the ImageLoaderobject as it is an interface.
No annotation processing! And this is a big one. This means faster builds in your project in case you were using Glide, you know how important this is. They use Kotlin's extension functions feature.

In Conclusion

Coil is a pretty neat image loading library for Android. I am in no ways associated with Instacart however I am an advocate for cleaner code and I have always been lazy. I will 💜 anything that makes my life easier and Coil is that thing, atleast for image loading lol!

Please go forth and give it a try, maybe even migrate from your current Image Loading library.

If you would like to know more I have included a few links that may be use to you below:

Introducing Coil: Kotlin-first image loading on Android
Coil Documentation
Coil Github Project - Browse through the code.

Feel free to follow me on Twitter. I'm always up for a discussion.

DEV Community: Kudzai