Large notification icon background

Question

Since Android 5.0 large icons in notifications have color background:

lollipop-notification

For small icon, it is the accent color of notification (Notification.Builder.setColor(int)). How do I set it for large icon? Is it part of the actual image? If it is, what should the circle radius be?

alxscms · Accepted Answer · 2015-01-22T13:42:55.463

33

Yes, the color of the large icon is part of the actual image. The dimensions of the large icon on lollipop are 40x40dp with a optical view filling the entire image. So you should create an asset of 40x40dp with a circle of a 20dp radius. You can set the notification's large icon as follows:

NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context)
    .setSmallIcon(R.drawable.notification_small_icon)
    .setLargeIcon(notificationLargeIconBitmap)
    .setContentTitle("Notification")
    .setContentText("Content text")
    .setColor(context.getResources().getColor(R.color.accent_color));

If you need the large icon to be from a drawable resource you can get a Bitmap instance like this:

Bitmap notificationLargeIconBitmap = BitmapFactory.decodeResource(
    context.getResources(), 
    R.drawable.notification_large_icon);

If you want your notification to be displayed nicely with previous versions of android (kitkat and below), you should have a squared version of your large icon with a dimension of 64x64dp.

edited Jan 22 '15 at 13:42

answered Dec 27 '14 at 13:52

alxscms

3,067
6
22
43

The dimensions of the large icon should be 64x64dp, not 40x40dp. Checked it in Android SDK. – igla Jan 21 '15 at 22:40
The dimension of the large icon is actually 64x64dp on kitkat and below, but on lollipop it is 40x40dp. I can not retrieve the source where I found the information though. – alxscms Jan 22 '15 at 13:39
No, you are wrong with Lollipop. I tested it and found out that the icon is blurred if the dimensions of large icon are 40x40dp. Android 21 SDK sources also point to the fact that the size should be 64x64dp. You can check it yourself :) – igla Jan 22 '15 at 16:29
1

That is very weird, because the actual image shown on the notification is definitely 40x40dp. Would that mean that android is scaling it up to 64x64dp and then down to 40x40dp? What a weird process. I need some time to check this out. – alxscms Feb 06 '15 at 09:16
I had to use 96dp square to get a non blurry image on my Lollipop device. – Casey Apr 15 '15 at 08:02
I think you’re confusing dp and px values. dp stands for device-independent pixel, whereas px means actual pixels on the display. Notification Icons are 24dp x 24dp (i.e a 20dpx20dp content area). Depending on the screen densitiy of the device that results in 2x, 3x or 0.75x, … that value in actual pixels. See also: http://developer.android.com/design/style/iconography.html or http://www.google.com/design/spec/style/icons.html#icons-system-icons – Erik May 11 '15 at 09:29
if i use 40x40for large icon atlease can able to see that change from white square icon – Harsha Nov 16 '16 at 12:20
i tried but still showing white square icon only please any one give correct and some helpfull code for prelollipop and above 5.0 please – Harsha Nov 16 '16 at 13:10

score 1 · Answer 2 · answered Feb 03 '21 at 12:00

You could use icon with transparent background as large icon for notification. Also you could tint large and small icons.
As already said use setColor() to tint small icon.
And for the large icon use this function:

fun Bitmap.tint(color: Int): Bitmap =
    Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888).also { outBmp ->
        Canvas(outBmp).drawBitmap(
            this, 0f, 0f,
            Paint().apply {
                this.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
            }
        )
    }

So your code will look like this:

    NotificationCompat.Builder(context)
        .setColor(yourColor)
        .setLargeIcon(largeBitmap.tint(yourColor))
        .setSmallIcon(R.drawable.small_icon)

Here what you could get on Android 5.0: On Android 10:

score 0 · Answer 3 · answered Nov 19 '14 at 17:56

0

An large icon should always have a background (i.e. avatar). It's also used on wear devices as background for a notification. It's displayed on different background colors, therefore it should be a non-transparent picture.

answered Nov 19 '14 at 17:56

notz

2,458
2
15
11

No, it should not. If you need a squared resource for wearable devices, you can have multiple versions of the same resource for different devices. – alxscms Feb 06 '15 at 09:07
Of course you can, but it's much overhead for nothing. And if you have dynamic icon it's even more overhead to extra round it when it is displayed with a rounded masked anyway. Keep things simple. – notz Feb 06 '15 at 12:03

Large notification icon background

3 Answers3

Linked