Skip to content

Instantly share code, notes, and snippets.

@grennis
Created April 22, 2016 14:00
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save grennis/da9f86870c45f3b8ae00912edb72e868 to your computer and use it in GitHub Desktop.
Save grennis/da9f86870c45f3b8ae00912edb72e868 to your computer and use it in GitHub Desktop.
Android Rounded Corner Layout
// This layout will display its children with rounded corners
// It works with Glide image library placeholders and animations
// It assumes your background is a solid color. If you need the corners to be truly transparent,
// this solution will not work for you.
package com.myapp.ui;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
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;
}
}
@Zoha131
Copy link

Zoha131 commented Jul 3, 2018

Is it possible to add a border to the circle?

@Zoha131
Copy link

Zoha131 commented Jul 3, 2018

Thanks for your solution. It really helped a lot.

@Zoha131
Copy link

Zoha131 commented Jul 3, 2018

I have successfully added a border to the Image. Here is my edited createMask function

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); // Set Mask Color Here

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

        int borderWidth = 6; //Set Border Width Here
        int withMinusable = borderWidth/2;
        Paint border = new Paint();
        border.setStyle(Paint.Style.STROKE);
        border.setStrokeWidth(borderWidth);
        border.setColor(Color.GRAY); //Set Border Color here
        canvas.drawRoundRect(new RectF(withMinusable, withMinusable, width-withMinusable, height-withMinusable), cornerRadius, cornerRadius, border);

        return mask;
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment