Skip to content
Related Articles

Related Articles

How to Use Universal Image Loader Library in Android?
  • Last Updated : 09 Dec, 2020

UIL (Universal Image Loader) is a similar library to that of Picasso and Glide which performs loading images from any web URL into ImageView of Android. 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. Features of UIL (universal Image Loader) library:

  • This library provides Multi-thread image loading.
  • Image caching can be done in memory and the user’s device.
  • Listening loading process (including downloading progress).
  • Many customizable features are available for every display image call.

Note that we are going to implement this project using the Java language. 

Step by Step Implementation

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 Java 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’

Step 3: Add internet permission in the AndroidManifest.xml file

Navigate to the app > Manifest to open the Manifest file. 

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
    package="com.gtappdevelopers.camviewlibrary">
  
    <!--Permission for internet-->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.CamViewLibrary">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

chevron_right


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. 

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Image view for loading our image-->
    <ImageView
        android:id="@+id/idImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name" />
  
</RelativeLayout>

chevron_right


Step 5: Initialize your ImageView and use UIL(Universal Image Loader) in the MainActivity.java file

Navigate to the app > java > your apps package name > MainActivity.java file. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
  
public class MainActivity extends AppCompatActivity {
  
    private ImageView img;
    DisplayImageOptions options;
    ImageLoader imageLoader;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // initialize image loader before using
        imageLoader = ImageLoader.getInstance();
        imageLoader.init(ImageLoaderConfiguration.createDefault(getApplicationContext()));
  
        // initialize imageview from activity_main.xml
        img = findViewById(R.id.idImageView);
          
        // URL for our image that we have to load..
          
        // with below method we are setting display option for our image..
        options = new DisplayImageOptions.Builder()
                  
                // stub image will display when your image is loading
                .showStubImage(R.drawable.ic_launcher_foreground)
                  
                // below image will be displayed when the image url is empty
                .showImageForEmptyUri(R.drawable.ic_launcher_background)
                  
                // cachememory method will caches the image in users external storage
                .cacheInMemory()
                  
                // cache on disc will caches the image in users internal storage
                .cacheOnDisc()
                  
                // build will build the view for displaying image..
                .build();
        // below method will display image inside our image view..
        imageLoader.displayImage(imageUri, img, options, null);
    }
}

chevron_right


Note: All drawables are present in the drawable folder. You can add the drawable in the drawable folder. To access the drawable folder. Navigate to app > res > drawables > this folder is having all your drawables. 

Output:

UIL Output

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :