Make Image view rounded (not the image)

Question

Requirement is to:

Req 1 : Fetch images from url

R2: save them in cache

R3: make ImageView rounded not the image

So for R1 & R2 I found a library: http://loopj.com/android-smart-image-view/

For R3 I've done a lot of R&D , & everything I found converts the image not the ImageView. This is what I've searched:

Mask ImageView with round corner background

How to make an ImageView with rounded corners?

https://github.com/vinc3m1/RoundedImageView

https://github.com/lopspower/CircularImageView

I know it's possible to use the ImageView bitmap & get the image rounded but with the specific library I want to use that isn't possible(maybe possible with very complex threading).

So please help me to get the ImageView rounded not the image.

whats the difference between round imageview and round image ? — pskink, Mar 05 '14 at 14:34
Round ImageView means to actually make the ImageView widget round & round image means to make the jpg or png round — Pranav Mahajan, Mar 05 '14 at 19:04

pskink · Answer 1 · 2014-03-06T08:00:14.677

3

so this is the minimalistic version:

class RoundImageView extends ImageView {
    private static final int RADIUS = 32;
    private Paint mPaint;
    private Paint mSrcIn;
    private RectF mRect;

    public RoundImageView(Context context) {
        super(context);
//        setBackgroundColor(0xffffffff);
        mSrcIn = new Paint();
        mSrcIn.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRect = new RectF();
    }

    @Override
    public void onDraw(Canvas canvas) {
        Drawable dr = getDrawable();
        if (dr != null) {
            mRect.set(dr.getBounds());
            getImageMatrix().mapRect(mRect);
            mRect.offset(getPaddingLeft(), getPaddingTop());

            int rtc = canvas.saveLayer(mRect, null, Canvas.ALL_SAVE_FLAG);
            // draw DST
            canvas.drawRoundRect(mRect, RADIUS, RADIUS, mPaint);

            canvas.saveLayer(mRect, mSrcIn, Canvas.ALL_SAVE_FLAG);
            // draw SRC
            super.onDraw(canvas);
            canvas.restoreToCount(rtc);
        }
    }
}

or use even shorter one when hardware acceleration is not used and you can use Canvas.clipPath:

class RoundImageViewClipped extends ImageView {
    private static final int RADIUS = 32;
    private RectF mRect;
    private Path mClip;

    public RoundImageViewClipped(Context context) {
        super(context);
//        setBackgroundColor(0xffffffff);
        mRect = new RectF();
        mClip = new Path();
    }

    @Override
    public void onDraw(Canvas canvas) {
        Drawable dr = getDrawable();
        if (dr != null) {
            mRect.set(dr.getBounds());
            getImageMatrix().mapRect(mRect);
            mRect.offset(getPaddingLeft(), getPaddingTop());
            mClip.reset();
            mClip.addRoundRect(mRect, RADIUS, RADIUS, Direction.CCW);

            canvas.clipPath(mClip);
            super.onDraw(canvas);
        }
    }
}

edited Mar 06 '14 at 08:00

answered Mar 05 '14 at 19:15

pskink

23,874
6
66
77

I'm not using ImageView. I'm using SmartImageView from the external library I've mentioned. So this didn't work out. – Pranav Mahajan Mar 06 '14 at 06:03
what didnt help? what did you try? – pskink Mar 06 '14 at 06:41
I'm using SmartImageView from the external library not ImageView. So I tried to create a class like : class RoundImageViewClipped extends SmartImageView, but that as expected gives ClassCastException. – Pranav Mahajan Mar 06 '14 at 09:08
where is that ClassCastException ? – pskink Mar 06 '14 at 09:13
RoundImageView temp = (RoundImageView) findViewById(R.id.smartImageView); – Pranav Mahajan Mar 06 '14 at 09:27
either use RoundImageView or RoundImageViewClupped, they are two different classes so you cannot cast one to another, or just cast to SmartImageView – pskink Mar 06 '14 at 09:28
so you have bad luck since for me it works like a charm – pskink Mar 06 '14 at 12:03
I presume I can get this to work with ImageView. But its just not happening with SmartImageView – Pranav Mahajan Mar 06 '14 at 13:40
it is just working fine with SmartImageView, otherwise i would not post the answer – pskink Mar 06 '14 at 13:48
I think I'm not understanding your solution. Can you tell me how to use these classes after : SmartImageView temp = (SmartImageView) findViewById(R.id.smartImageView); – Pranav Mahajan Mar 07 '14 at 04:59
@PranavMahajan this works but you have to do some specific thinks... i answered here http://stackoverflow.com/a/22881992/1847899 with the full code.. – Alexander Sidikov Pfeif Apr 09 '14 at 16:50

score 1 · Answer 2 · answered Mar 05 '14 at 15:57

I'm pretty sure you can't "make the ImageView round," since all Views are actually rectangular, so what you're going to have to do is fake it.

Use a method like this to cut a circle from the image:

public Bitmap getRoundedBitmap(Bitmap scaleBitmapImage) {
    int targetRadius = scaleBitmapImage.getWidth();
    if(targetRadius > scaleBitmapImage.getHeight()) targetRadius = scaleBitmapImage.getHeight();

    Bitmap targetBitmap = Bitmap.createBitmap(targetRadius, targetRadius, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);
    Path path = new Path();
    path.addCircle(((float) scaleBitmapImage.getWidth() - 1) / 2, ((float) scaleBitmapImage.getHeight() - 1) / 2, (Math.min(((float) scaleBitmapImage.getWidth()), ((float) scaleBitmapImage.getHeight())) / 2), Path.Direction.CCW);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, new Rect(0, 0, sourceBitmap.getWidth(), sourceBitmap.getHeight()), new Rect(0, 0, scaleBitmapImage.getWidth(), scaleBitmapImage.getHeight()), null);

    return targetBitmap;
}

Since the clipped part is transparent, it will appear as if the actual View is a circle. Also make sure that the bounds of the View are squared (or that adjustViewBounds="true") else you may get visual distortions in terms of width or height.

Pretty sure that's as close to a "rounded View" as you can actually get.

Uhhh. I'm not able to get the bitmap with SmartImageView. I know it can be done with some tricky threading. Can you please look into it. — Pranav Mahajan, Mar 06 '14 at 06:04
I know image.getDrawable()).getBitmap(); can be used to get the bitmap, but since the images are being fetched in some different thread I don't have control over, bitmap is always retrieved as null & ultimately gives me NPE. — Pranav Mahajan, Mar 07 '14 at 04:56
That's really not a good way to do it, and I'd be more surprised if you didn't get NPE's doing that. You should look into a lazy-loader solution and get the bitmaps from their references in your app's memory; not from the View you're trying to change... — Cruceo, Mar 07 '14 at 14:44

score 1 · Answer 3 · answered Mar 05 '14 at 19:20

How about the solution give by Romain Guy to use a custom Drawable. You're ImageView will not be round and your source image will be untouched.

class StreamDrawable extends Drawable {

    private final float mCornerRadius;
    private final RectF mRect = new RectF();
    private final BitmapShader mBitmapShader;
    private final Paint mPaint;
    private final int mMargin;

    StreamDrawable(Bitmap bitmap, float cornerRadius, int margin) {
        mCornerRadius = cornerRadius;

        mBitmapShader = new BitmapShader(bitmap,
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);

        mMargin = margin;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect.set(mMargin, mMargin, bounds.width() - mMargin, bounds.height() - mMargin);


    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        mPaint.setColorFilter(cf);
    }       
}

In the StreamDrawable constructor I have to provide the bitmap for the image which is not possible because of the SmartImageView library I'm using(maybe possible with very complex threading) — Pranav Mahajan, Mar 06 '14 at 05:38

score 0 · Answer 4 · answered Mar 05 '14 at 14:38

0

You can add rounded corners in a android view with the GradientDrawable. So ,

GradientDrawable gd = new GradientDrawable();
gd.setColor(Color.TRANSPARENT);
gd.setCornerRadius(15f);
gd.setStroke(1f,Color.BLACK);
yourImageView.setBackground(gd);

answered Mar 05 '14 at 14:38

karvoynistas

1,295
1
14
30

yourImageView.setBackground(gd); requires min API level 16 i.e. ver 4.1. That will seriously reduce my app's usability. – Pranav Mahajan Mar 06 '14 at 05:46
1

And this method is still showing rectangular images, not circular. – Pranav Mahajan Mar 06 '14 at 05:48

Alexander Sidikov Pfeif · Answer 5 · 2014-04-05T14:30:25.193

SmartImageView extends from ImageView .. so you just have to extend from SmartImageView

Here is a working solution (based on pskink code & smartImageView lib )

Create a new Class

public class RoundedCornersSmartImageView extends SmartImageView{

private int RADIUS = 0;
private RectF mRect;
private Path mClip;

public RoundedCornersSmartImageView(Context context) {
    super(context);
    init();
}

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

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

@Override
public void onDraw(Canvas canvas) {
    Drawable dr = getDrawable();
    if (dr != null) {
        mRect.set(dr.getBounds());
        getImageMatrix().mapRect(mRect);
        mRect.offset(getPaddingLeft(), getPaddingTop());
        mClip.reset();
        mClip.addRoundRect(mRect, RADIUS, RADIUS, Path.Direction.CCW);

        canvas.clipPath(mClip);
        super.onDraw(canvas);
    }
}

public void setRadius(int radius){
    this.RADIUS = radius;
}

private void init(){
    mRect = new RectF();
    mClip = new Path();
}
}

USAGE

in your layout file your SmartimageView should look like this

<your.package.path.RoundedCornersSmartImageView
        android:id="@+id/list_image"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:src="@drawable/profile_anonyme_thumb"/>

..and init the view in your code this way

RoundedCornersSmartImageView thumb_image=(RoundedCornersSmartImageView) findViewById(R.id.list_image);

thumb_image.setRadius(4);
//SmartImageView methode 
thumb_image.setImageUrl(bla.MY_THUMB_URL));

Edit your radius for a round image ..

Sorry for the late reply. Sadly it didn't work out. I think the issue is because thumb_image.setImageUrl(); takes some time to fetch from the web. Somehow we have to use setradius(4); after the setImageUrl(); has been executed completely. — Pranav Mahajan, Apr 10 '14 at 10:15
did it work for you?? If yes, then remove android:src from your code & then make it work — Pranav Mahajan, Apr 10 '14 at 10:23
first set radius to 32! .. then load the image.. with thumb_image.setImageUrl(...) .. i will try it for you with a big image ... — Alexander Sidikov Pfeif, Apr 10 '14 at 14:23

Make Image view rounded (not the image)

5 Answers5

USAGE

Linked