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

Circle Image View using Glide and Picasso in Android Circle Image View using Glide and Picasso in Android

Circle Image View using Glide and Picasso in Android

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.  

7 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. 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



    ReplyDelete
  3. The more pixels the better the lucidity and wealth of the picture. https://jpg-compress.com

    ReplyDelete
  4. Adobe Photoshop programming was created by Adobe Frameworks Inc. which was utilized for different Picture altering methods exceptionally helping to procedures like Clipping Path and Picture Concealing.
    clipping path service provider

    ReplyDelete
  5. Be that as it may, they can propose about what they will develop the image. clipping path company

    ReplyDelete
  6. The expert dealing with the photograph could likewise apply a large number of channels to make the photo look as genuinely as the first one.
    image background removal service

    ReplyDelete
  7. "AI art can be a canvas for exploring cultural diversity." ai image video

    ReplyDelete

Please Comment about the Posts and Blog