Created
April 22, 2016 14:00
-
-
Save grennis/da9f86870c45f3b8ae00912edb72e868 to your computer and use it in GitHub Desktop.
Android Rounded Corner Layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} | |
Thanks for your solution. It really helped a lot.
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
Is it possible to add a border to the circle?