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?

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

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

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

Answer 4

I think it will work fine when the input bitmap to be a perfect square (same height and width) which give perfect circle but if your bitmap is in rectangle-shaped or width is more then height than it creates a problem. I have modified the code to into kotlin also added a border to it only you need to give input as bitmap

private fun getCircleBitmap(bitmap: Bitmap): Bitmap 

  {

    var srcRect: Rect

    var dstRect: Rect

    var r: Float

    var paint = Paint();

    var width: Int = bitmap.getWidth()

    var height: Int = bitmap.getHeight()

    var widthToGenerate = 100F

    var heightToGenerate = 100F

    var borderWidth: Float = 1.toFloat()

    var output: Bitmap

    var canvas: Canvas

    if (width > height) {

        output = Bitmap.createBitmap(widthToGenerate.toInt(), heightToGenerate.toInt(), Bitmap.Config.ARGB_8888);

        canvas = Canvas(output);
        val scale: Float = (widthToGenerate / width)


        var xTranslation = 0.0f
        var yTranslation: Float = (heightToGenerate - height * scale) / 2.0f;


        var transformation = Matrix();
        transformation.postTranslate(xTranslation, yTranslation)
        transformation.preScale(scale, scale)

        var color: Int = Color.WHITE
        paint.setAntiAlias(true)
        paint.setColor(color)

        canvas.drawBitmap(bitmap, transformation, paint)

    } else {
        output = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888)
        canvas = Canvas(output);
        var top: Int = (height - width) / 2
        var bottom: Int = top + width
        srcRect = Rect(0, top, width, bottom)
        dstRect = Rect(0, 0, width, width);
        r = (width / 2).toFloat()


        var color: Int = Color.GRAY
        paint.setAntiAlias(true)
        canvas.drawARGB(0, 0, 0, 0)
        paint.setColor(color)


        canvas.drawCircle(r + borderWidth, r + borderWidth, r + borderWidth, paint)
        canvas.drawCircle(r, r, r, paint)
        paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.SRC_IN))

        canvas.drawBitmap(bitmap, srcRect, dstRect, paint)

        bitmap.recycle()
    }

    return output

}

notifiation_drawable.xml file for border

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2.0"
android:useLevel="false" >
<solid android:color="@android:color/transparent" />
<stroke
    android:width="2dp"
    android:color="@android:color/darker_gray" />

</shape>