How to display custom image in notification using ionic 2

Ionic Framework ionic-v3
1

Problem is getting square blank image in notification.

I have installed Local Notifications plugin

ionic plugin add de.appplant.cordova.plugin.local-notification
I have tried

  1. saved image in platforms\android\res\drawable\sample.png

Here is code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {LocalNotifications} from 'ionic-native';
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
    LocalNotifications.schedule({
      id: 1,
      title: 'Title here',
      text: 'Text <b>here aaa</b>',
      led: "FF0000",
      icon: "sample"
    });
  }
}
  1. saved image in \www\img\sample.png

Here is code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {LocalNotifications} from 'ionic-native';
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
    LocalNotifications.schedule({
      id: 1,
      title: 'Delay Notification',
      at: new Date(new Date().getTime() + 3600),
      text: 'Text <b>here aaa</b>',
      led: "FF0000",
      icon: "file://android_asset/www/img/sample.png"
    });
  }
}
1 Like
2

Did you manage this to work? I’m having the same problem…

3

Disclaimer: I used Ionic 1 in my project, but I did use this exact same plugin, so the solution is probably the same

If you’re seeing a white square you almost certainly are doing this correctly, because if you’re not you’ll generally just see the default bell icon. However, if you’re going to use res/drawable you can do this:

icon: 'res://do_icon_white.png'

You don’t have to include drawable because that is the default location it will look in when trying to find a resource. However if you want to use the file path like you are doing that will probably work too, if you’re getting a white square it probably does.

So, I’m sure at this point the burning question in your mind is, how is a white square evidence that it’s working correctly? The answer is because it’s expecting a monochrome transparent png. For instance the default “bell” icon has a transparent background with white bells. Anywhere that’s transparent will show through to the circle in the back. Here’s a screenshot from my app once I switched to a transparent png:
image

My png is transparent with the word “do.” as white. Before I did that I just got a white square as well, because nothing was transparent.

4

Plz, check this