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
android:id = "@+id/container"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< 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" />
< 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() {
lateinit var imageView: ImageView
lateinit var displayOptions: DisplayImageOptions
lateinit var imageLoader: ImageLoader
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
imageView = findViewById(R.id.idIVimage)
imageLoader = ImageLoader.getInstance()
imageLoader.init(ImageLoaderConfiguration.createDefault(applicationContext))
displayOptions = DisplayImageOptions.Builder()
.showStubImage(R.drawable.ic_error)
.showImageForEmptyUri(R.drawable.ic_error)
.cacheInMemory().build();
imageLoader.displayImage(imgUrl, imageView, displayOptions, null )
}
}
|
Now run your application to see the output of it.
Output:
Share your thoughts in the comments
Please Login to comment...