Ionic - "ionic package build" with custom resources

Ionic Framework ionic-v3
1

Hi Gang,

I’m using the cordova-plugin-local-notifications plug-in in my app, along with a custom icon. To implement this, I have the following:

Code to schedule the notification:

    this.localNotifications.schedule({
      id: id || mode,
      title: 'Reminder from Pure North',
      text: `Remember to track your ${TrackingModes[mode]}`,
      firstAt : dateTime.toDate(),
      every: 'day',
      icon: 'notification',
      led: '0000FF'
    });

Hook to copy the notification icon from:
resources\other\android\res\drawable-*
to:
platforms\android\res\drawable-*
during the build process

The hook code can be viewed here:

Locally this all works. If I run “ionic build android” and inspect the .apk, the custom icons are where they are supposed to be. If I install the.apk everything looks great. Unfortunately, if I run “ionic package build android” and inspect the resulting .apk, the custom icons are nowhere to be found. My guess is an issue with the hook.

Looking at the docs for Ionic Package, it appears that custom hooks are not supported. The documentation links to a repository of common hooks, however the hook to handle custom resources appears to be broken.

Has anyone has any success using “ionic package build” with custom resources, and having the resources end up in the res/drawable-* folders in the .apk? Is there an alternative approach?

Thanks!

2

I think I’m running into the same issue where a “package” build fails with this error:

Error: Source path does not exist: src/res/android/drawable-hdpi/notification_icon_large.png

Local builds work just fine and the icons appear as expected when I deploy to a device.

3

Search the forum for the error message - I remember multiple posts about that.

4

Months later and we’ve come across a solution. The details are below if anyone is looking to create custom icons for push notifications, that will work using Ionic’s cloud build:

  1. Create a transparent background png version of your icon.
  2. Use this tool to generate the different sizes of the icon: https://goo.gl/tyJwpL
  3. Copy the different versions into resources/android/icon following the format of the app icon
    image
    image.png754×781 41.6 KB
  4. Add tags to your config.xml to map these version into the appropriate res/drawable-* folders:
    image
    image.png2094×270 57.6 KB
  5. Running a local build, or an Ionic cloud build, will now copy these files into the res/drawable-* folders:
  6. Update your cloud config settings:
const cloudSettings: CloudSettings = { 
  'core': { 
    'app_id': 'XXXXXXXX' 
  },
  'push': {
    'sender_id': 'XXXXXXXXXXX',
    'pluginConfig': {
      'ios': {
        'badge': true,
        'sound': true
      },
      'android': {
        'iconColor': '#692a7b',
        'icon': 'notification'
      }
    }
  }
};

This is now doing the trick for us!
image

3 Likes
5

Yeah, finally someone reports back to one of these issues with a solution. Thanks!

1 Like