11

Im trying to create a round frame around my bitmap!

This is what im trying to acheive!

With this code im able to make my bitmap round:

    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 = 0xff4242DB;
    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 = bitmap.getWidth()/2;

    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.drawCircle(0, 0, bitmap.getWidth(), paint);
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}

What i've tried is to draw a circle(the outcommented line) with canvas, but It had no result. Does anyone know how I can add a circular border around it?

EDIT

When I use the line:

canvas.drawCircle(0, 0, bitmap.getWidth(), paint);

The effect is, that 3 corners get rounded but the upper left stays the same(90 degrees) But I can't see any line or circle!

Kara
  • 6,115
  • 16
  • 50
  • 57
Sebastian
  • 2,698
  • 2
  • 17
  • 26

1 Answers1

38

Update

There now is RoundedBitmapDrawable and a corresponding factory in the Support library I recommend to use that, unless more flexibility is required.

Original Answer

You have to draw the circle after the bitmap. This is what did the trick for me. 

int w = bitmap.getWidth();                                          
int h = bitmap.getHeight();                                         

int radius = Math.min(h / 2, w / 2);                                
Bitmap output = Bitmap.createBitmap(w + 8, h + 8, Config.ARGB_8888);

Paint p = new Paint();                                              
p.setAntiAlias(true);                                               

Canvas c = new Canvas(output);                                      
c.drawARGB(0, 0, 0, 0);                                             
p.setStyle(Style.FILL);                                             

c.drawCircle((w / 2) + 4, (h / 2) + 4, radius, p);                  

p.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));                 

c.drawBitmap(bitmap, 4, 4, p);                                      
p.setXfermode(null);                                                
p.setStyle(Style.STROKE);                                           
p.setColor(Color.WHITE);                                            
p.setStrokeWidth(3);                                                
c.drawCircle((w / 2) + 4, (h / 2) + 4, radius, p);                  

return output;

This does of course not include the fancy shadow of your example. You might want to play around a little bit with the additional pixels.

Lovis
  • 9,513
  • 5
  • 31
  • 47
  • 1
    How can I get bigger image from here? – Mohammad Rajob Mar 24 '14 at 09:01
  • hi @lovis , I get figure what is the use of constant 8 and 4 which adding to width and height in different drawing statements, can you please explain it? also one more thing we you added these values (8 and 4) in pixel not with respect to screen density dp – Ayman Mahgoub Mar 20 '16 at 16:18
  • @AymanMahgoub hey, those values are chosen randomly. but they will determine the size of the border. 4px border on the left and right makes 8, same for top and bottom. Using pixels because it's easier for the example. – Lovis Mar 21 '16 at 15:10
  • Thanks @lovis, got it ) – Ayman Mahgoub Mar 21 '16 at 15:18