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:
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 instanceImageLoader 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 callbackimageLoader.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 synchronouslyBitmap 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 sizeImageSize 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 sizeImageSize 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/
