Circle Image View using Glide and Picasso in Android

Hello guys, In this tutorial we will learn how to create Circular Image View in Android without using any additional Libraries such as CircleImageView.

// This Library is very Popular and Widely used for Circle Image View
compile 'de.hdodenhof:circleimageview:2.1.0'

Nowadays, Every Android Developers uses Glide or Picasso Image HTTP Libraries to Image in Image Views. If we uses any additional Libraries to get Circle Shaped Image View may lead to increase the size of an APK. To avoid this, Glide and Picasso provides solution to create Circle Image View.

First, we will see how create circle image using Picasso.

Circle Transformation using Picasso

Download Picasso by Gradle in Android

// This Library is created by Square.Inc
compile 'com.squareup.picasso:picasso:2.5.2'

The following snippet is used to load image into ImageView using Picasso

Picasso.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
       .placeholder(R.mipmap.ic_launcher)
       .error(R.mipmap.ic_launcher)
       .into((ImageView) findViewById(R.id.picassoImageView));

To create circle image, create a class named as PicassoCircleTransformation and paste the following code

public class PicassoCircleTransformation implements Transformation {

    @Override
    public Bitmap transform(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, source.getConfig());

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

    @Override
    public String key() {
        return "circle";
    }
}

Then load the transformation as like the following

Picasso.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
      .placeholder(R.mipmap.ic_launcher)
      .error(R.mipmap.ic_launcher)
      .transform(new PicassoCircleTransformation())
      .into((ImageView) findViewById(R.id.picassoImageView));

Now we will see, how to create circle transformation using Glide

Circle Transformation using Glide

Download Glide by Gradle in Android

// This Library is created by Bumptech
compile 'com.github.bumptech.glide:glide:3.7.0'

The following snippet is used to load image into ImageView using Glide

Glide.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
        .thumbnail(0.5f)
        .crossFade()
        .placeholder(R.mipmap.ic_launcher)
        .error(R.mipmap.ic_launcher)
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .into((ImageView) findViewById(R.id.glideImageView));

To create circle image, create a class named as GlideCircleTransformation and paste the following code

public class GlideCircleTransformation implements Transformation {

  private BitmapPool mBitmapPool;

  public GlideCircleTransformation(Context context) {
    this(Glide.get(context).getBitmapPool());
  }

  public GlideCircleTransformation(BitmapPool pool) {
    this.mBitmapPool = pool;
  }

  @Override
  public Resource transform(Resource resource, int outWidth, int outHeight) {
    Bitmap source = resource.get();
    int size = Math.min(source.getWidth(), source.getHeight());

    int width = (source.getWidth() - size) / 2;
    int height = (source.getHeight() - size) / 2;

    Bitmap bitmap = mBitmapPool.get(size, size, Bitmap.Config.ARGB_8888);
    if (bitmap == null) {
      bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    BitmapShader shader =
            new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
    if (width != 0 || height != 0) {
      // source isn't square, move viewport to center
      Matrix matrix = new Matrix();
      matrix.setTranslate(-width, -height);
      shader.setLocalMatrix(matrix);
    }
    paint.setShader(shader);
    paint.setAntiAlias(true);

    float r = size / 2f;
    canvas.drawCircle(r, r, r, paint);

    return BitmapResource.obtain(bitmap, mBitmapPool);
  }

  @Override public String getId() {
    return "GlideCircleTransformation()";
  }
}

Then load the transformation in Glide as like the following

Glide.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
        .thumbnail(0.5f)
        .crossFade()
        .placeholder(R.mipmap.ic_launcher)
        .error(R.mipmap.ic_launcher)
        .bitmapTransform(new GlideCircleTransformation(getApplicationContext()))
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .into((ImageView) findViewById(R.id.glideImageView));

Download Code:

You can download the full source from the following Github link. If you Like this tutorial, Please star it in Github.
    
Download From Github
I found these snippets from Wasabeef Transformations Libraries for Glide and Picasso.
Post your doubts and comments in the comments section.