How to Lazy Load Images in Android ListView?

Many times, the UI of an application gets blocked while downloading images from the internet. This problem can be solved by implementing lazy loading of images in the list view while displaying the text. It is a strategy to identify resources as unimportant and load them only when needed. It’s a way to shorten the length of the critical rendering path, which translates into reduced page load times. More conceptual details on lazyloading is available on What is Lazy Loading.

What We are Going to Build in this Article?

There are various libraries to implement lazy loading in android. One of them is using the universal image loader library. We’ll be implementing it in this article.

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.

Step 2: Adding Layout

Add ListView or RecyclerView along with the required images to be displayed. References to both the views are as follows: 

• Android Listview in Java with Example
• RecyclerView in Android with Example

Step 3: Adding permissions and dependencies

Add the following dependency in the build.gradle file: 

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

And the following permissions in the manifest.xml file

<uses-permission android:name = “android.permission.INTERNET”/>
<uses-permission android:name = “android.permission.WRITE_EXTERNAL_STORAGE”/> 

Step 4: Implementing the Java Code

Following is the pseudo-Java code which can to used to deploy lazy loading in any android application:

Java

```
// Get singleton instance
ImageLoader imageLoader = ImageLoader.getInstance();
```
```
// Load image, decode it to Bitmap and
// display Bitmap in ImageView (or any other view
// which implements ImageAware interface)
imageLoader.displayImage(imageUri, imageView);
```
```
// Load image, decode it to Bitmap and return Bitmap to callback
imageLoader.loadImage(imageUri, new SimpleImageLoadingListener() {
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        // Do whatever you want with Bitmap
    }
});
```
```
// Load image, decode it to Bitmap
// and return Bitmap synchronously
Bitmap bmp = imageLoader.loadImageSync(imageUri);
```

```
// Load image, decode it to Bitmap and display
// Bitmap in ImageView (or any other view
// which implements ImageAware interface)
imageLoader.displayImage(imageUri, imageView, options, new ImageLoadingListener() {
    @Override
    public void onLoadingStarted(String imageUri, View view) {
        ...
    }
    @Override
    public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
        ...
    }
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        ...
    }
    @Override
    public void onLoadingCancelled(String imageUri, View view) {
        ...
    }
}, new ImageLoadingProgressListener() {
    @Override
    public void onProgressUpdate(String imageUri, View view, int current, int total) {
        ...
    }
});
```
```
// Load image, decode it to Bitmap and return Bitmap to callback

// result Bitmap will be fit to this size
ImageSize targetSize = new ImageSize(80, 50);
imageLoader.loadImage(imageUri, targetSize, options, new SimpleImageLoadingListener() {
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        // Do whatever you want with Bitmap
    }
});
```
```
// Load image, decode it to Bitmap and return Bitmap synchronously

// result Bitmap will be fit to this size
ImageSize targetSize = new ImageSize(80, 50);
Bitmap bmp = imageLoader.loadImageSync(imageUri, targetSize, options);
```

Alternative Libraries

[Fresco]  https://github.com/facebook/fresco
[Glide]  https://github.com/bumptech/glide
[Picasso]  https://github.com/square/picasso
[Volley : ImageLoader]  https://android.googlesource.com/platform/frameworks/volley/