Make Notification Large Icon Round

Question

I want to display a circular avatar from the user's contacts as the large icon of the notification - like when receiving a text or mail. When I set the large icon as that contact's image, it results in a square icon.

I'm looking to turn something that looks like the top icon (the square avatar), look like the large icon on the email notification (the round avatar):

How do I make it round?

Solution 1

Since setLargeIcon() accepts a Bitmap, all you need to do is create a circular Bitmap from the source.

Following is the code from Create a circle bitmap in Android (haven't tried myself).

private Bitmap getCircleBitmap(Bitmap bitmap) {
    final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(output);

    final int color = Color.RED;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawOval(rectF, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    bitmap.recycle();

    return output;
}

Solution 2

The accepted answer requires the input bitmap to be a perfect square (same height and width). If your bitmap is rectangle-shaped, it will return an oval. I have modified the code to accept any-shaped bitmaps and return circles centered in the middle of the input bitmap.

public static Bitmap getCircleBitmap(Bitmap bitmap) {
    Bitmap output;
    Rect srcRect, dstRect;
    float r;
    final int width = bitmap.getWidth();
    final int height = bitmap.getHeight();

    if (width > height){
        output = Bitmap.createBitmap(height, height, Bitmap.Config.ARGB_8888);
        int left = (width - height) / 2;
        int right = left + height;
        srcRect = new Rect(left, 0, right, height);
        dstRect = new Rect(0, 0, height, height);
        r = height / 2;
    }else{
        output = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
        int top = (height - width)/2;
        int bottom = top + width;
        srcRect = new Rect(0, top, width, bottom);
        dstRect = new Rect(0, 0, width, width);
        r = width / 2;
    }

    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawCircle(r, r, r, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, srcRect, dstRect, paint);

    bitmap.recycle();

    return output;
}

Solution 3

Egor's answer worked great. Posting code here incase link disappears:

private Bitmap getCircleBitmap(Bitmap bitmap) {
 final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
  bitmap.getHeight(), Bitmap.Config.ARGB_8888);
 final Canvas canvas = new Canvas(output);

 final int color = Color.RED;
 final Paint paint = new Paint();
 final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
 final RectF rectF = new RectF(rect);

 paint.setAntiAlias(true);
 canvas.drawARGB(0, 0, 0, 0);
 paint.setColor(color);
 canvas.drawOval(rectF, paint);

 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
 canvas.drawBitmap(bitmap, rect, rect, paint);

 bitmap.recycle();

 return output;
}

Comments

[Itai Hanski]

I figured that's probably the way to do it. Thanks for the link, it does work. I'm going to tinker with the code a bit.

[Sufian]

It is better to update a link-only answer instead. Anyway, your effort is appreciated. :)

[Micro]

@Sufian Thanks Bruce.

[Isaac Bosca]

If you are using it for show an image on notification, need to remove bitmap.recycle(). In my code, looks like: .setLargeIcon(getCircleBitmap(Picasso.with(this.context).loa‌​d(pictureUrl).get())‌​). Hope this help.

[Sandra]

I am having troubles with images that have bigger width than hight or bigger hight than width, they are displayed like ovals and not circles. How can I solve this problem? Has anybody encountered this issue?

[behelit]

java.lang.IllegalStateException: Can't parcel a recycled bitmap

[Mike Casan Ballester]

This is the best answer (see the perfect square issue)