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

Question

My app generates a notification, but the icon I set for that notification is not being displayed. Instead, I get a white square.

I have tried resizing the png of the icon (dimensions 720x720, 66x66, 44x44, 22x22). Curiously, when using smaller dimensions the white square is smaller.

I have googled this problem, as well as the correct way of generating notifications, and from what I've read my code should be correct. Sadly things are not as they should be.

My phone is a Nexus 5 with Android 5.1.1. The problem is also present on emulators, a Samsung Galaxy s4 with Android 5.0.1 and a Motorola Moto G with Android 5.0.1 (both of which I borrowed, and don't have right now)

The code for notifications follows, and two screenshots. If you require more information, please feel free to ask for it.

Thank you all.

@SuppressLint("NewApi") private void sendNotification(String msg, String title, String link, Bundle bundle) {
    NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
    Intent resultIntent = new Intent(getApplicationContext(), MainActivity.class);
    resultIntent.putExtras(bundle);
    PendingIntent contentIntent = PendingIntent.getActivity(this, 0,
            resultIntent, Intent.FLAG_ACTIVITY_NEW_TASK);
    Notification notification;
    Uri sound = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.notificationsound);
    notification = new Notification.Builder(this)
                .setSmallIcon(R.drawable.lg_logo)
                .setContentTitle(title)
                .setStyle(new Notification.BigTextStyle().bigText(msg))
                .setAutoCancel(true)
                .setContentText(msg)
                .setContentIntent(contentIntent)
                .setSound(sound)
                .build();
    notificationManager.notify(0, notification);
}

Solution 1

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!!

Solution 2

If you are using Google Cloud Messaging, then this issue will not be solved by simply changing your icon. For example, this will not work:

 Notification notification  = new Notification.Builder(this)
                .setContentTitle(title)
                .setContentText(text)
                .setSmallIcon(R.drawable.ic_notification)
                .setContentIntent(pIntent)
                .setDefaults(Notification.DEFAULT_SOUND|Notification.DEFAULT_LIGHTS|Notification.DEFAULT_VIBRATE)
                .setAutoCancel(true)
                .build();

Even if ic_notification is transparant and white. It must be also defined in the Manifest meta data, like so:

  <meta-data android:name="com.google.firebase.messaging.default_notification_icon"

            android:resource="@drawable/ic_notification" />

Meta-data goes under the application tag, for reference.

Solution 3

I really suggest following Google's Design Guidelines:

which says "Notification icons must be entirely white."

Solution 4

Declare this code in Android Manifest :

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" 

android:resource="@drawable/ic_stat_name" />

I hope this would be useful to you.

Solution 5

(Android Studio 3.5) If you're using a recent version of Android Studio, you can generate your notification images. Right-click on your res folder > New > Image Asset. You will then see Configure Image Assets as shown in the image below. Change Icon Type to Notification Icons. Your images must be white and transparent. This Configure Image Assets will enforce that rule. Important: If you want the icons to be used for cloud/push notifications, you must add the meta-data under your application tag to use the newly created notification icons.

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

View more solutions

Comments

[Ciro Santilli OurBigBook.com]

Possible duplicate of Notification bar icon turns white in Android 5 Lollipop

[Muhammad Babar]

Here is a work around stackoverflow.com/a/39142981/1939564

[AngelJanniee]

did fix this issue ? still I am facing the same issue, in the top status bar still showing the white space for the notification if I add the transparent image

[Blueriver]

Yes, I fixed it by creating a transparent icon or targetting SDK version 20 or lower. If this doesn't fix it for you perhaps your similar problem has a different cause. I suggest setting target SDK version to 20 and checking if this changes anything. If it doesn't, not sure if this question can help you :(

[Blueriver]

Wow, thank you. I thought they SHOULD be entirely white, since some apps I have on my phone have color icons. Now I see the reason. Thank you!

[Blueriver]

Your answer is even better than the one I accepted. Wish I could accept yours too. I can't, but you have my +1 and my gratitude. Cheers!

[Lakshay Dulani]

though it works! you will not be able to update your app on google play if your previous app version was open to all versions

[Arshad Ali]

By saying targetSdkVersion 20, you saved my day! thanks a lot.

[user90766]

Its bad form to set the targetSDK version to <21 just for the sake of icons. Its better to fix it the right way, as described in this answer: stackoverflow.com/questions/27343202/…

[Neon Warge]

This is not a very good answer. What if, the stakeholders of the project required to target Android 7? I cannot just target any SDK version prior to that.

[Blueriver]

Your issue is VERY different from mine, though it has the same effect. Thanks for posting this answer, it'll probably help someone using the same tech stack you're using.

[AngelJanniee]

if I added the transparent image also the status bar showing as blank but notification showing the icon correctly bcz I have added the custom layout

[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?

[Henrik Erlandsson]

If icons are entirely white, they are a white square and no other possibilities exist. Google should use the provided app icons for notifications, otherwise apps can masquerade as a famous name app and get an impression. The very least they could do is make clear reference web page for those who should deliver the icons. But no. Instead we have to wade through fluff and BS and find nothing.

[cgr]

Does this mean app should always have two sets of icons - one for pre-lollipop and the transparent version for lollipop and higher versions ?

[Utsav Gupta]

Downvoted this answer as it is wrong.The questioner says I am not able to run my app on sdk21. Answer says " dont use sdk 21"

[Jose Gómez]

This is really not a solution.

[Pratik Vyas]

but in background when app is not in the stack it is showing the white icons ,what to do to get same result in any case

[Trupti M Panchal]

Problem solved adding - <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="20" /> in AndroidManifest.xml

[Aniruddha Shevle]

@IanWarburton: No need.

[Eugen Timm]

Big thank you for the hint with the meta data inside the manifest.

[Crono]

Oh my! This one works perfect for FCM push notifications! Thanks

[Luke Pighetti]

how do you place "@drawable/ic_notification" ? is it one icon? many? is it PNG?

[Luke Pighetti]

Where are you placing ic_stat_name? Is it one png? is it many? please help!

[Ruchir Baronia]

@LukePighetti it can be many if you are uploading different sized images for multiple screen resolutions. Otherwise, yes, it may be one PNG file on your drawable directory.

[Luke Pighetti]

@RuchirBaronia so for the above example res/drawable/ic_notification.png of size 196x196?

[Vicky Mahale]

@Luke Pighetti In Android Studio Right Click on App>>New>>Image Assets>>IconType(Notification)

[Harsh Shah]

I tried everything but it's not working. it is still showing dot with a color mention in the manifest file

[Ravi Vaniya]

thx @RuchirBaronia, upvoted for the Meta-data tag suggestion.

[afe]

(I know it's been a while but) Could you please explain this? What is it supposed to do? Does it render the full color non-transparent icon or what?

[imagio]

I can't find anything in the current design guidelines that specify that the icon must be white on a transparent background. Regardless of the poor documentation it still seems to be the case.

[Eugen Pechanec]

0xFF169AB9, you're missing the fully opaque alpha channel.

[rolinger]

I am using Cordova, does any one know if there is a way to test for OS version to supply iconA for certain Android versions (5.1.1 or 6.0.1) and iconB for other versions (like 7, 8 & 9). I have 5 test phones running Android versions (5.1.1 / 6.0.1 / 7.0 / 8.0 / 9). Phones running 5.1.1 and 6.0.1 are showing real app colored icons as the push notification icon, and the other phones (7+) are all showing an all white version of the same icon. For OS versions that can still support colored icons, I want to use iconA and the others iconB.

[Greg Ellis]

This the proper answer for firebase cloud messaging notifications.

[waseefakhtar]

This is the solution!

[bossajie]

how this will work on react native? sdkversion is 28.

[Garima Mathur]

@bossajie you can place these icons in android instead of react native with messaging service and usage.

[Jayant Dhingra]

You are definately a life saver. Thankyou so much

[user1448108]

R.color.notification_color means which color we need to give

[user1448108]

Hey am asking you, R.color.notification_color means which color? is it white or black? can you tell please?

[Garima Mathur]

@user1448108 you can use any color with Material Icons.

[caw]

The relevant guidelines for the (small) notification icon are still available here

[caw]

Archived version of the icon guidelines is here

[Shailendra Madda]

404 - Page Not Found

[mr5]

This is only applicable if you rely on the default messaging provided by Firebase. If you customize its behavior, it's up to the developer to set the correct icons using .setSmallIcon() or .setLargeIcon() builder.

[Anonymous Y - 杨z强]

Page not found and completely outdated. take my upvote! best answer ever!