Example
Here is an example Picasso Circle Transform class based on the original, with the addition of a thin border, and also includes functionality for an optional separator for stacking:
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import com.squareup.picasso.Transformation;
public class CircleTransform implements Transformation {
boolean mCircleSeparator = false;
public CircleTransform(){
}
public CircleTransform(boolean circleSeparator){
mCircleSeparator = circleSeparator;
}
@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);
BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG);
paint.setShader(shader);
float r = size/2f;
canvas.drawCircle(r, r, r-1, paint);
// Make the thin border:
Paint paintBorder = new Paint();
paintBorder.setStyle(Style.STROKE);
paintBorder.setColor(Color.argb(84,0,0,0));
paintBorder.setAntiAlias(true);
paintBorder.setStrokeWidth(1);
canvas.drawCircle(r, r, r-1, paintBorder);
// Optional separator for stacking:
if (mCircleSeparator) {
Paint paintBorderSeparator = new Paint();
paintBorderSeparator.setStyle(Style.STROKE);
paintBorderSeparator.setColor(Color.parseColor("#ffffff"));
paintBorderSeparator.setAntiAlias(true);
paintBorderSeparator.setStrokeWidth(4);
canvas.drawCircle(r, r, r+1, paintBorderSeparator);
}
squaredBitmap.recycle();
return bitmap;
}
@Override
public String key() {
return "circle";
}
}
Here is how to use it when loading an image (assuming this is an Activity Context, and url is a String with the url of the image to load):
ImageView ivAvatar = (ImageView) itemView.findViewById(R.id.avatar);
Picasso.with(this).load(url)
.fit()
.transform(new CircleTransform())
.into(ivAvatar);
Result:
For use with the separator, give true to the constructor for the top image:
ImageView ivAvatar = (ImageView) itemView.findViewById(R.id.avatar);
Picasso.with(this).load(url)
.fit()
.transform(new CircleTransform(true))
.into(ivAvatar);
Result (two ImageViews in a FrameLayout):
