Changing Image as Rounded Corner

Question

I've one listview with some items. In my listview i've using custom adapter for displaying the items with images. My images in items are coming from JSON My images are like this -

Needed

Now, I just need the image with rounded corner. How do i achieve this?

http://stackoverflow.com/questions/6539781/android-imageview-with-rounded-corners-not-working — Samir Mangroliya, Mar 01 '12 at 13:58

score 9 · Accepted Answer · answered Mar 01 '12 at 14:33

9

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
    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 = 12;

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

code extracted from http://ruibm.com/?p=184

answered Mar 01 '12 at 14:33

JuanMa Cuevas

1,162
9
22

I've been experimenting the values for the `roundPx` but the ImageView is somehow oblong. What value should I supply to `roundPx` to get the same shape as the OP's Needed Image? – Compaq LE2202x Sep 27 '13 at 10:32
roundPX should be the radius of the corner. Check [the official documentation](http://developer.android.com/reference/android/graphics/Canvas.html#drawRoundRect). Try bigger values. [Here](http://android-er.blogspot.nl/2011/08/canvasdrawroundrect.html) you can see an example with radius = 100 and 50 – JuanMa Cuevas Sep 27 '13 at 12:05
Not working well when trying to set imageview's scaletype, only fitXY is working, centerCrop and other are showing unpredictable results, anyone here got same issues? – Shubham A. Sep 01 '15 at 03:46

score 1 · Answer 2 · answered Mar 01 '12 at 13:59

Bitmap myCoolBitmap = ... ; // <-- Your bitmap you want rounded    
int w = myCoolBitmap.getWidth(), h = myCoolBitmap.getHeight();

We have to make sure our rounded corners have an alpha channel in most cases

Bitmap rounder = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(rounder);

We're going to apply this paint eventually using a porter-duff xfer mode. This will allow us to only overwrite certain pixels. RED is arbitrary. This could be any color that was fully opaque (alpha = 255)

Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
xferPaint.setColor(Color.RED);

We're just reusing xferPaint to paint a normal looking rounded box, the 20.f is the amount we're rounding by.

canvas.drawRoundRect(new RectF(0,0,w,h), 20.0f, 20.0f, xferPaint);

Now we apply the 'magic sauce' to the paint

xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
Now apply this bitmap ontop of your image:

canvas.drawBitmap(myCoolBitmap, 0,0, null);
canvas.drawBitmap(rounder, 0, 0, xferPaint);

score 1 · Answer 3 · answered Mar 01 '12 at 15:03

public static 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;
}

score 0 · Answer 4 · edited May 23 '17 at 10:32

0

Check out this previous thread, brilliant answer on how to get rounded edges for bitmap images.

edited May 23 '17 at 10:32

Community

1
1

answered Mar 01 '12 at 14:04

skyllo

365
3
18

Changing Image as Rounded Corner

4 Answers4

Linked