Android Rounded Image

MLRoundedImageView.java

public class MLRoundedImageView extends ImageView {

	public MLRoundedImageView(Context context) {
		super(context);
	}

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

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

	@Override
	protected void onDraw(Canvas canvas) {

		Drawable drawable = getDrawable();

		if (drawable == null) {
			return;
		}

		if (getWidth() == 0 || getHeight() == 0) {
			return;
		}
		Bitmap b = ((BitmapDrawable) drawable).getBitmap();
		Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

		int w = getWidth(), h = getHeight();

		Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
		canvas.drawBitmap(roundBitmap, 0, 0, null);

	}

	public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
		Bitmap sbmp;
		
		if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
			float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
			float factor = smallest / radius;
			sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
		} else {
			sbmp = bmp;
		}
		
		Bitmap output = Bitmap.createBitmap(radius, radius,
				Config.ARGB_8888);
		Canvas canvas = new Canvas(output);

		final int color = 0xffa19774;
		final Paint paint = new Paint();
		final Rect rect = new Rect(0, 0, radius, radius);

		paint.setAntiAlias(true);
		paint.setFilterBitmap(true);
		paint.setDither(true);
		canvas.drawARGB(0, 0, 0, 0);
		paint.setColor(Color.parseColor("#BAB399"));
		canvas.drawCircle(radius / 2 + 0.7f,
				radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
		paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
		canvas.drawBitmap(sbmp, rect, rect, paint);

		return output;
	}

}

Please include the imports required for all the classes.

Thanks

Maybe you should only create cropped bitmap the first time you will draw it and store in a Bitmap variable in your custom class, for example in your onDraw() method:

if (roundBitmap == null) {
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        roundBitmap = getCroppedBitmap(bitmap, w);
    }

    canvas.drawBitmap(roundBitmap, 0, 0, null);

Maybe with this approach we should also check if image source change and roundBitmap must be recalculated.

Thanks!
David.

What is the license for this class?

Here are all imports:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

How to use this with ListView?

Creating a cropped bitmap on every draw call is insufficient I think. This is a better implementation.

Thanks. But can you please add your name (and the names of those who might have "inspired" or "helped" you) in the comments section. I hate copy and paste without giving the author(s) proper credit. For now, I am using Permita and the GitHub URL.

Aziz Kadhi

Amazing, but how to set circular border for this ImageView ?

@nguyenhuy: but it won't work in api level <14,i think. isn't?

Check my implementation. Improved to support NinePatch images https://github.com/androsland/MLRoundedImageView

where did i supposed to link it with an image??? which line of code is pointing to image. or it will be in xml

@kumarkundan: you can use this in xml as a view .. just use the header tag as
<your.package.name.MLRoundedImageView

/> thats all..

I am getting :
android.view.InflateException: Binary XML file line #12: Error inflating class

int w = getWidth(), h = getHeight();
int radius = w > h ? h:w; // set the smallest edge as radius.
Bitmap roundBitmap = getCroppedBitmap(bitmap, radius);

for those who wants a center crop
create a Rect like this

int rad = radius/2;
Rect rectSrc = new Rect(
    sbmp.getWidth()/2 - rad,
    sbmp.getHeight()/2 - rad,
    sbmp.getWidth()/2 + rad,
    sbmp.getHeight()/2 + rad
);

and draw the bitmap like this
canvas.drawBitmap(sbmp, rectSrc, rect, paint);

Giving java.lang.NullPointerException at MLRoundedImageView.onDraw(MLRoundedImageView.java:56)

I added one more button, when the button was clicked, it open the gallery, let user select the picture and inflate into your CircleImageView. everything was OK.
but, somehow, Some pictures auto rotated in CircleImageView.
I'm a newbie in Android, so, Could you please help me, how do I disable the auto rotation?
Thanks.

hi ,
the code is running on my side but issue is pixels of the image are too bad how to fix it ?

Please change 27-28 lines to:

    Bitmap b;

    try {
        b = ((BitmapDrawable) drawable).getBitmap();
    } catch (ClassCastException e) {
        Log.e(TAG, String.format("You can't use %s!", drawable.getClass().getSimpleName()), e);
        return;
    }

    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);`

for cases if somebody trying to use LayerDrawable, for example.

Nice solution.. how can i create border for this rounded image view??

Many thanks <3

Scale Type 😭

thanks @Megamzero . It worked for me. (Y)

Thanks! Worked for me

how to add source image in this?