android: create circular image with picasso

Question

The question had been asked and there had been a promise made for the very version of Picasso that I am using: How do I send a circular bitmap to an ImageView using Picasso? I am new to Picasso and only thing I have used is

Picasso.with(context).load(url).resize(w, h).into(imageview);

I have already found https://gist.github.com/julianshen/5829333 but I am not sure how to combine it with the line above in a non-awkward way.

Solution 1

Research a bit before as there are answers available. Anyhow, follow This Link and read it carefully to know how to use it.

try this:

import com.squareup.picasso.Transformation;

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,
                Shader.TileMode.CLAMP, Shader.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 simply apply it like:

Picasso.with(activity).load(mayorShipImageLink).transform(new CircleTransform()).into(ImageView);

Solution 2

here is something that's provided by the support-v4 library! Look into RoundedBitmapDrawable. No need to roll your own:

Picasso.with(context).load(url)
                        .resize(w, h)
                        .into(myImageView, new Callback() {
                            @Override
                            public void onSuccess() {
                                Bitmap imageBitmap = ((BitmapDrawable) myImageView.getDrawable()).getBitmap();
                                RoundedBitmapDrawable imageDrawable = RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);
                                imageDrawable.setCircular(true);
                                imageDrawable.setCornerRadius(Math.max(imageBitmap.getWidth(), imageBitmap.getHeight()) / 2.0f);
                                myImageView.setImageDrawable(imageDrawable);
                            }
                            @Override
                            public void onError() {
                                myImageView.setImageResource(R.drawable.default_image);
                            }
                        });

Note: Picasso also has a .transform(customTransformation) call that you could theoretically use, however, I had issues with that. This above works. Good luck!

Solution 3

There is a transformation library for Picasso.

Just add gradle dependency

implementation 'jp.wasabeef:picasso-transformations:2.4.0'

End use it

Picasso.with(context)
       .load(url)
       .resize(w, h)
       .transform(new CropCircleTransformation())
       .into(imageview);

Wiki: Picasso Transformations

Solution 4

Another alternative I found was this guys library. It works standalone, or in conjunction with Picasso. I chose the Picasso route, like below:

https://github.com/vinc3m1/RoundedImageView

Transformation transformation = new RoundedTransformationBuilder()
          .borderColor(Color.BLACK)
          .borderWidthDp(3)
          .cornerRadiusDp(30)
          .oval(false)
          .build();

Picasso.with(context)
    .load(url)
    .fit()
    .transform(transformation)
    .into(imageView);

Worked for me!

Solution 5

I have tried all solutions above but none of them gives me circle transform without cropping picture..those solution will work only for images with same width and height..this is my solution on above

first ------

Picasso.with(getActivity())
            .load(url)
            .error(R.drawable.image2)
            .placeholder(R.drawable.ic_drawer)
            .resize(200, 200)
            .transform(new ImageTrans_CircleTransform())
            .into(imageView1);

then do this --------

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader.TileMode;

import com.squareup.picasso.Transformation;
public class ImageTrans_CircleTransform implements Transformation {
 @Override
    public Bitmap transform(Bitmap source) {
 if (source == null || source.isRecycled()) {
                return null;
            }

            final int width = source.getWidth() + borderwidth;
            final int height = source.getHeight() + borderwidth;

            Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            BitmapShader shader = new BitmapShader(source, TileMode.CLAMP, TileMode.CLAMP);
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setShader(shader);

            Canvas canvas = new Canvas(canvasBitmap);
            float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
            canvas.drawCircle(width / 2, height / 2, radius, paint);

            //border code
            paint.setShader(null);
            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(bordercolor);
            paint.setStrokeWidth(borderwidth);
            canvas.drawCircle(width / 2, height / 2, radius - borderwidth / 2, paint);
            //--------------------------------------

            if (canvasBitmap != source) {
                source.recycle();
            }

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

View more solutions

Comments

[lagos]

The link you gave was enough to answer your own question. And you only needed to apply Picasso.with(activity).load(mayorShipImageLink).transform(ne‌​w CircleTransform()).into(ImageView);

[AG1]

@anirudh-sharma make sure to add these imports: import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Paint; import com.squareup.picasso.Transformation;

[Cerlin]

@all: If you get into a null pointer exception on gif images, check this

[Xplosive]

This will perfectly work for square image. Use Math.min in corner radius for any image. imageDrawable.setCornerRadius(Math.min(imageBitmap.getWidth(‌​), imageBitmap.getHeight()) / 2.0f);

[HasaDev]

Shouldnt we create separate thread in OnSuccess(), because it can be long task to create Rounded bitmap from origin bitmap?

[sud007]

Works like a charm in Kotlin as well. One change for the existing APIs, BitmapShader.TileMode.CLAMP is not exsting anymore, I have updated the answer

[Haroun Hajem]

DOES NOT WORK! Potential Fatal signal 6 (SIGBART), meaning that the bitmap.recycle() is actually removing the refrence from memory and causing an signal 6 (SIGABRT), code -6 (SI_TKILL), fault addr -------- 11-12 00:03:47.941 29091 29091 F DEBUG : Abort message: 'Error, cannot access an invalid/free'd bitmap here!' -> Abort message: 'Error, cannot access an invalid/free'd bitmap here! because it's garbage collected away from memory. bitmap.recycle is used for older Android devices, is what i understand.

[DDisciple]

This is really the perfect answer for this question, how come it has so little votes..