Implement Universal Image Loader Library in Android using Kotlin

Last Updated : 13 Jun, 2022

Universal Image Loader library is also referred to as (UIL). It is similar to Picasso and Glide which is used to load the images from the URL within our image view inside our android application. This image loading library has been created to provide a powerful, flexible, and customizable solution to load images in Android from Server. This image loading library is being created by an indie developer and it is present in the top list of GitHub. In this article, we will take a look at the implementation of the UIL library within the android application using Kotlin.

Note: If you are looking to use the UIL library in android application using Java. Check out the following article: How to use UIL Image loader library in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

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 UIL Image library in build.gradle file

Navigate to the gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation ‘com.nostra13.universalimageloader:universal-image-loader:1.9.5’

After adding this dependency simply sync your project to install it.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--on below line we are creating 
        a simple text view for heading-->
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Universal Image Loader"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />

    <!--on below line we are creating an 
        image view for displaying image from url-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true" />
  
</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.nostra13.universalimageloader.core.DisplayImageOptions
import com.nostra13.universalimageloader.core.ImageLoader
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration

class MainActivity : AppCompatActivity() {

    // on below line we are creating 
    // a variable for our image view.
    lateinit var imageView: ImageView

    // on below line we are creating
    // a variable for display options.
    lateinit var displayOptions: DisplayImageOptions

    // on below line we are creating
    // a variable for image loader.
    lateinit var imageLoader: ImageLoader

    // on below line we are creating a variable for image url
    var 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)
        
        // on below line we are initializing 
        // our image view with its id.
        imageView = findViewById(R.id.idIVimage)

        // on below line we are 
        // initializing our image loader.
        imageLoader = ImageLoader.getInstance()

        // on below line we are initializing image loader with its configuration.
        imageLoader.init(ImageLoaderConfiguration.createDefault(applicationContext))

        // on below line we are initializing our display options
        displayOptions = DisplayImageOptions.Builder()

            // on below line we are adding a 
            // stub image as error image.
            .showStubImage(R.drawable.ic_error)

            // on below line we are adding an error
            // image this image will be displayed 
            // when the image url is empty
            .showImageForEmptyUri(R.drawable.ic_error)

            // on below line we are calling 
            // cache in memory and then calling build.
            .cacheInMemory().build();

        // on below line we are calling image loader
        // to display our image in our image view from image url
        imageLoader.displayImage(imgUrl, imageView, displayOptions, null)

    }
}