CODEWITHSUNDEEP
androidfirebase-cloud-messaging
Sophia
Sophia

Reputation: 213

Grey square as notification icon using Firebase notifications

I am attempting to integrate Firebase Cloud Messaging into my android app. But when the app is in the background or closed, Firebase notification is displayed with grey square icon instead of my application's launcher icon.

How could I make the notification icon to be my application logo, without implementing Firebase server API and sending data messages?

Upvotes: 21

Views: 27692

Answers (6)

Jeronimas
Jeronimas

Reputation: 74

What worked for me was:

  • Following all the steps above about creating notification icons
  • Placing them in src/main/res/ in drawable folder
  • Creating colors.xml in /values
  • Adding values in AndroidManifest

and one extra step i had to do was in the fcm/send post request on server side had to define:

"notification": {
        "title": "your title",
        "body": "your body",
        "icon": "your icon name in drawable folder"
    },

Upvotes: 1

Kamlesh
Kamlesh

Reputation: 6135

I used below solution and it worked for me in Flutter:

  1. Create a transparent and white notification icon (you can use the following tool: AndroidAssetStudio )

  2. Download the zip folder, unzip and you'll see it contains a res folder with different drawable folders. Copy and paste the contents of the res folder in "android\app\src\main\res" path

enter image description here

  1. Then open the AndroidManifest.xml file and add the following lines to it:

ic_stat_calendar_today is the name of my notification icon. And each of the drawable folders that have been pasted contain a different size of icon with the same name.

enter image description here

  1. If you want to change the color of the icon then check the above image. Add the metadata tag after the notification icon tag

  2. Go to "android\app\src\main\res\values" and add a colors.xml file

enter image description here

Stackoverflow does not allow me to add colors.xml file code here so i am just adding code in above image, you will have to type it in your colors.xml manually. Sorry for that.

Special thanks to "RumanaB" on github.

Upvotes: 3

Songsak Wanta
Songsak Wanta

Reputation: 21

Create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free. Export the icon at 25x25 as a PNG file with transparency enabled.

Upvotes: 2

obernal
obernal

Reputation: 189

It's not related to Firebase. Starting with Android 3.0 status icons were revised, and "are composed simply of white pixels on a transparent backdrop, with alpha blending used for smooth edges and internal texture where appropriate" https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html. From what I've seen, starting Android 5.0 you are forced to provide these all white small status icons otherwise the gray square icon shows up.

This question Icon not displaying in notification: white square shown instead has answers that explain further and also show how to force your app to use the original ic_launcher icon although that doesn't seem like a good idea to me since you are forcing it to target an older sdk and also not following material design guidelines.

What you really should do is provide the small white icons which you can generate here http://romannurik.github.io/AndroidAssetStudio/icons-notification.html add them to your project and then configure FCM to use them as explained in the accepted answer 

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_stat_ic_notification" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />

Upvotes: 9

Mateusz Pryczkowski
Mateusz Pryczkowski

Reputation: 1894

From Firebase 9.8.0 it is possible to change this icon, by adding info about this in Manifest:

<meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/ic_stat_ic_notification" />
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_color"
        android:resource="@color/colorAccent" />

Example you will find here:

https://github.com/firebase/quickstart-android/blob/master/messaging/app/src/main/AndroidManifest.xml

Upvotes: 29

Hisham Muneer
Hisham Muneer

Reputation: 8742

Its a bug in firebase. If your app is in foreground and notification is sent from Firebase Console, you will get the grey icon.

Workaround is: Send notifications via API and not from Console.

Upvotes: 7

Related Questions