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);
}
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!!
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.
(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" />
According to Google's Design Guidelines:
Notification icons must be entirely white.
Declare this code in Android Manifest:
<meta-data android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="#drawable/ic_stat_name" />
i was facing same issue i tried lot of anwers but didn't get any solutions,finally i found the way to solve my problem.
make notification icon with transparent background .The app's width and height must be like below sizes and paste all these in your project->app->src->main->res
MDPI 24*24
HDPI 36*36
XHDPI 48*48
XXHDPI 72*72
after the above paste this below line in your onMessageReceived method
Intent intent = new Intent(this, News.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, intent,
PendingIntent.FLAG_ONE_SHOT);
Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this);
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
notificationBuilder.setSmallIcon(R.drawable.notify)
// .setContentTitle(title)
// .setContentText(message)
.setAutoCancel(true)
.setSound(defaultSoundUri)
.setContentIntent(pendingIntent);
} else
{
notificationBuilder.setSmallIcon(R.drawable.notify)
// .setContentTitle(title)
// .setContentText(message)
.setAutoCancel(true)
.setSound(defaultSoundUri)
.setContentIntent(pendingIntent);
}
NotificationManager notificationManager =
(NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
notificationManager.notify(0, notificationBuilder.build());
Don't forget to add this code in manifest file
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="#drawable/app_icon" />
We can do like below:
Create a new object of notification builder and call setSmallIcon() using notification builder object like in below code.
Create a method in which we will check on which OS version we are installing our app . If it is below Lolipop i.e API 21 then it will take the normal app icon with background color else it will take the transparent app icon without any background. So the devices using os version >= 21 will set the background color of icon using method setColor() of Notification builder class.
Sample Code:
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this);
notificationBuilder.setSmallIcon(getNotificationIcon(notificationBuilder));
private int getNotificationIcon(NotificationCompat.Builder notificationBuilder) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
int color = 0x008000;
notificationBuilder.setColor(color);
return R.drawable.app_icon_lolipop_above;
}
return R.drawable.app_icon_lolipop_below;
}
I have resolved the problem by adding below code to manifest,
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="#drawable/ic_stat_name" />
<meta-data
android:name="com.google.firebase.messaging.default_notification_color"
android:resource="#color/black" />
where ic_stat_name created on Android Studio Right Click on res >> New >>Image Assets >> IconType(Notification)
And one more step I have to do on server php side with notification payload
$message = [
"message" => [
"notification" => [
"body" => $title ,
"title" => $message
],
"token" => $token,
"android" => [
"notification" => [
"sound" => "default",
"icon" => "ic_stat_name"
]
],
"data" => [
"title" => $title,
"message" => $message
]
]
];
Note the section
"android" => [
"notification" => [
"sound" => "default",
"icon" => "ic_stat_name"
]
]
where icon name is "icon" => "ic_stat_name" should be the same set on manifest.
If you wan to provide lollipop support notification icon then make two type notification icon :
normal notification icon : for below lollipop version.
notification icon with transparent background : for lollipop and above version.
Now set appropriate icon to notification builder at run time base on OS version :
NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this);
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
mBuilder.setSmallIcon(R.drawable.ic_push_notification_transperent);
} else {
mBuilder.setSmallIcon(R.drawable.ic_push_notification);
}
Finally I've got the solution for this issue.
This issue occurs only when the app is not at all running. (neither in the background nor in the foreground). When the app runs on either foreground or background the notification icon is displayed properly.(not the white square)
So what we've to set is the same configuration for notification icon in Backend APIs as that of Frontend.
In the frontend we've used React Native and for push notification we've used react-native-fcm npm package.
FCM.on("notification", notif => {
FCM.presentLocalNotification({
body: notif.fcm.body,
title: notif.fcm.title,
big_text: notif.fcm.body,
priority: "high",
large_icon: "notification_icon", // notification icon
icon: "notification_icon",
show_in_foreground: true,
color: '#8bc34b',
vibrate: 300,
lights: true,
status: notif.status
});
});
We've used fcm-push npm package using Node.js as a backend for push notification and set the payload structure as follows.
{
to: '/topics/user', // required
data: {
id:212,
message: 'test message',
title: 'test title'
},
notification: {
title: 'test title',
body: 'test message',
icon : 'notification_icon', // same name as mentioned in the front end
color : '#8bc34b',
click_action : "BROADCAST"
}
}
What it basically searches for the notification_icon image stored locally in our Android system.
Notifications are greyscale as explained below. They are not black-and-white, despite what others have written. You have probably seen icons with multiple shades, like network strength bars.
Prior to API 21 (Lollipop 5.0), colour icons work. You could force your application to target API 20, but that limits the features available to your application, so it is not recommended. You could test the running API level and set either a colour icon or a greyscale icon appropriately, but this is likely not worthwhile. In most cases, it is best to go with a greyscale icon.
Images have four channels, RGBA (red / green / blue / alpha). For notification icons, Android ignores the R, G, and B channels. The only channel that counts is Alpha, also known as opacity. Design your icon with an editor that gives you control over the Alpha value of your drawing colours.
How Alpha values generate a greyscale image:
Alpha = 0 (transparent) — These pixels are transparent, showing the background colour.
Alpha = 255 (opaque) — These pixels are white.
Alpha = 1 ... 254 — These pixels are exactly what you would expect, providing the shades between transparent and white.
Changing it up with setColor:
Call NotificationCompat.Builder.setColor(int argb). From the documentation for Notification.color:
Accent color (an ARGB integer like the constants in Color) to be applied by the standard Style templates when presenting this notification. The current template design constructs a colorful header image by overlaying the icon image (stenciled in white) atop a field of this color. Alpha components are ignored.
My testing with setColor shows that Alpha components are not ignored. Higher Alpha values turn a pixel white. Lower Alpha values turn a pixel to the background colour (black on my device) in the notification area, or to the specified colour in the pull-down notification.
I found a link where we can generate our own white icon,
try this link to generate white icon of your launcher icon.
Open this Link and upload your ic_launcher or notification icon
Requirements to fix this issue:
Image Format: 32-bit PNG (with alpha)
Image should be Transparent
Transparency Color Index: White (FFFFFF)
Source: http://gr1350.blogspot.com/2017/01/problem-with-setsmallicon.html
for customized local notification, in AndroidManifest.xml add following meta-data then it will work.
<application
android:name="xxxxxx"
android:label="xxxxxx"
android:icon="#mipmap/ic_launcher"
>
<meta-data
android:name="your_apps_bundle_id.default_notification_icon"
android:resource="#drawable/ic_notif" />
......
I have similar issue on android 8.0. Try to use WHITE icon resource. I have white square when i'm trying to use colored image for icon, when i replace it to white icon, it's start work.
You can use different icon for different versions. Simply set logic on your icon like this:
int icon = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? R.drawable.colored_: R.drawable.white_tint_icon_for_lolipop_or_upper;
For SDK >= 23, please add setLargeIcon
notification = new Notification.Builder(this)
.setSmallIcon(R.drawable.ic_launcher)
.setLargeIcon(context.getResources(), R.drawable.lg_logo))
.setContentTitle(title)
.setStyle(new Notification.BigTextStyle().bigText(msg))
.setAutoCancel(true)
.setContentText(msg)
.setContentIntent(contentIntent)
.setSound(sound)
.build();
When you want keep colorful icon - Workaround
Add pixel with slightly different color into icon. In my case a have black icon with shades and light. When added dark blue pixel it works.
To reduce SDK specific versions, you could simply do this: (replace '#' to '0x')
Notification notification = new NotificationCompat.Builder(this);
notification.setSmallIcon(R.drawable.icon_transperent);
notification.setColor(0x169AB9); //for color: #169AB9
I just converted my png to a transparent png and then the icon was the same shape as the picture, but not the same color
remove the background of the icon using any of the website, suggested one is https://www.remove.bg/
and then simply use that image after downloading and your problem will be solved.
I am using the below snippet to generate notifications in my android app.
private void sendNotification(String contentText, String message) {
Intent resultIntent = new Intent(this, MainActivity.class);
resultIntent.putExtra("clear","clear");
resultIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK |
Intent.FLAG_ACTIVITY_CLEAR_TASK);
PendingIntent piResult = PendingIntent.getActivity(this, 0, resultIntent,0);
NotificationCompat.Builder builder=new NotificationCompat.Builder(this)
.setSmallIcon(R.drawable.icon)
.setColor(ContextCompat.getColor(getApplicationContext(),R.color.red))
.setContentTitle("title")
.setContentText(message)
.setAutoCancel(true)
.setLargeIcon(BitmapFactory.decodeResource(getResources()
,R.drawable.notification))
.setContentIntent(piResult);
NotificationCompat.InboxStyle notification = new NotificationCompat.InboxStyle(builder);
int i;
for(i=0; i<messageList.size();i++){
notification.addLine(messageList.get(i));
}
notification.setBigContentTitle("title");
notification.setSummaryText(contentText);
NotificationManager notificationManager = (NotificationManager)getSystemService(Context.NOTIFICATION_SERVICE);
notificationManager.notify(NOTIFICATION_ID,notification.build());
}
It works in android 5 and 6 but for android nougat it is not working
Following the docs from the Android API:
Status bar icons are composed simply of white pixels on a transparent backdrop, with alpha blending used for smooth edges and internal texture where appropriate.
Your whole image but the transparent parts is going to be converted to white (being originally white or having colors).
One solution is to create a silhouette icon with color, by this way you can use the same image in all Android APIs. One example could be this icon:
In lower versions of Android you would see the black face, in the last versions you will see the same face but with white color. That's because of the transparent parts (it seems SO removes the transparency, you can get the original from here) of the image.
From android version lollpop onwards, they have made the changes for the notifications. When you are specifing the small icon, it should be of specific size as mentioned in this link.
The important thing is the image should be transparent and contains only white color.
You can check this question to get the answer
According to this blog here
It says that
You’ll note that the icons are not present in the new notifications; instead more room is provided for the labels themselves in the constrained space of the notification shade. However, the notification action icons are still required and continue to be used on older versions of Android and on devices such as Android Wear.
If you’ve been building your notification with NotificationCompat.Builder and the standard styles available to you there, you’ll get the new look and feel by default with no code changes required.
I've a problem setting the notification small icon to yellow in Android 7.x
I'm using notification.setColor(Color.YELLOW); while building the notification object. It shows that olive(ish) color instead of yellow.
Also tried to use notification.setColor(Color.argb(255,255,255,0)); but no luck, it shows the same olive(ish) color.
This is how it looks like in Android 7.x
This is how it looks like in Android 6.x, which is the correct color
Both images display the same notification with the same code base, but using different Android devices.
I'm using PushWoosh to send/receive push notifications, bellow is the exact code I'm using to create the notification object.
public class NotificationFactory extends AbsNotificationFactory {
#Override
public Notification onGenerateNotification(PushData pushData) {
PushwooshUserdata pushwooshUserdata = GsonUtil.fromJson(pushData.getExtras().getString("u"), PushwooshUserdata.class);
//create notification builder
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(getContext());
notificationBuilder.setContentTitle("Header");
notificationBuilder.setContentText("Message");
//set small icon (usually app icon)
notificationBuilder.setSmallIcon(R.drawable.notification_icon);
notificationBuilder.setColor(Color.argb(255,255,255,0));
//set ticket text
notificationBuilder.setTicker(getContentFromHtml(pushData.getTicker()));
//display notification now
notificationBuilder.setWhen(System.currentTimeMillis());
//build the notification
final Notification notification = notificationBuilder.build();
//add sound
addSound(notification, pushData.getSound());
//add vibration
addVibration(notification, pushData.getVibration());
//make it cancelable
addCancel(notification);
//all done!
return notification;
}
#Override
public void onPushReceived(PushData pushData) {
}
#Override
public void onPushHandle(Activity activity) {
}
}
Android is ensuring a minimum contrast ratio between the foreground color and background color.
With the yellow (#ffff35) foreground and a white background, the contrast ratio is only 1.07:1.
The olive foreground (#717d13) has the minimum contrast ratio of 4.5:1.
This is the relevant patch in the Android source: https://android.googlesource.com/platform/frameworks/base.git/+/4ff3b120ff8a788e3afeb266d18caf072f0b8ffb%5E%21/
I calculated the above contrast ratios using http://webaim.org/resources/contrastchecker/.
Try to ensure that UI controls in a notification are also available in an Activity in your app, and you should always start that Activity when users click the notification. To do this, use the setContentIntent() method.
if you've defined color in colors.xml then in your NotificationBuilder add value as .setColor(getResources().getColor(R.color.<YOUR_COLOR>))
Source: NotificationCompat.Builder#setColor(int)
I've got a strange problem with notification icon today.
It looks like this :
(the white circle ...)
Did I do something bad ?
Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
.setSmallIcon(R.drawable.icon_notification)
.setContentTitle(this.getString(R.string.notification_title))
.setContentText(this.getString(R.string.notification_text))
.setAutoCancel(true)
.setSound(defaultSoundUri)
.setContentIntent(pendingIntent);
Here is my icon image (freshly downloaded from here https://material.io/icons/#ic_photo) :
http://image.noelshack.com/fichiers/2016/44/1478185219-icon-notification.png
Did I miss something ?
For the record, I'm using SDK 24 and only created the hdpi resource folder for now.
Edit #1 : I've added the ldpi, mdpi and xhdpi icons, nothing change ...
Edit #2 : For more precision, I'm trying to create this notification from a service ... FCM messaging service ...
If your compileSDKversion is above 20 then notification icon should be a white-on-transparent background image. Otherwise the image will be rendered as a white colored image.
Please go through the below link too for guidelines to create the icon
https://www.google.com/design/spec/patterns/notifications.html
and also the notification icon generator.
https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.space.trim=1&source.space.pad=0&name=ic_stat_example
You must use a notification icon with no background. Android will add the circle background.
You can set background color with
.setColor(context.getResources().getColor(R.color.colorPrimary))
to match your app indentity.
Icon inside will remain white and circle will get the color you defined.
It seems to be a problem of cache during compilation ... The first image I was using was bad (fully colored), so I think my compilator created somekind of cache on the filename.
I work on Windows and did this : uninstall the app from my phone, invalidate all cache from Android sudio => at re-compilation, the icon was OK.
U need to have separate icon generated which will be white version of your launcher icon. U can use below link to generate such icon.
https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=clipart&source.clipart=ac_unit&source.space.trim=1&source.space.pad=0&name=ic_stat_ac_unit
Note : You need to upload PNG image of your launcher icon with transparent background.
For setting icon u can have a method like this
private int getSmallIconForNotification(){
return (Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP)? R.mipmap.ic_stat_launcher : R.mipmap.ic_launcher;
}
Code usage:
private NotificationCompat.Builder createNotificationBuilder(){
return new NotificationCompat.Builder(this)
.setSmallIcon(getSmallIconForNotification())
.setContentTitle("New Message")
.setContentText("Hi there.....")
.setAutoCancel(true);
}
I had the same problem while the app is closed and this helped me
Unfortunately this was a limitation of Firebase Notifications in SDK 9.0.0-9.6.1. When the app is in the background the launcher icon is use from the manifest (with the requisite Android tinting) for messages sent from the console.
With SDK 9.8.0 however, you can override the default! In your AndroidManifest.xml you can set the following fields to customize the icon and color:
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="#drawable/notification_icon" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color"
android:resource="#color/google_blue" />
Note:- If device has android version above 20 you have to generate icon with transparent background and while generating notification use this snippet
int currentapiVersion = android.os.Build.VERSION.SDK_INT;
if (currentapiVersion >= android.os.Build.VERSION_CODES.LOLLIPOP){
currentapiVersion=R.mipmap.ic_notification_lolipop;
} else{
currentapiVersion=R.mipmap.ic_launcher;
}
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
.setSmallIcon(currentapiVersion)......