Volley Image Cahing

Question

I am trying to understand Volley's image caching. I have a fragment with network image view, which will load an image from the server. I am not able to display the image using NetworkImageView, when i try to load an image nothing shows up. I read Volley automatically takes care of Image Caching. But I think I may not be using a proper way to load image from the server.

Below is my code:

Volley Singleton Class

public class Volley {
    private static Volley mInstance;
    private static Context mContext;

    private RequestQueue mRequestQueue;
    private ImageLoader mImageLoader;

    private Volley(Context context) {
        mContext = context;
        mRequestQueue = getRequestQueue();
        ImageLoader.ImageCache imageCache = new BitmapLruCache();
//        ImageLoader imageLoader = new ImageLoader(Volley.newRequestQueue(context), imageCache);
        mImageLoader = new ImageLoader(mRequestQueue,
                new ImageLoader.ImageCache() {
                    private final LruCache<String, Bitmap>
                            cache = new LruCache<String, Bitmap>(20);

                    @Override
                    public Bitmap getBitmap(String url) {
                        return cache.get(url);
                    }

                    @Override
                    public void putBitmap(String url, Bitmap bitmap) {
                        cache.put(url, bitmap);
                    }
                });
    }

    public static synchronized Volley getInstance(Context context) {
        if (mInstance == null) {
            mInstance = new Volley(context);
        }

        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            // getApplicationContext() is key, it keeps you from leaking the
            // Activity or BroadcastReceiver if someone passes one in.
            mRequestQueue = com.android.volley.toolbox.Volley.newRequestQueue(mContext.getApplicationContext());
        }

        return mRequestQueue;
    }

    public <T> void addToRequestQueue(Request<T> req) {
        getRequestQueue().add(req);
    }

    public  ImageLoader getImageLoader() {
        return mImageLoader;
    }
}

I have initialized network image view in my fragment:

        String url =  "https://pixabay.com/en/youtube-laptop-notebook-online-1158693/";
        mImageView = ((NetworkImageView) mView.findViewById(R.id.imageView));
        ImageLoader imageLoader = Volley.getInstance(mContext).getImageLoader();
        mImageView.setImageUrl(url, imageLoader);

LruCache class

public class BitmapLruCache extends LruCache<String, Bitmap>
        implements ImageLoader.ImageCache {
    public BitmapLruCache() {
        this(getDefaultLruCacheSize());
    }

    public BitmapLruCache(int sizeInKiloBytes) {
        super(sizeInKiloBytes);
    }

    @Override
    protected int sizeOf(String key, Bitmap value) {
        return value.getRowBytes() * value.getHeight() / 1024;
    }

    @Override
    public Bitmap getBitmap(String url) {
        return get(url);
    }

    @Override
    public void putBitmap(String url, Bitmap bitmap) {
        put(url, bitmap);
    }

    public static int getDefaultLruCacheSize() {
        final int maxMemory =
                (int) (Runtime.getRuntime().maxMemory() / 1024);
        final int cacheSize = maxMemory / 8;

        return cacheSize;
    }
}

I have read alot of articles and official google documentation but i don't understand how will it work in my case.

Thanks in advance

Answer 1

You are missing get call for ImageLoader. You also might want to set your image in the response call back.

imageLoader.get(url, new ImageLoader.ImageListener() {
    @Override
    public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {
        mImageView.setImage(response.getBitmap());
    }

    @Override
    public void onErrorResponse(VolleyError error) {

    }
});

I've not checked the code in a compiler so there might be some errors in the code. And do consider @Juuso Lappalainen's comment, Picasso is a very nice library for image loading and automatic caching, where you only need to specify size of cache. And loading of image can be simplified to a single line.