How to Use COIL Image Loader Library in Android Apps?
COIL is an acronym for Coroutine Image Loader. COIL is one of the famous image loading libraries from URLs in Android. It is a modern library for loading images from the server. This library is used to load images from servers, assets folder as well as from the drawable folder in Android project. The important feature of this library is that it is fast, lightweight, and easy to use. In this article, we will see How to Use this Image Loader Library in Android Apps.
Why We Should use COIL for Loading Images?
COIL Image loading library is provided by Kotlin Coroutines which is used for loading images in Android. This library is specially designed for loading images in Kotlin. It is modern, easy to use, lightweight, and fast for loading images from the server. This is the new library and provides new optimization for loading images from the server very efficiently. As Kotlin is now been officially announced as the preferred language for Android development, that’s why for loading images we should prefer using COIL for loading images in Android.
What are the Advantages of using COIL over Picasso, Glide, and UIL?
- Google has officially announced Kotlin as a preferred language for Android development and COIL is the library that is better optimized with Kotlin. So the optimization of this library with Kotlin makes it easier to load images from the server.
- COIL loads images very faster with the number of optimizations which includes memory, disk caching, reusing of bitmaps, and down spacing the image in memory which makes it faster in comparison with other image loading libraries.
- COIL supports operations like circular cropping, rounded corners, grayscale, and custom transformations.
- COIL is Kotlin-First which makes it well optimised for Jetpack Compose and Android View-based UI development avoiding a lot of boilerplate codes.
- COIL adds ~2000 methods to your APK which are very less in number in comparison with Picasso, Glide, and UIL. This makes this library very lightweight and easy to use.
- COIL is the first image loading library which is completely introduced in Kotlin and it uses some modern libraries of Android such as Okio, OkHttp, and androidx lifecycles.
Step by Step Implementation of COIL Image Loading Library
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Note that select Kotlin as the programming language.
Step 2: Add dependency of Coil Image Loading library in build.gradle file
Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.
implementation("io.coil-kt.coil3:coil:3.0.4")
implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4")
After adding dependency click on the “sync now” option on the top right corner to sync the project.
Step 3: Adding internet permission in the AndroidManifest.xml file
Navigate to the app > Manifest to open the Manifest file. In the manifest file, we are adding internet permission to load images from the internet.
Add the following lines in your manifest file.
<uses-permission android:name="android.permission.INTERNET" />Step 4: Create a new ImageView in your activity_main.xml.
Navigate to the app > res > layout to open the activity_main.xml file. Below is the code for the activity_main.xml file.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
<!--ImageView is created below-->
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 5: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
package org.geeksforgeeks.demo
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.widget.ImageView
import coil3.load
import coil3.request.placeholder
class MainActivity : AppCompatActivity() {
// image url that we will load in our image view.
val imgurl = "https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// val created for our imageview and
// initializing it with image id.
val img = findViewById<ImageView>(R.id.imageView)
// below line is for loading
// image url inside imageview.
img.load(imgurl) {
// placeholder image is the image used
// when our image url fails to load.
placeholder(R.drawable.ic_launcher_background)
}
}
}
Output:
