Notification Icon

0
Hello, I'm using the Push Notifications Connector plugin from the app store to send notifications. I configured GCM for android devices with Firebase, sending a notification with a title and message works perfect. But the icon that is displayed with the notification is a black square. Does someone knows where and how to change the notification icon ? I have no idea if i this is a setting in Mendix, PhoneGap or Firebase....  
asked
2 answers
3

Hi Youri,

In an earlier project (on mx6) I have seen on Android that the notification icon becomes a white square (or actually a black circle with a white square inside). The reason is a combination of change in Android since 6.0 combined with phonegap configuration in the config.xml.

In short, Android requires the notification icon to be white with a transparant background. Phonegap however uses the general app icon by default (which is usually a colored one). See below article for more information:

https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#images

I hope by now there is a way to do this in the Mendix developer portal integrated phonegap build option, but if not, here is how we solved it (read it and weep):

We have found a workaround by creating a separate icon for push notifications, which needs to be made available using a hook in config.xml (you'll be needing a custom phonegap build if you go down this route). 

1) Create separate notification icons for each intended size (mdpi, hdpi, etc)

2) Download default mendix phonegap build and extract

3) place custom notification icon in res/android/additionalFiles/drawable-<intendedsize>/notification.png (additionalFiles being a new subfolder)

4) create folder 'hooks' in phonegap root folder.

See screenshot below for what it should like like now:

5) create android_copy_resources.js file in hooks folder containing the following contents:

 

#!/usr/bin/env node

// Copy native resources
var rootdir = process.argv[2];
var exec = require('child_process').exec;

// Native resources to copy
var androidNativePath = 'res/android/additionalFiles/';

// Android platform resource path
var androidResPath = 'platforms/android/res/';

function copyAndroidResources() {
  exec('cp -Rf ' + androidNativePath + '* ' + androidResPath);
  process.stdout.write('Copied android native resources');
}

if (rootdir) {
  copyAndroidResources();
}

 

6) go to your config.xml and add the following line of code within the <platform name="android" section>:

<hook type="before_build" src="hooks/android_copy_resources.js"/>

 

Like so:

 

I hope that there is a more simple solution, but this is how we got it to work

 

Hope this helps!

answered
1

Have you set all the icons in the "Mobile App" tab in the Developer Portal before building the Phonegap app? If I'm not mistaken that's the icon that will be used for your notifications as well.

answered