Notification bar icon turns white in Android 5 Lollipop

Question

I have an app showing custom notifications. The problem is that when running in Android 5 the small icon in the Notification bar is shown in white. How can I fix this?

Solution 1

The accepted answer is not (entirely) correct. Sure, it makes notification icons show in color, but does so with a BIG drawback - by setting the target SDK to lower than Android Lollipop!

If you solve your white icon problem by setting your target SDK to 20, as suggested, your app will not target Android Lollipop, which means that you cannot use Lollipop-specific features.

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

In Lollipop, Google also suggest that you use a color that will be displayed behind the (white) notification icon - https://developer.android.com/about/versions/android-5.0-changes.html

So, I think that a better solution is to add a silhouette icon to the app and use it if the device is running Android Lollipop.

For instance:

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

    return notification;

And, in the getNotificationIcon method:

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

Solution 2

Completely agree with user Daniel Saidi. In Order to have Color for NotificationIcon I'm writing this answer.

For that you've to make icon like Silhouette and make some section Transparent wherever you wants to add your Colors. i.e,

You can add your color using

.setColor(your_color_resource_here)

NOTE : setColor is only available in Lollipop so, you've to check OSVersion

if (android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    Notification notification = new Notification.Builder(context)
    ...
} else {
    // Lollipop specific setColor method goes here.
    Notification notification = new Notification.Builder(context)
    ...
    notification.setColor(your_color)
    ...            
}

You can also achieve this using Lollipop as the target SDK.

All instruction regarding NotificationIcon given at Google Developer Console Notification Guide Lines.

Preferred Notification Icon Size 24x24dp

mdpi    @ 24.00dp   = 24.00px
hdpi    @ 24.00dp   = 36.00px
xhdpi   @ 24.00dp   = 48.00px

And also refer this link for Notification Icon Sizes for more info.

Solution 3

This is the code Android uses to display notification icons:

// android_frameworks_base/packages/SystemUI/src/com/android/systemui/
//   statusbar/BaseStatusBar.java

if (entry.targetSdk >= Build.VERSION_CODES.LOLLIPOP) {
    entry.icon.setColorFilter(mContext.getResources().getColor(android.R.color.white));
} else {
    entry.icon.setColorFilter(null);
}

So you need to set the target sdk version to something <21 and the icons will stay colored. This is an ugly workaround but it does what it is expected to do. Anyway, I really suggest following Google's Design Guidelines: "Notification icons must be entirely white."

Here is how you can implement it:

If you are using Gradle/Android Studio to build your apps, use build.gradle:

defaultConfig {
    targetSdkVersion 20
}

Otherwise (Eclipse etc) use AndroidManifest.xml:

<uses-sdk android:minSdkVersion="..." android:targetSdkVersion="20" />

Solution 4

To avoid Notification icons to turn white, use "Silhouette" icons for them, ie. white-on-transparent background images. You may use Irfanview to build them:

• choose a picture, open in IrfanView, press F12 for the painting tools, clean picture if necessary (remove unwanted parts, smooth and polish)
• Image / Decrease Color Depth to 2 (for a black & white picture)
• Image / Negative (for a white on black picture)
• Image / Resize/Resample to 144 x 144 (use Size Method "Resize" not "Resample", otherwise picture is increased to 24 color bits per pixel (24 BPP) again
• File / Save as PNG, check Show option dialog, check Save Transparent Color, click Save, then click on the black color in the image to set the transparent color

Android seems to be using the drawable-xxhdpi picture resolution (144 x 144) only, so copy your resulting ic_notification.png file to \AndroidStudio\Projects\...\app\src\main\res\drawable-xxhdpi. Use .setSmallIcon(R.drawable.ic_notification) in your code, or use getNotificationIcon() as Daniel Saidi suggested above.

You may also use Roman Nurik's Android Asset Studio.

Solution 5

Another option is to take advantage of version-specific drawable (mipmap) directories to supply different graphics for Lollipop and above.

In my app, the "v21" directories contain icons with transparent text while the other directories contain non-transparent version (for versions of Android older than Lollipop).

Which should look something like this:

This way, you don't need to check for version numbers in code, e.g.

PendingIntent pendingIntent = PendingIntent.getActivity(this, 0 /* Request code */, intent,
            PendingIntent.FLAG_ONE_SHOT);

Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
        .setSmallIcon(R.mipmap.ic_notification)
        .setContentTitle(title)
        .setContentText(message)
        .setAutoCancel(true)
        .setSound(defaultSoundUri)
            .setContentIntent(pendingIntent);

Likewise, you can reference "ic_notification" (or whatever you choose to call it) in your GCM payload if you use the "icon" attribute.

https://developers.google.com/cloud-messaging/http-server-ref#notification-payload-support

View more solutions

Comments

[Rivu Chakraborty]

Rahul Sharma and basiam has a better answer here - stackoverflow.com/questions/30795431/…

[Jaime Montoya]

It happens to me when running in Android 6, not 5.

[Alejandro Casanova]

Sure, it happens with Android 5+, of course also in Android 6 and 7. By the time of the question Android 5 was the latest version and the feature causing this issue was introduced in Android 5.

[Jaime Montoya]

I think it is more accurate to say API Level 21 (Android 5.0), API Level 22 (Android 5.1), API Level 23 (Android 6.0), etc. The term "Android 5" is ambiguous because you could be talking about Android 5.0 or Android 5.1, and when I have been testing notifications and the way icons appear in API Level 22 Vs. API Level 23, I have realized that they behave differently.

[AdamHurwitz]

Possible duplicate of Why do icons set with Notification.Builder.setSmallIcon in Android Lollipop show as a white square?

[Alejandro Casanova]

Is there any workaround? Or what can I do to show that or any other icon properly?

[ByteHamster]

I have edited my answer as I have found a workaround after reading the Android source code.

[Alejandro Casanova]

Great thanks for your help, but cud you pleae provide me with some "context". Where do I need to do that? Whats is "entry"?

[ByteHamster]

The code was taken from AOSP just to show how I found the workaround :) I have added a small explanation on how to implement it.

[m02ph3u5]

This actually works. Any guesses why Google did this? Is this a bug or a feature?

[ByteHamster]

@m02ph3u5: seems like it is intended for compatibility reasons (eg give app developers time to add a new white icon). Anyway, this method might not work in newer versions of Android. In my opinion you should follow Googles design guidelines and use white icons.

[m02ph3u5]

@ByteHamser white icons? It ain't showing any icon at all, just a white circle.

[ByteHamster]

It displays the silhouette of your icon. You should create an icon with a unique silhouette

[Daniel Saidi]

How is setting down the target SDK so that your app does NOT compile for Android Lollipop a solution?

[ByteHamster]

targetSdkVersion != maxSdkVersion => If you do not use new APIs introduced in Lollipop, this is not a problem. The app will run without any problems. (Of course you should follow the design guidelines and consider to switch to a white icon in the future)

[Daniel Saidi]

Yeah, that is what I meant, but you're correct in that my text was somewhat unclear. I've modified that section and hope that it's easier to understand. Thanks!

[TejaDroid]

this is very good idea for set background color as notification.setColor(your_color_resource_here)

[ByteHamster]

@meh: Yes, they decided that white icons fit better to Material Design. There is no guarantee that my answer will continue to work in later Android versions, so you should consider creating a special icon.

[Chaitanya]

How do you generate the silhouette? I am developer with no photoshop skills and making background transparent using online tools still results in white icons.

[ByteHamster]

@Chaitanya Use GIMP :)

[Bruce]

I tried to convert my icon using photoshop but failed, but being an irfanview fan I quickly tried this when I saw it and it worked wonderfully. Thanks!

[Admin]

i try setLargeIcon + setSmallIcon and I see a icon white

[Stealth Rabbi]

So I've tried this, and the notification icon has the colored background when I pull the notification shade down. But, in the tray itself, it's still a white icon

[sud007]

Totally bad Idea to play "tricks" with the system! Not a solution!

[Sergey Galin]

This works and looks like the most Android-way solution.

[IgorGanapolsky]

Where exactly are you fixing the problem here?

[Allen Vork]

could you give me a valid icon please? I've tried a square white icon,it doesn't work on 5.0 too. my email is [email protected] thx

[Lakshay Dulani]

are your saying that if android will pick icon from folder mipmap-21 if version is lollipop, and if less than lollipop it will pick from drawable?

[Lakshay Dulani]

this solution is right..have a notification icon that has transparent back..and by silhouette, the icon need not be black only..the icon can have colors; its just that the android L will convert show color as white..and previous android versions will show the icon as it is

[philk]

this solution does not answer the question why the android build process modifies a perfectly well correct PNG and compresses it and removes the alpha channel.

[Jiks]

How To create right icon. It is possible to online generate? any tool??

[user25]

developer.android.com/design/style/iconography.html leads to material.google.com/style/icons.html and when I pressing ctrl+f and typing notification on that page it can't find anything...

[Harsha]

am adding setColor for below lollipop showing ic_launcher icon fine but in 6.0 showing white square icon please help me

[Muhammad Sohaib Ayub]

@Jiks Yes, here is link

[Romulus Urakagi Ts'ai]

I have GIMP but I don't have the skill to generate silhouette. What can I do?

[Jaime Montoya]

I have a 72 x 72 icon.png file that has a white background and my logo sitting on top of that white background. From what I understand, instead of my icon.png I should use icon_silhouette.png, which would be a file with transparency instead of a white background, and my logo sitting on top of the transparent background. Is this correct?

[Jaime Montoya]

I am reading the following at developer.android.com/about/versions/android-5.0-changes.htm‌​l: "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." So basically instead of my icon.png (PNG file with white background and no transparency), I should generate the icon_silhouette.png file (PNG file with transparency instead of a white background), and that should solve the problem, correct?

[Igor]

instead of checking from code applay platform version modifier to drawable folder - drawable / drawable-v21 and place proper icon

[Munib]

Doesn't lowering the target version affect the app?

[ByteHamster]

Yes, it affects the app. This is why I stated that it's an ugly workaround and suggested not to do it this way. As you might notice, this answer is over 2 years old. This was a proper solution to get more time for creating the white assets back then. Today, you shouldn't really do that anymore.

[king_below_my_lord]

Please don't follow this solution, sure it might work but at the cost of running your apps in compatibility mode for the newer versions of Android.

[Maria]

I've tested setColor on Kitkat (API 19) and IceCreamSandwich (API 15), in both case it ignored the color but didn't crash. So can I safely omit checking OS version?

[Maria]

I've tested setColor on Kitkat (API 19) and IceCreamSandwich (API 15), in both case it ignored the color but didn't crash. So can I safely omit checking OS version?

[Ciro Santilli OurBigBook.com]

@JohnLee I don't think it can crash, only may look bad if you don't take it into account :-)

[shinzou]

Where did you place that icon? All I get is the icon of my app and all the R.drawable files I find are binary class files.

[Johnson]

@kuhaku he is referring to an ic_launcher.png file in the 'drawable' folder.

[controlbox]

I have a white logo with transparent background as my notification. All the correctly sized hdpi, xhdpi versions created using the online tool mentioned, but the notification disappears when a different app turns the notification bar white. My notification icon doesn't change - it's still white, but all the others change to dark grey to become visible. Any ideas what I'm doing wrong?

[Daniel]

@Ian , the directories approach is good for resource per android version, but how can you set the setColor (without involving extra code) in that way ?

[Ian]

@Daniel colors can be in version-specific directories too, e.g. "values" and "values-v21".

[soshial]

This is a new notification icon guideline from Google.

[Pooja]

Very helpful. I spend a whole day to solve this in coding part. But actual problem is silhouette icon. Thanks a lot.

[caw]

There are archived versions of the icon guidelines and the Android 5 (API level 21) changes