46

I tried making the small icon exactly 16x16, gray-scaled, nothing but gray and white (the gray color being hex value 616161), to create a silhouette of my application icon.

Yet no matter what it just shows up as a white/gray square in the notifications. What am I doing wrong?

(My min api is 21, assuming it is relevant)

user8367195
  • 467
  • 1
  • 4
  • 7
  • 1
    change mini api is 20 – Naveen Tamrakar Jul 26 '17 at 06:04
  • 1
    I'd prefer not to change my min API because then I lose certain features I rely on elsewhere – user8367195 Jul 26 '17 at 06:05
  • @Phát Phát saying is correct your background image for notification icon must be transparent color – MinnuKaAnae Jul 26 '17 at 06:11
  • See the changes in Android 5 (API level 21) described [here](http://web.archive.org/web/20150207071452/https://developer.android.com/about/versions/android-5.0-changes.html#BehaviorNotifications) and the guidelines explained [here](http://web.archive.org/web/20150209195038/http://developer.android.com/design/style/iconography.html#notification) – caw Mar 15 '21 at 03:48

3 Answers3

93

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.

enter image description here

EDITED: Thanks @Andrey Patseiko for the tool

phatnhse
  • 3,870
  • 2
  • 20
  • 29
  • @nhp would you mind updating the link to the tool you mention? It's malformed – Chisko Jan 29 '19 at 16:59
  • 3
    http://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=ic_notification – Andrey Patseiko Jul 01 '19 at 11:08
  • Android’s official guidelines for that icon are [here](http://web.archive.org/web/20150209195038/http://developer.android.com/design/style/iconography.html#notification) – caw Mar 15 '21 at 03:50
  • I used logo in PNG formate instead of svg formate, woked for me. – Saiful Islam Sajib Aug 17 '21 at 09:54
9

For notification you have to use different icons for different versions of android:

Notification notification = new Notification.Builder(context)
                .setAutoCancel(true)
                .setContentTitle("My notification")
                .setContentText("Look, white in Lollipop, else color!")
                .setSmallIcon(getNotificationIcon())
                .build();
    return notification;

Get notification icon on the basis of version

private int getNotificationIcon() {
    boolean useWhiteIcon = (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP);
    return useWhiteIcon ? R.drawable.icon_silhouette : R.drawable.ic_launcher;
}
Aj 27
  • 2,316
  • 21
  • 29
  • This isn't related to my question, my api will always be >= LOLLIPOP and the problem is the white icon that shows up under that condition – user8367195 Jul 26 '17 at 06:08
  • you have to create 2 different icons for different versions. for >= LOLLIPOP you have to create transparent icon with white color. – Aj 27 Jul 26 '17 at 06:10
  • look at the answer of @Phát Phát so you will get idea. – Aj 27 Jul 26 '17 at 06:11
9

Along with new features and capabilities, Android 5.0 includes a variety of system changes and API behavior changes. See the notification behavior changes.

Notifications are drawn with dark text atop white (or very light) backgrounds to match the new material design widgets. Make sure that all your notifications look right with the new color scheme. If your notifications look wrong, fix them:

  • Use setColor() to set an accent color in a circle behind your icon image.
  • 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.

So, basically you have to use silhouette icons as notification icon for API Level 21+

Laurel
  • 5,965
  • 14
  • 31
  • 57
Anoop M Maddasseri
  • 10,213
  • 3
  • 52
  • 73