Android Color Notification Icon

Question

I'm working on an app where I create a notification for the user. I want the icon to appear as white when it's in the status bar, but colored blue when it's being displayed in the drop down notification menu. Here's an example of the same thing being done by the Google Store app.

White notification in status bar:

Colored notification in drop down menu:

How can I replicate this? What properties do I have to set?

Edit: Here's my current code - I made the image all white with a transparent background, so it looks fine in the status bar, but in the notification drop, the image is still the same white color:

private NotificationCompat.Builder getNotificationBuilder() {
        return new NotificationCompat.Builder(mainActivity)
                .setDeleteIntent(deletedPendingIntent)
                .setContentIntent(startChatPendingIntent)
                .setAutoCancel(true)
                .setSmallIcon(R.drawable.skylight_notification)
                .setColor(ContextCompat.getColor(mainActivity, R.color.colorPrimary))
                .setContentTitle(mainActivity.getString(R.string.notification_title))
                .setContentText(mainActivity.getString(R.string.notification_prompt));
    }

I was able to solve this problem - please see my answer below. — Oblivionkey3, Aug 25 '17 at 14:24

score 43 · Accepted Answer · answered Aug 25 '17 at 14:23

43

I found the answer to my question here: https://stackoverflow.com/a/44950197/4394594

I don't know entirely what the problem was, but by putting the huge png that I was using for the icon into the this tool https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=ic_skylight_notification and by placing the generated icons it gave into my mipmap folder, I was able to get the setColor(...) property to work correctly.

answered Aug 25 '17 at 14:23

Oblivionkey3

1,752
2
17
25

1

THANK YOU! I spent way too long trying to figure out why my notification icon was still appearing white in the notification banner, and finally with that tool my notification icon correctly uses the color in the banner (while still being white in the status bar) – Andrew Leader Oct 16 '17 at 07:20
2

To everyone who ended up here and is genering icons with photoshop (or any other graphic design tool). Don't use CMYK mode! Use RGB when creating/exporting an icon - it helped in my case – Mikolaj Kieres Aug 19 '18 at 12:01
1

I used this tool, my image is a pure white transparent PNG and I made sure it's in the RGB color space, but `SetColor` still doesn't work. What am I missing? – Bip901 Jan 31 '21 at 15:33
To anyone still stuck, try downscaling the image. A 72x72 icon didn't work for me, but 48x48 did. – Bip901 Feb 03 '21 at 11:55

score 41 · Answer 2 · answered Feb 13 '18 at 15:10

41

For firebase nofitications sent from console you just need to add this in your manifest:

    <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/white_logo" />

    <meta-data
        android:name="com.google.firebase.messaging.default_notification_color"
        android:resource="@color/custom_color" />

Where white_logo is your app white logo, and custom_color is the color you want to have the icon and text colored.

More details here: https://firebase.google.com/docs/cloud-messaging/android/client

answered Feb 13 '18 at 15:10

radu_paun

1,940
21
25

Added the icon as suggested by the "Oblivionkey3" but after `adding ` icon color set to custom. Before this icon color was grey on Andriod Oreo notification (Status bar was icon being displayed in white). – Pradip Tilala Mar 25 '19 at 06:38
1

what is `custom_color` ? and how to set it? – mukesh.kumar Jul 24 '19 at 09:58
See also: https://github.com/firebase/quickstart-android/tree/master/messaging#customize-default-notification – Raul Pinto Sep 02 '19 at 14:46
@mukesh.kumar, custom_color is any color you want to use. you just need to declare it in colors file – radu_paun Sep 09 '19 at 09:20

score 25 · Answer 3 · answered Aug 25 '17 at 05:26

Here is what I did for my app ...

private void showNotification(Context context) {
    Log.d(MainActivity.APP_TAG, "Displaying Notification");
    Intent activityIntent = new Intent(context, MainActivity.class);
    PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, activityIntent, PendingIntent.FLAG_UPDATE_CURRENT);
    NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context);
    mBuilder.setSmallIcon(R.drawable.ic_notification);
    mBuilder.setColor(Color.GREEN);
    mBuilder.setContentIntent(pendingIntent);
    mBuilder.setContentTitle("EarthQuakeAlert");
    mBuilder.setContentText("It's been a while you have checked out earthquake data!");
    mBuilder.setDefaults(Notification.DEFAULT_SOUND);
    mBuilder.setAutoCancel(true);
    NotificationManager mNotificationManager = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE);
    mNotificationManager.notify(1, mBuilder.build());
}

Sample With Color:

Sample without Color:

score 15 · Answer 4 · edited Mar 16 '18 at 10:59

15

When building the notification, you can set the color and the icon. If your icon is a pure white image, it'll apply the color for you in the correct spots.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    val manager = context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
    val notificationId = 10 // Some unique id.

    // Creating a channel - required for O's notifications.
    val channel = NotificationChannel("my_channel_01",
            "Channel human readable title",
            NotificationManager.IMPORTANCE_DEFAULT)

    manager.createNotificationChannel(channel)

    // Building the notification.
    val builder = Notification.Builder(context, channel.id)
    builder.setContentTitle("Warning!")
    builder.setContentText("This is a bad notification!")
    builder.setSmallIcon(R.drawable.skull)
    builder.setColor(ContextCompat.getColor(context, R.color.colorPrimary))
    builder.setChannelId(channel.id)

    // Posting the notification.
    manager.notify(notificationId, builder.build())
}

edited Mar 16 '18 at 10:59

Komal12

3,340
4
16
25

answered Aug 25 '17 at 05:18

advice

5,778
10
33
60

1

Unfortunately all that changing the color did for me was change the color of the text next to the image in the notification drop down, not change the color of the image at all. – Oblivionkey3 Aug 25 '17 at 05:21
Are you using a pure white icon as your small icon? It should colour that when it needs to. – advice Aug 25 '17 at 05:22
It's pure white with a transparent background, and it's saved as a png – Oblivionkey3 Aug 25 '17 at 05:23
I edited my post, and tested some code on O, and the code above works for making my icon and text both my `color_primary` when pulled down, and just pure white when not. Hopefully that'll help more. – advice Aug 25 '17 at 05:54
I appreciate your help, but I managed to find solve this using another method which I just added to this page. – Oblivionkey3 Aug 25 '17 at 14:24
Cool, glad you could figure it out. – advice Aug 25 '17 at 17:41
1

God bless you Advice-Dog. This was the answer I needed tonight. – Michael Alan Huff Oct 30 '20 at 04:09

Kishan Solanki · Answer 5 · 2021-03-15T10:17:02.637

I might be late to the party but all above answers are not relevant or deprecated.

You can achieve this easily by using setColor method of NotificationCompat.Builder

Example:

val builder = NotificationCompat.Builder(this, "whatever_channel_id")
        .setSmallIcon(R.drawable.ic_notification) //set icon for notification
        .setColor(ContextCompat.getColor(this, R.color.pink))
        .setContentTitle("Notification Title")
        .setContentText("Notification Message!")

Now it will show notification as pink color

Note: If you are using firebase then the color won't be seen directly. You have to add this in manifest file.

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_notification" />

<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/pink" />

They should have called "setColor" "setIconColor" instead and it woud have been obvious. — Johann, Jan 07 '22 at 12:10

score 2 · Answer 6 · answered Aug 31 '19 at 08:25

If you want to change color and title name as per gmail and twitter in Push notification or inbuilt notification then you need to add these lines in notification.

 builder.setSmallIcon(R.drawable.skull)
    builder.setColor(ContextCompat.getColor(context, R.color.colorPrimary))

First line used for icon and in second line you need to define color

score 1 · Answer 7 · answered Jul 07 '21 at 17:07

For those who is using admin sdk like me follow this add these in manifest.xml

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_notification" />

<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/pink" />

in your message payload add the icon name color You want!

var payloadImage = {
    notification: {
      title: data.title,
      image: `${data.body}`,
      sound: "default",
      color: "#b75061",
    },
  };

Result

score 1 · Answer 8 · answered Jul 08 '21 at 07:19

I have faced the same issue. simple solution that i have found

Right click on drawable>new>image assets
select icon type to Notifications icon
Play around with the dimensions according to your needs.

  NotificationManagerCompat compat = NotificationManagerCompat.from(this);
        Notification notification = new NotificationCompat.Builder(this, CHANNEL_1_ID)
                .setSmallIcon(R.drawable.notification_icon)
                .setColor(ContextCompat.getColor(getApplicationContext(), R.color.white))
                .setVibrate(new long[]{100, 500, 100, 5000})
                .setContentTitle(title)
                .setContentText(message)
                .setStyle(new NotificationCompat.BigTextStyle()
                        .bigText(message))
                .setPriority(NotificationCompat.PRIORITY_DEFAULT)
                .setVibrate(vibrate)
                .build();

score 0 · Answer 9 · answered Aug 25 '17 at 05:26

0

You can use the DrawableCompat.setTint(int drawable); of the drawable before setting the drawable. And do mutate() the drawable otherwise the color tint will be applied to every instance of that drawable

answered Aug 25 '17 at 05:26

Umar Hussain

3,461
1
16
38

1

I'd advise against this or else you'll have a coloured icon within the status bar. – advice Aug 25 '17 at 06:00

score -1 · Answer 10 · answered Sep 15 '20 at 05:23

Create your Notification Icon using "Asset Studio" available in the Android Studio itself (Right Click res folder and New > Image Asset)

Android Studio New Image Asset Studio Menu

Then set the color for notification

int color = Color.argb(255, 228, 14, 18);

NotificationCompat.Builder notificationBuilder =
            new NotificationCompat.Builder(this, channelId)
                    .setSmallIcon(R.drawable.ic_stat_notification)
                    .setContentTitle(title)
                    .setContentText(messageBody)
                    .setAutoCancel(true)
                    .setSound(defaultSoundUri)
                    .setContentIntent(pendingIntent)
                    .setColor(color)
                    .setPriority(NotificationCompat.PRIORITY_HIGH);

score -1 · Answer 11 · answered Nov 07 '22 at 12:18

If you are looking for an icon color or icon for notification on the right side, then follow the steps:

create the res folder with sub-folders like drawable,drawable-hdp,drawable-xhdp..etc. [You can create this folder by Notification icon generator
After adding your folders, inside you will get a file with a .png image.

the drawable folders contains one .png file each, repleace the png file with you logo, or you can use any image there with same older name like if your older icon name is "notification_icon.png", then rename the new image with "notification_icon.png".
That's it. This will only work, if your logo is coming like black-and-white.

Thank you.

Android Color Notification Icon

11 Answers11

Linked