Why Is My Smallicon for Notifications Always Greyed Out

Why is my smallIcon for Notifications always greyed out?

Follow this link

First let’s understand the Android documentation which is as follows

“Update or remove assets that involve color. The system ignores all
non-alpha channels in action icons and in the main notification icon.
You should assume that these icons will be alpha-only. The system
draws notification icons in white and action icons in dark gray.”

Now this is easy to miss and I have seen many apps that are live in the app store with thousands of users who haven’t followed the mentioned guidelines.

So let me explain in detail how you can convert your notification icon to an Android friendly one with a few clicks.

In your favourite image editor open up your icon file. Convert all parts of the image that you don’t want to show to transparent pixels. All colors and non transparent pixels are displayed in white. Let us go through an example.

Sample Image

EDITED: Thanks @Andrey Patseiko for the tool

Push Notifications icon displaying gray color

Finally this issue solved by changing the color of icon. Whatever the content of notification icon we want to show that should be in Gray color & background of icon should be White. Example image

Sample Image

I did not notice size concern, however the preferred size should be

  • mdpi (160 dpi) 24 x 24 px
  • hdpi (240 dpi) 36 x 36 px
  • xhdpi (320 dpi) 48 x 48 px
  • xxhdpi (400 dpi) 60 x 60 px

Notification icon on Android shown as a white square

I think you generated the icons of wrong size.
I re-generated them using the android asset studio and seems to be working at my end.
You can download then using this link:

https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=text&source.text.text=capenergy&source.space.trim=1&source.space.pad=0&name=ic_stat_capenergy

Android Push Notifications: Icon not displaying in notification, white square shown instead

Cause: For 5.0 Lollipop "Notification icons must be entirely white".

If we solve the white icon problem by setting target SDK to 20, our app
will not target Android Lollipop, which means that we cannot use
Lollipop-specific features.

Solution for target Sdk 21

If you want to support Lollipop Material Icons, then make transparent icons for Lollipop and the above version. Please refer to the following:
https://design.google.com/icons/

Please look at http://developer.android.com/design/style/iconography.html, and we'll see that the white style is how notifications are meant to be displayed in Android Lollipop.

In Lollipop, Google also suggests that we use a color that will be displayed behind the white notification icon. Refer to the link: https://developer.android.com/about/versions/android-5.0-changes.html

Wherever we want to add Colors
https://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setColor(int)

Implementation of Notification Builder for below and above Lollipop OS version would be:

Notification notification = new NotificationCompat.Builder(this);
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
notification.setSmallIcon(R.drawable.icon_transperent);
notification.setColor(getResources().getColor(R.color.notification_color));
} else {
notification.setSmallIcon(R.drawable.icon);
}

Note: setColor is only available in Lollipop and it only affects the background of the icon.

It will solve your problem completely!!

Firebase Notification is grey flutter

Here you can read:

Customize default notification

Custom default icon

Setting a custom default icon allows you to specify what icon is used
for notification messages if no icon is set in the notification
payload. Also use the custom default icon to set the icon used by
notification messages sent from the Firebase console. If no custom
default icon is set and no icon is set in the notification payload,
the application icon (rendered in white) is used.

Custom default Color

You can also define what color is used with your notification.
Different android versions use this settings in different ways:
Android < N use this as background color for the icon. Android >= N
use this to color the icon and the app name.

Try putting that in your AndroidManifest.xml

<!-- Set custom default icon. This is used when no icon is set for incoming notification messages. -->
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@drawable/ic_stat_ic_notification" />
<!-- Set color used with incoming notification messages. This is used when no color is set for the incoming notification message. -->
<meta-data
android:name="com.google.firebase.messaging.default_notification_color"
android:resource="@color/colorAccent" />

You can find more info here.

You also need to have your colorAccent define. You can create a colors.xml file in your res folder like that:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorAccent">#E91E63</color>
</resources>

In this folder: /android/app/src/main/res/values

Also the icon must be in the drawable folder.

But remember that this icon must be white with a transparent background.

For some type of icons to be colored you need on some device sets meta-tags you already added in yuor AndroidManifest.xml and your icon must follow some specifications (must be white in a transparent background). You can try to generate one here. Give it a try. Remember to put it on drawable folder and update the manifest meta-tag icon name.

Read also this SO question that stengthens up what I've said here.

I've tried on the Pixel 2 emulator running API level 27:

Sample Image

Hope it helps.



Related Topics



Leave a reply



Submit