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.  

Share this

Related Posts

Previous
Next Post »

5 comments

comments
9 August 2017 at 18:03 delete This comment has been removed by a blog administrator.
avatar
2 July 2019 at 13:05 delete


This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to article very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
DedicatedHosting4u.com


Reply
avatar
13 July 2019 at 13:00 delete

Thanks for sharing nice information with us. I like your post and all you share with us is up to date and quite informative,

Thanks
Cpa offers

Reply
avatar
15 July 2019 at 17:51 delete

Your post is very good. I got to learn a lot from your post. Thank you for sharing your article for us. it is amazing post
what is seo
types of seo



Reply
avatar
15 July 2019 at 17:51 delete



This is a fantastic idea! I like it a lot because it's super easy for the audience to see the value of opting in. wonderful and amazing post very use full your post thanks for sharing your article
Android Application development
Web application

Reply
avatar

Please Comment about the Posts and Blog