[Local Notifications Plugin] How display a custom icon on Android Notifications

Forge Component
Published on 2019-12-18 by OutSystems R&D
7 votes
Published on 2019-12-18 by OutSystems R&D

Starting with Android 5 (Lollipop), Android requires small icons used within notifications to contain only white or transparent "pixels" (source). This results in square shaped icons to be used by default with a mobile app, since most of these are square shaped, with no transparency.

In order to overcome this, we must first create a new icon, possibly based off of the previous one, but with a transparent background. Then, we can use this online tool to create all the required sizes and turn all colored pixels white, packaging them into a zip archive.

Finally, we take the "dummy-android-plugin.zip" archive on this great post from Carlos Alfaro and made some adjustments:

  1. We unzipped the contents of the 'res' folder on the obtained zip archive onto the root of "dummy-android-plugin.zip";
  2. We adjusted the "resource-file" tags, on the plugin.xml file, from "dummy-android-plugin.zip", to:
    1. Declare "icon.png" files on both "target" and "src" attributes;
    2. Delete the "-v4" portions from the "target" attributes.

This resulted in the attached zip archive, which can be used in a similar manner from the original post, by adding it as a resource with the corresponding extensibility configurations. Then all you need is to reference it on the home module of your mobile app, like you would any other plugin!

Some other details to consider:

  1. Using this solution will result in having these same icons on Android 4.4 devices, despite having capabilities to show their colored counterparts;
  2. This solution uses the "plugin.xml" file to place the icon files under the "platforms\android\app\src\main\res" folder; you can consider repurposing this plugin to place other files onto different folders, should your plugin need them;
  3. This plugin depends on a resource named "icon" to be present on these folders, to be used, just like the PushWoosh plugin required one named "pw_notification"; you can check for this convention in other plugins that also allow to customize resources.

Finally, you can also use the OAP attached on this post and modify to have your own icons.