Circular ImageView

Question

I have been looking at how to create a round ImageView in Android. After reading questions already asked on the subject on StackOverflow at:

How to make an image fit into a circular frame in android

and

How to set bitmap in circular imageview?

I have put together my own ImageView using the links as a guide that does what I need it to do: a rounded image with a border.

Below is the code that I am using:

public class CircularImageView extends ImageView
{

private int borderWidth = 5;
private int viewWidth;
private int viewHeight;
private Bitmap image;
private Paint paint;
private Paint paintBorder;
private BitmapShader shader;

public CircularImageView(Context context) {
    super(context);
    setup();
}

public CircularImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setup();
}

private void setup()
{
    // init paint
    paint = new Paint();
    paint.setAntiAlias(true);

    paintBorder = new Paint();
    setBorderColor(Color.BLUE);
    paintBorder.setAntiAlias(true);     
}

public void setBorderWidth(int borderWidth)
{
    this.borderWidth = borderWidth;
    this.invalidate();
}

public void setBorderColor(int borderColor)
{       
    if(paintBorder != null)
        paintBorder.setColor(borderColor);

    this.invalidate();
}

private void loadBitmap()
{
    BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

    if(bitmapDrawable != null)
        image = bitmapDrawable.getBitmap();
}

@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas)
{
    //load the bitmap
    loadBitmap();

    // init shader
    if(image !=null)
    {
        // Create a shader with a scaled bitmap to match the view dimensions            
        shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint.setShader(shader);
        int circleCenter = viewWidth / 2;

                    // Draw the outer border
                    canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth, paintBorder);
        // circleCenter is the x or y of the view's center
        // radius is the radius in pixels of the cirle to be drawn
        // paint contains the shader that will texture the shape            
        canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter, paint);
    }       
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    int width = measureWidth(widthMeasureSpec);
    int height = measureHeight(heightMeasureSpec, widthMeasureSpec);        

    viewWidth = width - (borderWidth *2);
    viewHeight = height - (borderWidth*2);

    setMeasuredDimension(width, height);
}

private int measureWidth(int measureSpec)
{
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text
            result = viewWidth;

        }

    return result;
}

private int measureHeight(int measureSpecHeight, int measureSpecWidth) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpecHeight);
    int specSize = MeasureSpec.getSize(measureSpecHeight);

    if (specMode == MeasureSpec.EXACTLY) {
        // We were told how big to be
        result = specSize;
    } else {
        // Measure the text (beware: ascent is a negative number)
        result = viewHeight;           
    }
    return result;
}
}

I am planning on making this open source and would therefore appreciate it if someone could have a look over the code to ensure I am doing everything correctly.

Answer 1

Try this function to get round-corner image:

   private Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) 
    {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;
        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }