Android Volley Load Image From URL Into ImageView

By | November 21, 2014

In android we have seen loading image from drawable directory of your project into ImageView , but when your working on network based application where you want to load image which is placed in remote server then it becomes tedious because you have to write tons of code to fetch and cache  and then set that image  on to ImageView  , but you can avoid writing tons code as volley library makes it easy to achieve this task .

First we need to build a project with volley library which i have discussed in my previous tutorial how to Build project with Volley .

XML Layout

Create a xml layout activity_main.xml and add Linearlayout as parent view , Volley provides a special imageview call com.android.volley.toolbox.NetworkImageView which Handles fetching an image from a URL as well as the life-cycle of the associated request.

file : activity_main.xml

<LinearLayout
    xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:orientation=”vertical”
    tools:context=”com.pavan.volleyimageloader.MainActivity” >

    <com.android.volley.toolbox.NetworkImageView
        android:id=”@+id/thumbnail”
        android:layout_width=”180dp”
        android:layout_height=”210dp”
        android:layout_gravity=”center”
        android:layout_marginTop=”25dp”
        android:src=”@drawable/loading” />

</LinearLayout>

Application Object

Create a class MyApplication which extends Application ,this application object represents singleton pattern , the purpose of this class is make volley request available  through out of the application

  1. The getInstance method of application class returns application object.
  2. The getReqQueue method returns the RequestQueue object
  3. Inside addToReqQueue method we are adding calling add() method upon RequestObject and passing request as paramter to it .
  4. Inside getImageLoader method were we are calling to a constructor of ImageLoader Class by passing requestQueue object and BitmapLruCache object as paramter.

file : MyApplication.java

package com.pavan.volleyimageloader;

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

public class MyApplication extends Application {

    private RequestQueue mRequestQueue;

    private ImageLoader mImageLoader;
    private static MyApplication mInstance;

    @Override
    public void onCreate() {
        super.onCreate();
        mInstance = this;
    }

    public static synchronized MyApplication getInstance() {
        return mInstance;
    }

    public RequestQueue getReqQueue() {
        if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(getApplicationContext());
        }
        return mRequestQueue;
    }

    public ImageLoader getImageLoader() {
        getReqQueue();
        if (mImageLoader == null) {
            mImageLoader = new ImageLoader(this.mRequestQueue,
                    new BitmapLruCache());
        }
        return this.mImageLoader;
    }
}

BitMap Cache

Create a class BitmapLruCache which extends LruCache and override the required method as this class is used for caching the image.

file : BitmapLruCache.java

package com.pavan.volleyimageloader;

import com.android.volley.toolbox.ImageLoader.ImageCache;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

public class BitmapLruCache extends LruCache<String, Bitmap> implements
        ImageCache {
    public static int getDefaultLruCacheSize() {
        final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
        final int cacheSize = maxMemory / 8;

        return cacheSize;
    }

    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);
    }
}

Main Activity

  1. Create a class MainActivity and set the content of this class with above defined xml file .
  2.  As you can see i have declared a String variable url  from there we are fetching image.
  3.  Declare the volley’s NetworkImageView and initialize it using findViewById();
  4.  Get the ImageLoader instance from the MyApplication class.
  5.  Call setImageUrl() method on NetworkImageView object by passing image url and imageloader object as paramter to it .

file : MainActivity.java

package com.pavan.volleyimageloader;

import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.NetworkImageView;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity {

    NetworkImageView imageView;

    String url = “http://4.bp.blogspot.com/-PDo1ZU5Q6ug/VG6zjjfdjQI/AAAAAAAADHw/6IRXUpF1RZk/s1600/logo.png”;
  
   ProgressDialog PD;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (NetworkImageView) findViewById(R.id.thumbnail);
        ImageLoader imageLoader = MyApplication.getInstance().getImageLoader();
        imageView.setImageUrl(url, imageLoader);

    }
}

  • Thanks for the tutorial.
    Can you please make a tutorial on

    How to upload image(taken from mobile camera or gallery) from mobile to mysql database(using php) using volley.