Introducing Coil

An image loading library for Android backed by Kotlin Coroutines. Coil is:

• Fast: Coil performs several optimizations, including memory and disk caching, downsampling the image in memory, re-using bitmaps, automatically pausing/canceling requests, and more.

• Lightweight: Coil adds ~2000 methods to your APK (for apps that already use OkHttp and Coroutines), comparable to Picasso and significantly less than Glide and Fresco.

• Easy to use: Coil's API leverages Kotlin's language features for simplicity and minimal boilerplate.

• Modern: Coil is Kotlin-first and uses modern libraries including Coroutines, OkHttp, Okio, and AndroidX Lifecycles.

The Coil is an acronym for Coroutine Image Loader.

The Coil Requires software that runs AndroidX, has at least SDK 14+, and uses Java 8 bytecode.

Setup Coil In Android

To use the Coil library in your Android application, add the following line to the build. Gradle file

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

Then download some images and display them in ImageView.

Basic Usage

Coil provides an extension function load for ImageView. Coil supports loading 7 types of data:

• String (mapped to a Uri)

• HttpUrl

• Uri (Android resource, content, file, HTTP, HTTPS schemes only)

• File

• @DrawableRes Int

• Drawable

• Bitmap

And of course, I will model String mapped to a Uri for you.

lateinit var imageView : ImageView
    val url = "https://i.pinimg.com/originals/d5/92/bb/d592bb659a23b715659f9fa1b7ed8798.jpg"
​
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        imageView = findViewById(R.id.imageView)
        imageView.load(url)
    }

The result is quite beautiful.

Custom Requests

The Coil is a bit different from Picasso and Glide's custom. Coil automatically detects the scale type; the rest of the image placeholder is the same as other libraries.

imageView.load(url) {
    placeholder(R.drawable.ic_launcher_background)
}

It doesn't take much time to create an animation load.

imageView.load(url) {
    placeholder(R.drawable.ic_launcher_background)
    crossfade(true)
    crossfade(1000)
}

it's great, isn't it?

Four Transformations.

Coil strength is not only that. Coil supports 4 types of transformations: blur, circle crop, grayscale, and rounded corners. Transformations allow you to modify the pixel data of an image before the Drawable is returned from the request.

Blur

It was a Transformation that applied a Gaussian blur to an image.

imageView.load(url) {
    transformations(BlurTransformation(context = applicationContext))
}

We can customize your opacity by passing the following parameter:

• Radius: The radius of the blur.

• Sampling: The sampling multiplier is used to scale the image. Values 1 will downscale the image. Values between 0 and 1 will upscale the image.

imageView.load(url) {
    transformations(BlurTransformation(context = applicationContext,5f,1f))
}

Circle crop

A Transformation that crops an image using a centered circle as the mask.

imageView.load(url) {
    transformations(CircleCropTransformation())
}

Grayscale

A Transformation that converts an image to shades of gray.

imageView.load(url) {
    transformations(GrayscaleTransformation())
}

Rounded corners

A Transformation that crops the image to fit the target's dimensions and rounds the image's corners.

imageView.load(url) {
    transformations(RoundedCornersTransformation(20f))
}

We can round each edge with different proportions by adding numbers sequentially: topLeft,topRight,bottomLeft,bottomRight.

imageView.load(url) {
            transformations(RoundedCornersTransformation(
                100f,10f,23.0f,52))
}

Mutil Transformations.

These 4 types can be used individually and can also be combined.

imageView.load(url) {
    transformations(
        CircleCropTransformation(),
        GrayscaleTransformation(),
        BlurTransformation(applicationContext)
        )
}

The result isn't pretty, but at least we understand. We can put it together.