One Signal notification icon

  

Hello,

It's been a while since I've been using the one signal plugin for push notifications and it annoys me seeing the small bell attached to the notification instead of my application's pretty icon! Today I've decided to take some time to overcome this and I would like to share step by step everything I needed to do to achieve that. 

First of all, I need to mention that this post did half of the job! I've used Carlos' zip file (let's call it the plugin file) as the base for the job. 

One Signal documentation mentions all the files we need to be able to define an icon:

As you can see in the plugin file that Carlos has shared, all of these are there:

What I did was: I've accessed this site, uploaded my icon** and it downloads another zip file with all the files you need and all the icons with the respective size (how cool is that??):

I've unzipped Carlos' file and replaced the old drawable files by mine.

The next step I did was to inspect the XML file that is part of the plugin and noticed that the folder's name is different 

and I've removed all the "-v4" from the path.

After all these changes, I've zipped the folder again, uploaded the file to my mobile app's resources: 

and added the extensibility configuration to my app:


After that, I've published the module, generated a new app and updated the app installed on my device.

The last thing I needed to change was the inputs to the notification action, I'm sending now the SmallIcon parameter with the icon name, note that I'm not setting the file extension, there, you must define only the file name! I'm also sending the large icon but this one is easier as you just need to define the link to the icon:

After doing that, voilà!! 


I can now see the icon when I receive the notification!


** you can use the icon name you want, but if you use one different than "pw_notification.png", you must change the XML file configuration as it is pointing to pw_notification.png:


I really hope this post helps you in the process of adding your own icon to your application!


Regards,

João

Hi João,

Great writeup! Does this work for both Android or iOS, or is it vendor specific?

P.S. I took the liberty to move the post to the Community Quick Guide forum.

Hi Kilian,

Thank you for that ;)

This solution is specific for android but I believe it would be easily adapted to cover IOs also.

Cheers,

João

Kilian Hekhuis wrote:

Hi João,

Great writeup! Does this work for both Android or iOS, or is it vendor specific?

P.S. I took the liberty to move the post to the Community Quick Guide forum.


According with OneSignal Documentation this feature is only avaliable for Android, iOS "grab" the application main icon to Push Notifications

Works perfectly, thanks!!!!


Hi Saulo,

Thanks for that information.

Saulo Goncalves wrote:

Works perfectly, thanks!!!!


Hi Saulo, thank you for the feedback! :) I'm glad it was useful.


Cheers,

João


Hi, I did all the steps above and if I use the images on the original dummy-android-plugin.zip file it works but when i change them to my images only a grey square shows up. Any idea why? Thanks.

Pedro Almeida wrote:

Hi, I did all the steps above and if I use the images on the original dummy-android-plugin.zip file it works but when i change them to my images only a grey square shows up. Any idea why? Thanks.

Hi Pedro,

Did you try to use this link to generate the folders with your icon's several sizes?


Ok so I'm using the original file without any modifications and it works when I change to mine (yes i did use that link) it stops working... mine is on the attachment.

Thanks for the help

Pedro Almeida wrote:

Ok so I'm using the original file without any modifications and it works when I change to mine (yes i did use that link) it stops working... mine is on the attachment.

Thanks for the help

Hi Pedro,

I noticed you've missed a step from the 'tutorial':

I've inspected the XML file and you still have the -V4 which doesn't match with the actual folder's location: 


Can you remove the -v4 and try again?


Cheers,

João

But it worked with the original file even with the -v4, I just tried that anyway and I get the grey square again.

In the attachment is the file that I used.

Again thanks for the help.

Hi Pedro,

Sorry for the delay, can you check if you are defining the smallIcon name when sending the notification?


I've generated an app with your zip plugin and was able to send notifications with the icon:


I've unzipped my app apk and noticed your file was there, as you can see both icons are:

So, if you don't specify which one you want to use, it is going to use the default one.


Hope this helps to move forward.


Cheers,

João