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

jagmohansingh commented Jan 28, 2014

Please include the imports required for all the classes.

Thanks

@dlazaro66

This comment has been minimized.

Copy link

dlazaro66 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

a613 commented Mar 4, 2014

What is the license for this class?

@RanjitPati

This comment has been minimized.

Copy link

RanjitPati 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

sureshparmar07 commented Jun 26, 2014

How to use this with ListView?

@nguyenhuy

This comment has been minimized.

Copy link

nguyenhuy 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

appmath 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

theapache64 commented Feb 27, 2015

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

@theapache64

This comment has been minimized.

Copy link

theapache64 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

androsland 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

kumarkundan 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

Muneefm 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

shrutilv 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

broncha 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

L-Briand 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

kamalkishor commented Oct 1, 2015

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

@thanhtran-skywalk

This comment has been minimized.

Copy link

thanhtran-skywalk 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

aqibbutt 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

Tuccro 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

Malobash commented Mar 30, 2017

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

@tranthjenhao

This comment has been minimized.

Copy link

tranthjenhao commented Apr 19, 2017

Many thanks <3

@khan-tm

This comment has been minimized.

Copy link

khan-tm commented May 3, 2017

Scale Type 😭

@farooqkhan003

This comment has been minimized.

Copy link

farooqkhan003 commented Jun 29, 2017

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

@rinuelizabeth10

This comment has been minimized.

Copy link

rinuelizabeth10 commented Sep 1, 2017

Thanks! Worked for me

@mnaraniya

This comment has been minimized.

Copy link

mnaraniya 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.