How to change default push notification icon to small icon in Onesignal in ionic 3?

Question

I have a problem to change small icon push notification Onesignal in ionic 3, I have tried this tutorial https://documentation.onesignal.com/docs/customize-notification-icons, https://ionicframework.com/docs/native/onesignal/ and https://github.com/OneSignal/OneSignal-Cordova-SDK/issues/341#issuecomment-382648188, but fail all, small icon in my push notification still default of onesignal.

This is my folder structure and my script :

My folder structure :

copy_android_notification_icons.js :

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');

var rootDest = 'platforms/android/app/src/main/res';
var files = [{
    'icon_onesignal/res/drawable-hdpi/ic_stat_onesignal_default.png':
        path.join(rootDest, 'drawable-hdpi/ic_stat_onesignal_default.png')
}, {
    'icon_onesignal/res/drawable-mdpi/ic_stat_onesignal_default.png':
        path.join(rootDest, 'drawable-mdpi/ic_stat_onesignal_default.png')
}, {
    'icon_onesignal/res/drawable-xhdpi/ic_stat_onesignal_default.png':
        path.join(rootDest, 'drawable-xhdpi/ic_stat_onesignal_default.png')
}, {
    'icon_onesignal/res/drawable-xxhdpi/ic_stat_onesignal_default.png':
        path.join(rootDest, 'drawable-xxhdpi/ic_stat_onesignal_default.png')
}, {
    'icon_onesignal/res/drawable-xxxhdpi/ic_stat_onesignal_default.png':
        path.join(rootDest, 'drawable-xxxhdpi/ic_stat_onesignal_default.png')
}];

function createFolder(pathAbsolute) {
  if (!fs.existsSync(pathAbsolute)) {
    fs.mkdirSync(pathAbsolute);
  }

  console.log('Folder ready ', pathAbsolute);
}

module.exports = function(context) {
  var root = context.opts.projectRoot;

  createFolder(path.join(root, rootDest, 'drawable-hdpi'));
  createFolder(path.join(root, rootDest, 'drawable-mdpi'));
  createFolder(path.join(root, rootDest, 'drawable-xhdpi'));
  createFolder(path.join(root, rootDest, 'drawable-xxhdpi'));
  createFolder(path.join(root, rootDest, 'drawable-xxxhdpi'));

  files.forEach(function(obj) {
    Object.keys(obj).forEach(function(key) {
      var src = path.join(root, key);
      var dest = path.join(root, obj[key]);

      if (fs.existsSync(src) && fs.existsSync(path.dirname(dest))) {
        fs.createReadStream(src).pipe(fs.createWriteStream(dest));

        console.log('Copied ' + src + ' to ' + dest);
      }
    });
  });
};

app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      var notificationOpenedCallback = function(jsonData) {
        console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
      };

      window["plugins"].OneSignal
        .startInit("xxxx-yyyy-zzzz-123, "1234567")
        .handleNotificationOpened(notificationOpenedCallback)
        .endInit();
    });
  }
}

config.xml

<platform name="android">
        <allow-intent href="market:*" />
        <hook src="hooks/copy_android_notification_icons.js" type="after_prepare" />
</platform>

Please correct my folder or my script, maybe you find a mistake and please help to solve this problem.

Thanks.

Answer 1

You could follow below steps. Then you no need to touch your platform folder and manually add push notification icons.

• Go to Android Asset Studio and generate icons using name ic_stat_onesignal_default
• Then copy those icons into android folder under resources. In my case it looks like below.

• Then in config.xml file add below code.

<!-- Add to your existing android platform sction -->
<platform name="android">      
    <resource-file src="resources/android/notification/drawable-mdpi/ic_stat_onesignal_default.png" target="app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png" />
    <resource-file src="resources/android/notification/drawable-hdpi/ic_stat_onesignal_default.png" target="app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png" />
    <resource-file src="resources/android/notification/drawable-xhdpi/ic_stat_onesignal_default.png" target="app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png" />
    <resource-file src="resources/android/notification/drawable-xxhdpi/ic_stat_onesignal_default.png" target="app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png" />
    <resource-file src="resources/android/notification/drawable-xxxhdpi/ic_stat_onesignal_default.png" target="app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png" />
</platform>

• Build the project again.

Now default push notification icon will replace with new one.

Find more details from OneSignal DOC

Answer 2

I was working in OneSignal last week and did the same as you. There are some specific sizes for the Notification.

Generate From Android Assets or online here.

Sizes must be set :

Small Notification Icon (mdpi)- 24x24
Small Notification Icon (hdpi)- 36x36
Small Notification Icon (xhdpi)- 48x48
Small Notification Icon (xxhdpi) - 72x72
Small Notification Icon (xxxhdpi)-96x96

Also, Remember you have to put all icons on the platform folder. For this go to - platform/android/app/src/main/res/ .

Create the drawable folder if not present there. Name should be like - drawable-mdpi, drawable-hdpi and so on.

Note the name you are using for the icon.

Now, From the onesignal panel use the name in small icon options. Example

Hope this will solve your issue.