How to round an image with Glide library?

Question

So, anybody know how to display an image with rounded corners with Glide? I am loading an image with Glide, but I don\'t know how to pass rounded params to this library.

Answer 1

The other solutions did not work for me. I found they all have significant drawbacks:

• Solutions using glide transformations do not work with placeholders
• Solutions using rounded image views do not work with animations (i.e. crossfade)
• Solutions using a generic method of a parent that clips its children (i.e. the accepted answer here) do not work well with glide

It is really interesting that after fumbling around with this I found the Fresco library page about rounded corners and circles in which they list basically the same limitations and conclude with the statement:

there is no really good solution for rounding corners on Android and one has to choose between the aforementioned trade-offs

Unbelievable that at this time we still dont have a real solution. I have an alternate solution based on the link I put above. The drawback with this approach is that it assumes your background is a solid color (the corners aren't really transparent). You would use it like this:

The gist is here and full code here:

public class RoundedCornerLayout extends RelativeLayout {
    private Bitmap maskBitmap;
    private Paint paint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if (maskBitmap == null) {
            // This corner radius assumes the image width == height and you want it to be circular
            // Otherwise, customize the radius as needed
            cornerRadius = canvas.getWidth() / 2;
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        canvas.drawBitmap(maskBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE); // TODO set your background color as needed

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}