Image Library: Picasso and Volley

Picasso Library

Picasso is an image library, created and maintained by Square for Android. It is the most simple implementation of displaying of images at the time of writing this blog. Picasso also gives you one more great feature of image cache. Lets go to the implementation part of Picasso.
Just two step:

  1. Adding dependencies in gradle.app
    compile "com.squareup.picasso:picasso:2.4.0"
  2. Using the Picasso
    Picasso.with(this).load("https://pawanthepro.files.wordpress.com/2016/09/picasso.jpg")
    .placeholder(R.mipmap.placeholder)
    .error(R.mipmap.error)
    .into(picassoImage);

The load() method, needs the location of image. Method placeholder() is used to show some images until the required image is not getting load, once the image is loaded, it replaces the place holder image. Similarly, error() method shows the error image if error occurred.
That’s it!!!


Volley Library

Volley is a network library created and maintained by Google. Unlike Picasso, volley is used for all network related activity. Implementation, comparing to Picasso is a bit time consuming, but the time spent by you will give you a big advantage. Comparing to Picasso, Volley is faster. Lets jump to the implementation.

To make our project we will create a class and then using its object we will load the image. Create a class named CustomVolleyRequest.java and paste the below code.

package com.wordpress.pawanthepro.imagesbyvolleyandpicasso;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;
import com.android.volley.Cache;
import com.android.volley.Network;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.BasicNetwork;
import com.android.volley.toolbox.DiskBasedCache;
import com.android.volley.toolbox.HurlStack;
import com.android.volley.toolbox.ImageLoader;
/**
* Created by Pawan on 11/28/2016.
*/
public class CustomVolleyRequest {
private static CustomVolleyRequest customVolleyRequest;
private static Context context;
private RequestQueue requestQueue;
private ImageLoader imageLoader;
private CustomVolleyRequest(Context context) {
this.context = context;
this.requestQueue = getRequestQueue();
imageLoader = new ImageLoader(requestQueue,
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 CustomVolleyRequest getInstance(Context context) {
if (customVolleyRequest == null) {
customVolleyRequest = new CustomVolleyRequest(context);
}
return customVolleyRequest;
}
public RequestQueue getRequestQueue() {
if (requestQueue == null) {
Cache cache = new DiskBasedCache(context.getCacheDir(), 10 * 1024 * 1024);
Network network = new BasicNetwork(new HurlStack());
requestQueue = new RequestQueue(cache, network);
requestQueue.start();
}
return requestQueue;
}
public ImageLoader getImageLoader() {
return imageLoader;
}
}

Now using this class we can do the same what we can do with Picasso. One more thing to keep in mind that, to show the image we wont use ImageView we will use NetworkImageView.

NetworkImageView volleyImage;
private ImageLoader imageLoader;picassoImage=(ImageView) findViewById(R.id.picassoImage);imageLoader = CustomVolleyRequest.getInstance(this).getImageLoader();

imageLoader = CustomVolleyRequest.getInstance(this).getImageLoader();
imageLoader.get("https://pawanthepro.files.wordpress.com/2016/09/volley.jpg", ImageLoader.getImageListener(volleyImage, R.mipmap.placeholder, R.mipmap.error));
volleyImage.setImageUrl("https://pawanthepro.files.wordpress.com/2016/09/volley.jpg", imageLoader);

Now lets look at the whole code.

MainActivity.java

package com.wordpress.pawanthepro.imagesbyvolleyandpicasso;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.NetworkImageView;
import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

    ImageView picassoImage;
    NetworkImageView volleyImage;
    private ImageLoader imageLoader;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        picassoImage=(ImageView) findViewById(R.id.picassoImage);
        volleyImage=(NetworkImageView) findViewById(R.id.volleyImage);

        Picasso.with(this).load("https://pawanthepro.files.wordpress.com/2016/09/picasso.jpg")
                .placeholder(R.mipmap.placeholder)
                .error(R.mipmap.error)
                .into(picassoImage);


        imageLoader = CustomVolleyRequest.getInstance(this).getImageLoader();
        imageLoader.get("https://pawanthepro.files.wordpress.com/2016/09/volley.jpg", ImageLoader.getImageListener(volleyImage, R.mipmap.placeholder, R.mipmap.error));
        volleyImage.setImageUrl("https://pawanthepro.files.wordpress.com/2016/09/volley.jpg", imageLoader);

    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.wordpress.pawanthepro.imagesbyvolleyandpicasso.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:background="@drawable/border">

        <TextView
            android:text="Image by Picasso"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray"/>
        <ImageView
            android:id="@+id/picassoImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:background="@drawable/border">

        <TextView
            android:text="Image by Volley"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray"/>

        <com.android.volley.toolbox.NetworkImageView
            android:id="@+id/volleyImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

 

Output: