Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Android Rounded Image
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;
}
}
@jagmohansingh

This comment has been minimized.

Copy link

commented Jan 28, 2014

Please include the imports required for all the classes.

Thanks

@dlazaro66

This comment has been minimized.

Copy link

commented Feb 6, 2014

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.

@a613

This comment has been minimized.

Copy link

commented Mar 4, 2014

What is the license for this class?

@RanjitPati

This comment has been minimized.

Copy link

commented Mar 21, 2014

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;

@sureshparmar07

This comment has been minimized.

Copy link

commented Jun 26, 2014

How to use this with ListView?

@nguyenhuy

This comment has been minimized.

Copy link

commented Jul 14, 2014

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

@appmath

This comment has been minimized.

Copy link

commented Dec 9, 2014

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

@theapache64

This comment has been minimized.

Copy link

commented Feb 27, 2015

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

@theapache64

This comment has been minimized.

Copy link

commented Feb 27, 2015

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

@androsland

This comment has been minimized.

Copy link

commented Apr 7, 2015

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

@kumarkundan

This comment has been minimized.

Copy link

commented Jun 17, 2015

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

@Muneefm

This comment has been minimized.

Copy link

commented Jun 20, 2015

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

/> thats all..

@shrutilv

This comment has been minimized.

Copy link

commented Aug 13, 2015

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

@broncha

This comment has been minimized.

Copy link

commented Aug 27, 2015

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

This comment has been minimized.

Copy link

commented Aug 30, 2015

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

@kamalkishor

This comment has been minimized.

Copy link

commented Oct 1, 2015

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

@thanhtran-skywalk

This comment has been minimized.

Copy link

commented Oct 21, 2015

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.

@aqibbutt

This comment has been minimized.

Copy link

commented Dec 12, 2015

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

@Tuccro

This comment has been minimized.

Copy link

commented Jun 29, 2016

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.

@Malobash

This comment has been minimized.

Copy link

commented Mar 30, 2017

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

@tranthjenhao

This comment has been minimized.

Copy link

commented Apr 19, 2017

Many thanks <3

@khan-tm

This comment has been minimized.

Copy link

commented May 3, 2017

Scale Type 😭

@farooqkhan003

This comment has been minimized.

Copy link

commented Jun 29, 2017

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

@rinuelizabeth10

This comment has been minimized.

Copy link

commented Sep 1, 2017

Thanks! Worked for me

@mnaraniya

This comment has been minimized.

Copy link

commented Sep 7, 2017

how to add source image in this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.