Create circular image using picasso

Question

I want load the profilr picture image from web url and from the resourses make it circular using Picasso library. I am doing like,

dependencies {
    compile 'com.squareup.picasso:picasso:2.4.0'
}

Load Image (R.drawable.profile_sample) from resources,

Picasso.with(getApplicationContext()).load(R.drawable.profile_sample).placeholder(setCircularImage(R.drawable.profile_sample)).into(imageView_ProfilePic);

also from the url like,

Picasso.with(getApplicationContext()).load("http://shidhints.com").placeholder(setCircularImage(R.drawable.profile_sample)).into(imageView_ProfilePic);

Also I am using setCircularImage() to make the image from resources to circular shape.

private RoundedBitmapDrawable setCircularImage(int id) {
        Resources res = getApplicationContext().getResources();
        Bitmap src = BitmapFactory.decodeResource(res, id);
        RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(res, src);
        roundedBitmapDrawable.setCornerRadius(Math.max(src.getWidth(), src.getHeight()) / 2.0f);
        return roundedBitmapDrawable;
    }

https://stackoverflow.com/questions/30664254/using-picasso-library-with-a-circle-image-view — , Sep 21 '17 at 10:00
https://stackoverflow.com/questions/26112150/android-create-circular-image-with-picasso — , Sep 21 '17 at 10:00
hey buddy use circular imageview library https://github.com/hdodenhof/CircleImageView and load it using picasso. — Nabin Khatiwada, Sep 21 '17 at 10:06

score 1 · Accepted Answer · answered Sep 21 '17 at 09:57

I have Created a class CircleTransform.java to make the image to circle and modified the code to load image from like,

Picasso.with(getApplicationContext()).load(R.drawable.profile_sample).placeholder(setCircularImage(R.drawable.profile_sample)).transform(new CircleTransform()).into(imageView_ProfilePic);

also from the url like,

Picasso.with(getApplicationContext()).load("http://shidhints.com").placeholder(setCircularImage(R.drawable.profile_sample)).transform(new CircleTransform()).into(imageView_ProfilePic);

CircleTransform.java

public class CircleTransform  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";
    }
}

Create circular image using picasso

1 Answers1