Search code examples
androidimageviewtransformpicasso

Create circular image using picasso


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

Solution

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