Setting up the Android Google Volley ImageLoader for NetworkImageView

Google Volley is awesome. If you're an Android developer and you've done AsyncTask and HttpClient stuff (and there is no avoiding it), prepare for a huge relief once you get up and running with Volley. All of the leg work has been handled for you when it comes to managing the threads, dealing with a JSON response, handling errors, and way more.

Using NetworkImageView

Included with the library is an extremely useful object called NetworkImageView. NetworkImageView is meant to be a direct replacement for the standard ImageView in scenarios when your image resource is coming from a network location (i.e. URL) rather than a static resource. In your layout file, it's as simple as changing the element from ImageView to NetworkImageView, for example:

    <ImageView
        android:id="@+id/twitter_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="6dip"
     />

Becomes

    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/twitter_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="6dip"
     />

The next step is to populate your element programatically using the URL of the image. This is straight forward as well, at least at first glance:

    NetworkImageView avatar = (NetworkImageView)view.findViewById(R.id.twitter_avatar);
    avatar.setImageUrl("http://someurl.com/image.png",mImageLoader);

And that's where just about every example on the web leaves it. But what about that mImageLoader variable?

Setting up the ImageLoader

It's more complicated than it appears. The ImageLoader class is actually responsible for setting up caching on the device, and initializing the object isn't trivial. To get going with the ImageLoader, start by declaring private variables for use in your class:

private RequestQueue mRequestQueue;
private ImageLoader mImageLoader;

Then in your constructor or OnCreate() method, initialize the objects using the following:

        mRequestQueue = Volley.newRequestQueue(context);
        mImageLoader = new ImageLoader(mRequestQueue, new ImageLoader.ImageCache() {
            private final LruCache<String, Bitmap> mCache = new LruCache<String, Bitmap>(10);
            public void putBitmap(String url, Bitmap bitmap) {
                mCache.put(url, bitmap);
            }
            public Bitmap getBitmap(String url) {
                return mCache.get(url);
            }
        });

Now you're free to use the magical NetworkImageView.setImageUrl() method as intended:

    NetworkImageView avatar = (NetworkImageView)view.findViewById(R.id.twitter_avatar);
    avatar.setImageUrl("http://someurl.com/image.png",mImageLoader);

Singleton Pattern

Google recommends that you use a common RequestQueue object for your app in the form of a Singleton. This is also something that is glossed over in examples, so have another one on us.

VolleySingleton.java

import android.content.Context;
package com.company.myapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.Volley;

public class VolleySingleton {
    private static VolleySingleton mInstance = null;
    private RequestQueue mRequestQueue;
    private ImageLoader mImageLoader;

    private VolleySingleton(){
        mRequestQueue = Volley.newRequestQueue(MyApplication.getAppContext());
        mImageLoader = new ImageLoader(this.mRequestQueue, new ImageLoader.ImageCache() {
            private final LruCache<String, Bitmap> mCache = new LruCache<String, Bitmap>(10);
            public void putBitmap(String url, Bitmap bitmap) {
                mCache.put(url, bitmap);
            }
            public Bitmap getBitmap(String url) {
                return mCache.get(url);
            }
        });
    }

    public static VolleySingleton getInstance(){
        if(mInstance == null){
            mInstance = new VolleySingleton();
        }
        return mInstance;
    }

    public RequestQueue getRequestQueue(){
        return this.mRequestQueue;
    }

    public ImageLoader getImageLoader(){
        return this.mImageLoader;
    }

}

You'll need to implement a static application context in a class which extends Application. Then, update line 15 of VolleySingleton.java to call your static context getter method. An example of what this application class might look like can be found here: MyApplication.java

Using the Singleton is as simple as:

RequestQueue queue = VolleySingleton.getInstance().getRequestQueue();

//or

mImageLoader = VolleySingleton.getInstance().getImageLoader();

Download

Get the singleton and instructions from our GitHub repo here https://github.com/CypressNorth/Volley-Singleton