68
Views
7
Comments
Solved
[Cloud Messaging Plugin (Firebase)] How To Customize Notification Icon, Android 13 Icon Pushnotification Blank
cloud-messaging-plugin-firebase
Mobile icon
Forge asset by OutSystems
Application Type
Mobile
Service Studio Version
11.54.11 (Build 62451)

Hi all,

Im using cloud messaging plugin to push notification, it worked fine at android 12 theres application icon in notification. But the notification in android 13 dont have icon beside the title. how can i add the application icon to the notification?

The application icon is show in notification bar

But when i scroll down the notification bar the application icon is blank

It will be a pleasure if someone help.

Thanks

2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Hi @Yongky Saputra ,


By default the notifications sent from FCM will try to use the App Icon.

If you change the Icon of your app in service studio to something else, you should see it reflected on the notifications as well.


It is important to note that on Android version 10 and lower you need to define an icon that has a transparent background as it will have just one color in the notification bar.

A site that can help defining the correct icon is: https://romannurik.github.io/AndroidAssetStudio/icons-notification.html

In your case you are seeing a black square because the icon where you have 'Cm' has a blue background and thus the android app will change the whole icon to have just one color and give this impresion that you are seeing a black square.

_____________________________________

On a side note, it is also possible to have different icons for the application and the notifications!
However, it is not straight forward.

You will have to add the icons as drawable resources in your project, and define the name of the icon when sending the notification from FCM.

To add icons as drawable resources take a look at this topic.

Basically you will need to add the icons to a zip file following the same structure defined on the topic, and add this file as a resource on your main app.

Please note that you will also need to add some info on the extensibility JSON of your app to say that you are adding a resource there.

On the topic they give an example on how to do it, but one of the attributes has an error instead of 'resources' you should use 'resource' like this:

{    
    "plugin": {
        "resource": "/dummy-android-plugin"
    },
"resource": "dummy-android-plugin.zip"
}

Finally, if you are using the Firebase Configurator component to send your messages you will also need to customize the request to add the icon name like this:


I'm attaching an example of a sample app and the configurator for your benefit if you want to go with this option and for future reference as well, as I had this same issue recently. 
(Give a thumbs up if you use it in the future for me to know how many people needed this use case)

You will only need to set your own keys for sending the firebase notification to test it.
Keep in mind that it is not production ready, you should implement a better security for the FCM APIs.

Hopefully changing the app icon will be enough for you :)

Let me know if it helps,

Cheers 

RR :)

SampleCustomIconNotification.oap
2023-09-11 07-19-28
Yongky Saputra

Hi Raphael Ranieri

Thank you so much its working, now i can see the app icon. i uploaded a transparent icon image for the application.

now the icon is showing, do you know how to change the background to white because i uploaded icon is like this

how to change the background or theme to white so the notification will show like the application icon?

like this

2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Hey Yongky, 

If you are using the Firebase API to send the notification you should be able to define another attribute called color to set a specific color for the icon. 


Here: https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages





2023-09-11 07-19-28
Yongky Saputra

Thank you Raphael,

Its working, thank you so much for giving me the solution now my notification got the icon

2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Sending the FCM Configurator in a separate post due to the limit for the file sizes

CloudMessagingConfigurator.oml
2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Hey Yongky, 

If you are using the Firebase API to send the notification you should be able to define another attribute called color to set a specific color for the icon. 


Here: https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages





2023-04-06 11-24-23
Paulo Zacarias

Hi Yongky, 

I'm not 100% sure if this will work, but please try changing the Application's logo and then generating the package again. 

Regards, 

PZ

2023-09-11 07-19-28
Yongky Saputra

Hi paulo,

i have tried it 10 mins ago and still got blank icon.

Thank you for helping me

2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Hi @Yongky Saputra ,


By default the notifications sent from FCM will try to use the App Icon.

If you change the Icon of your app in service studio to something else, you should see it reflected on the notifications as well.


It is important to note that on Android version 10 and lower you need to define an icon that has a transparent background as it will have just one color in the notification bar.

A site that can help defining the correct icon is: https://romannurik.github.io/AndroidAssetStudio/icons-notification.html

In your case you are seeing a black square because the icon where you have 'Cm' has a blue background and thus the android app will change the whole icon to have just one color and give this impresion that you are seeing a black square.

_____________________________________

On a side note, it is also possible to have different icons for the application and the notifications!
However, it is not straight forward.

You will have to add the icons as drawable resources in your project, and define the name of the icon when sending the notification from FCM.

To add icons as drawable resources take a look at this topic.

Basically you will need to add the icons to a zip file following the same structure defined on the topic, and add this file as a resource on your main app.

Please note that you will also need to add some info on the extensibility JSON of your app to say that you are adding a resource there.

On the topic they give an example on how to do it, but one of the attributes has an error instead of 'resources' you should use 'resource' like this:

{    
    "plugin": {
        "resource": "/dummy-android-plugin"
    },
"resource": "dummy-android-plugin.zip"
}

Finally, if you are using the Firebase Configurator component to send your messages you will also need to customize the request to add the icon name like this:


I'm attaching an example of a sample app and the configurator for your benefit if you want to go with this option and for future reference as well, as I had this same issue recently. 
(Give a thumbs up if you use it in the future for me to know how many people needed this use case)

You will only need to set your own keys for sending the firebase notification to test it.
Keep in mind that it is not production ready, you should implement a better security for the FCM APIs.

Hopefully changing the app icon will be enough for you :)

Let me know if it helps,

Cheers 

RR :)

SampleCustomIconNotification.oap
2023-09-11 07-19-28
Yongky Saputra

Hi Raphael Ranieri

Thank you so much its working, now i can see the app icon. i uploaded a transparent icon image for the application.

now the icon is showing, do you know how to change the background to white because i uploaded icon is like this

how to change the background or theme to white so the notification will show like the application icon?

like this

2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Hey Yongky, 

If you are using the Firebase API to send the notification you should be able to define another attribute called color to set a specific color for the icon. 


Here: https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages





2023-09-11 07-19-28
Yongky Saputra

Thank you Raphael,

Its working, thank you so much for giving me the solution now my notification got the icon

2020-11-10 23-58-16
Raphael Ranieri
 
MVP
Solution

Sending the FCM Configurator in a separate post due to the limit for the file sizes

CloudMessagingConfigurator.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.