Asynchronous Image Loading Using Libraries
In this part, we are going to talk about some image libraries using which we can load image(s) asynchronously, can cache images and also can download images into the local storage.
Almost every android app has a need to load remote images. While loading remote images, we have to take care of below things:
1.) Image loading process must be done in background (i.e. asynchronously) to avoid blocking UI main thread.
2.) Image recycling image should be done.
3.) Image should be displayed once its loaded successfully.
4.) Images should be cached in local memory for the later use.
5.) If remote image gets failed (due to network connection or bad url or any other reasons) to load then it should be managed perfectly for avoiding duplicate requests to load the same again, instead it should load if and only if net connection is available.
6.) Memory management should be done efficiently.
In short, we have to write a code to manage each and every aspects of image loading but there are some awesome libraries available, using which we can load/download image asynchronously. We just have to call the load image method and success/failure callbacks.
Asynchronous image loading
Imagine a case where we are having 50 images and 50 titles and we try to load all the images/text into the listview, it won’t display anything until all the images get downloaded.
Here Asynchronous image loading process comes in picture. Asynchronous image loading is nothing but a loading process which happens in background so that it doesn’t block main UI thread and let user to play with other loaded data on the screen. Images will be getting displayed as and when it gets downloaded from background threads.
Below are aome Asynchronous image loading libraries on github and from some google members.
1.) Nostra’s Universal Image loader – https://github.com/nostra13/Android-Universal-Image-Loader
2.) Picasso – http://square.github.io/picasso/
3.) Volley – By Android team members @ Google
4.) Novoda’s Image loader – https://github.com/novoda/ImageLoader
Let’s have a look at examples using Picasso and Universal Image loader libraries.
Example 1: Nostra’s Universal Image loader
Step 1: Initialize ImageLoader configuration
public class MyApplication extends Application{
@Override
public void onCreate() {
// TODO Auto-generated method stub
super.onCreate();
// Create global configuration and initialize ImageLoader with this configuration
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext()).build();
ImageLoader.getInstance().init(config);
}
}
Step 2: Declare application class inside Application tag in AndroidManifest.xml file
<application android:name="MyApplication">
Step 3: Load image and display into ImageView
ImageLoader.getInstance().displayImage(objVideo.getThumb(), holder.imgVideo);
Now, Universal Image loader also provides a functionality to implement success/failure callback to check whether image loading is failed or successful.
ImageLoader.getInstance().displayImage(photoUrl, imgView,
new ImageLoadingListener() {
@Override
public void onLoadingStarted(String arg0, View arg1) {
// TODO Auto-generated method stub
findViewById(R.id.EL3002).setVisibility(View.VISIBLE);
}
@Override
public void onLoadingFailed(String arg0, View arg1,
FailReason arg2) {
// TODO Auto-generated method stub
findViewById(R.id.EL3002).setVisibility(View.GONE);
}
@Override
public void onLoadingComplete(String arg0, View arg1,
Bitmap arg2) {
// TODO Auto-generated method stub
findViewById(R.id.EL3002).setVisibility(View.GONE);
}
@Override
public void onLoadingCancelled(String arg0, View arg1) {
// TODO Auto-generated method stub
findViewById(R.id.EL3002).setVisibility(View.GONE);
}
});
Example 2: Picasso
Image loading straight way:
Picasso.with(context).load("http://postimg.org/image/wjidfl5pd/").into(imageView);
Image re-sizing:
Picasso.with(context) .load(imageUrl) .resize(100, 100) .centerCrop() .into(imageView)
Now Can you decide which library you would use? Selection of the library is always depends on the requirement. Let’s look at the few fact points about each library so that you would able to compare exactly and can take decision.
Picasso:
It’s just a one liner code to load image using Picasso.
No need to initialize ImageLoader and to prepare a singleton instance of image loader.
Picasso allows you to specify exact target image size. It’s useful when you have memory pressure or performance issues, you can trade off some image quality for speed.
Picasso doesn’t provide a way to prepare and store thumbnails of local images.
Sometimes you need to check image loading process is in which state, loading, finished execution, failed or cancelled image loading. Surprisingly It doesn’t provide a callback functionality to check any state. “fetch()” dose not pass back anything. “get()” is for synchronously read, and “load()” is for asynchronously draw a view.
Universal Image loader (UIL):
It’s the most popular image loading library out there. Actually, it’s based on the Fedor Vlasov’s project
which was again probably a very first complete solution and also a most voted answer (for the image loading solution) on Stackoverflow.
UIL library is better in documentation and even there’s a demo example which highlights almost all the features.
UIL provides an easy way to download image.
UIL uses builders for customization. Almost everything can be configured.
UIL doesn’t not provide a way to specify image size directly you want to load into a view. It uses some rules based on the size of the view. Indirectly you can do it by mentioning ImageSize argument in the source code and bypass the view size checking. It’s not as flexible as Picasso.
Volley:
It’s officially by Android dev team, Google but still it’s not documented.
It’s just not an image loading library only but an asynchronous networking library
Developer has to define ImageCache class their self and has to initialize ImageLoader object with RequestQueue and ImageCache objects.
Read more on Image loading in my previous blog posts Image loading and Caching form web and Implementing Async Image Loading
Related Posts
Asynchronous Image Loading Using Libraries
Implementing Asynchronous Image Loading In Listview
Image Loading And Chaching From Web
Image Change Using Button Pressed in iPhone
Loading HTML data using UIWebView in iPhone Development
Move Image Using Touch Function In iPhone
Downloading An Image From The Server And Displaying It On Screen
Using Bitmap Class Object To Draw An Image