How to change ionic 2 local push notification icon

Question

I have created a hybrid app using ionic2 in that I am using cordova local push notification.

Everything working perfectly only thing is not able change a icon, in below I have paste my code here.

LocalNotifications.schedule({
        id:1,
        title: "Test Title",
        text: "Push Notification",
        icon: "res://icon.png",
        at: new Date(new Date().getTime() + 5 * 1000),
        sound: null,
        every: "minute"          
    });

And also I tried this below code.

 LocalNotifications.schedule({
        id:1,
        title: "Test Title",
        text: "Push Notification",
        icon: "http://icons.iconarchive.com/icons/treetog/junior/256/camera-icon.png",
        at: new Date(new Date().getTime() + 5 * 1000),
        sound: null,
        every: "minute"          
    });

If I am using remote url the app forced to stop. Any one help me to solve this.

Answer 1

Put your icon.png file in src\assets\img directory for icon and for small icon put icon.png file in platforms\android\res\drawable directory

this.notification = {
    id: inc++,
    title: 'your title',
    text: "your text",
    icon:'file://assets/img/icon.png',
    smallIcon:'res://icon',
    sound: 'file://assets/sounds/sms.mp3',
    data: { mydata: 'My hidden message this is' },
    at: timestamp
};
this.notifications.push(this.notification);

Answer 2

Assuming that you have stored your icon.png in your res directory!

There are two methods that you can use to direct to res folder and its content:

• res://drawable/icon2.png : that directs to the res-folder and its subfolder drawable itself
• file://res/drawable/koala6.jpg : that starts at the root of your platform directory and directs to another icon

I have used two 50x50 size icons that are stored in: platforms/android/res/drawable

and are named: koala6.jpg and icon2.png

But you can store your icons in any sub-directory of res.

You can show one of these two images by using one of the methods shown above:

LocalNotifications.schedule({
    id:1,
    title: "Test Title",
    text: "Push Notification",

    // method 1:
    icon: 'res://drawable/icon2', 

    // method 2:
    //icon: "file://res/drawable/koala6", 

    at: new Date(new Date().getTime() + 5 * 1000),
    sound: null,
    every: "second"
});

As this example shows the image-extensions (.png, .jpg) are left out.

---

When you want to show 50x50 images via url:

Define some permissions in your AndroidManifest.xml:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="io.ionic.starter" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <receiver android:exported="false" android:name="de.appplant.cordova.plugin.localnotification.TriggerReceiver" />
        <receiver android:exported="false" android:name="de.appplant.cordova.plugin.localnotification.ClearReceiver" />
        <activity android:exported="false" android:launchMode="singleInstance" android:name="de.appplant.cordova.plugin.localnotification.ClickActivity" android:theme="@android:style/Theme.NoDisplay" />
        <receiver android:exported="false" android:name="de.appplant.cordova.plugin.notification.TriggerReceiver" />
        <receiver android:exported="false" android:name="de.appplant.cordova.plugin.notification.ClearReceiver" />
        <receiver android:exported="false" android:name="de.appplant.cordova.plugin.localnotification.RestoreReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>
        <activity android:exported="false" android:launchMode="singleInstance" android:name="de.appplant.cordova.plugin.notification.ClickActivity" android:theme="@android:style/Theme.NoDisplay" />
    </application>
    <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <!-- these two are added -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

Then you can show them as you did it by using image-extensions (.png, .jpg)

Hope this helps.