Android: Image loading libraries Picasso vs Glide

This post is about image loading libraries, which could help us in avoiding complex codes.

Downloading of images, caching and reusing of images are know part of all the application and it became part of developers life. While doing this process, We need to consider few things...

• Loading process should be asynchronously.
• Image should display when it is loaded successfully, In case if it is not downloaded then placing some place holders.
• Caching Image rather than downloading every time.

There are more libraries in the market which helps us in avoiding to do all these exercises and here I am going to discuss about Picasso and Glide. Where this two libraries looks similar in the way of implementation and Its easy to integrate in the middle of the application, since its a just a one line code to load image.

There are lot of features in the two libraries and few are listed below, where I can compare them easily.

	Picasso	Glide
	Picasso.with(this) .load(URL) .into(imageView);	Glide.with(this) .load(URL) .into(imageView);
Re-size the Image	Picasso.with(this) .load(URL) .resize(200, 200) .into(imageView);	Glide.with(this) .load(URL) .override(200, 200) .into(imageView);
If loading is failed then on failure callbacks or listener.	Picasso.with(this) .load(URL) .into(ImageView imageView, Callback arg1)	Glide.with(this) .load(URL) .listener(RequestListener<String, GlideDrawable> requestListener ) .into(imageView);
Transform	Picasso.with(this) .load(URL) .transform(new CircleTransform()) .into(imageView);	Glide.with(this) .load(URL) .transform(new CircleTransform(context)) .into(imageView);
Thumbnail Support	No	Yes Glide.with(this) .load(URL) .thumbnail(0.1f) .into(imageView);
Animation	No direct approach	Yes Animation anim = AnimationUtils.loadAnimation(context, android.R.anim.fade_in); Glide.with(this) .load(URL) .animate(anim) .into(imageView);
Placeholders during loading	Yes .placeholder(drawable/resourceid) .error(drawable/resourceid)	Yes .placeholder(drawable/resourceid) .error(drawable/resourceid)

How can we get directly Circular Image, when we can get when we download from the url?

This both libraries support in doing without change of xml.

Both the libraries are having transform method, where we can customize the class and we can get the image as we required.

Picasso (CircleTransform.Java)

 import android.graphics.Bitmap;  
 import com.squareup.picasso.Transformation;  
 public class CircleTransform implements Transformation {  
   @Override  
   public Bitmap transform(Bitmap source) {  
     return ImageUtils.getCircularBitmapImage(source);  
   }  
   @Override  
   public String key() {  
     return "circle-image";  
   }  
 }  

Glide (CircleTransform.Java)

 import android.content.Context;  
 import android.graphics.Bitmap;  
 import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;  
 import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;  
 public class GlideCircleTransform extends BitmapTransformation {  
   public GlideCircleTransform(Context context) {  
     super(context);  
   }  
   @Override  
   protected Bitmap transform(BitmapPool pool, Bitmap source, int outWidth, int outHeight) {  
     return ImageUtils.getCircularBitmapImage(source);  
   }  
   @Override  
   public String getId() {  
     return "Glide_Circle_Transformation";  
   }  
 }  

Utils class, where we are customizing the bitmap image as we required.

ImageUtils.java

 import android.graphics.Bitmap;  
 import android.graphics.BitmapShader;  
 import android.graphics.Canvas;  
 import android.graphics.Paint;  
 public class ImageUtils {  
   public static Bitmap getCircularBitmapImage(Bitmap source) {  
     int size = Math.min(source.getWidth(), source.getHeight());  
     int x = (source.getWidth() - size) / 2;  
     int y = (source.getHeight() - size) / 2;  
     Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);  
     if (squaredBitmap != source) {  
       source.recycle();  
     }  
     Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);  
     Canvas canvas = new Canvas(bitmap);  
     Paint paint = new Paint();  
     BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);  
     paint.setShader(shader);  
     paint.setAntiAlias(true);  
     float r = size / 2f;  
     canvas.drawCircle(r, r, r, paint);  
     squaredBitmap.recycle();  
     return bitmap;  
   }  
 }  

The above getCircularBitmapImage method provides me the circular bitmap image.

Screenshot:

Thanks for reading :) 

Whether this post is helpful?

Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments. feedback are welcome...