Home » Java » Android Color Notification Icon

Android Color Notification Icon

Posted by: admin November 17, 2021 Leave a comment

Questions:

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:

enter image description here

Colored notification in drop down menu:

enter image description here

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));
    }
Answers:

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.

###

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

###

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:

enter image description here

Sample without Color:
enter image description here

###

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())
}

###

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

enter image description here

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" />

###

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

###

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
enter image description here

###

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

  1. Right click on drawable>new>image assets
  2. select icon type to Notifications icon
  3. Play around with the dimensions according to your needs.
    enter image description here
  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();

###

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

###

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);