search

katzer / cordova-plugin-local-notifications

Cordova Local-Notification Plugin
Apache License 2.0
2.57k stars 1.76k forks source link

Add documentation/examples for icon/smallIcon #1398

Closed marcovtwout closed 1 month ago

marcovtwout commented 7 years ago

I see no option to submit a PR to the wiki, so I'm posting my suggestion as an issue.

Lots of questions are going around about how to set the icon/smallIcon resource. This could be explained on https://github.com/katzer/cordova-plugin-local-notifications/wiki/04.-Scheduling or https://github.com/katzer/cordova-plugin-local-notifications/wiki/10.-URIs

I suggest the following addition:

What type or size of icons to generate?

Icons should be placed in the platforms/android/res/drawable-* folders.

The resource should then be set like this (without extension):

smallIcon: "res://my_notification_icon",

When using a build service like Ionic Pro, you cannot place the images in platforms/android/ directly. You can make Cordova copy the files from a source folder by configuring your icons in config.xml with <resource-file>:

<platform name="android">
    ...
    <resource-file src="resources/android/notification-icon/icon-mdpi.png" target="res/drawable-mdpi/my_notification_icon.png" />
    <resource-file src="resources/android/notification-icon/icon-hdpi.png" target="res/drawable-hdpi/my_notification_icon.png" />
    <resource-file src="resources/android/notification-icon/icon-xhdpi.png" target="res/drawable-xhdpi/my_notification_icon.png" />
    <resource-file src="resources/android/notification-icon/icon-xxhdpi.png" target="res/drawable-xxhdpi/my_notification_icon.png" />
    <resource-file src="resources/android/notification-icon/icon-xxxhdpi.png" target="res/drawable-xxxhdpi/my_notification_icon.png" />
</platform>
pzanitti commented 6 years ago

Great post.

Heads up: If using Cordova Android 7 (<engine name="android" spec="^7.0.0" />) this won't work, you won't know why and it will also break your platform. You have to prepend app/src/main/ to the target path like so:

<platform name="android">
    ...
    <resource-file src="res/my_notification_icon/android/ldpi.png" target="app/src/main/res/drawable-ldpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/mdpi.png" target="app/src/main/res/drawable-mdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/hdpi.png" target="app/src/main/res/drawable-hdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/xhdpi.png" target="app/src/main/res/drawable-xhdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/my_notification_icon.png" />
</platform>
marcovtwout commented 6 years ago

@pzanitti I'm using Cordova 7 and it works just fine - I also don't recognise those paths app/src/main. Maybe that problem is specific to your setup?

pzanitti commented 6 years ago

My bad, I meant Cordova Android 7.0. I am actually on Cordova 8.0.

https://cordova.apache.org/announcements/2017/12/04/cordova-android-7.0.0.html With this release, we have changed the default project structure for Android projects. People who currently use the CLI and treat everything in the platforms directory as a build artifact should not notice a difference. However this a major breaking change for people creating standalone Cordova Android projects. This also means that the locations of files have changed and have been brought in line to the structure used by Android Studio.

rhclayto commented 6 years ago

This is how I do it, Android 7.1.0, Cordova 8.0:

        <splash density="port-hdpi" src="res/screen/android/logo-splash-hdpi.png" />
        <splash density="port-ldpi" src="res/screen/android/logo-splash-ldpi.png" />
        <splash density="port-mdpi" src="res/screen/android/logo-splash-mdpi.png" />
        <splash density="port-xhdpi" src="res/screen/android/logo-splash-xhdpi.png" />
        <splash density="port-xxhdpi" src="res/screen/android/logo-splash-xxhdpi.png" />
        <splash density="port-xxxhdpi" src="res/screen/android/logo-splash-xxxhdpi.png" />
        <icon density="ldpi" src="res/icon/android/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="res/icon/android/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="res/icon/android/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="res/icon/android/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="res/icon/android/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="res/icon/android/drawable-xxxhdpi-icon.png" />

Works fine, including referencing icons for this plugin.

andersborgabiro commented 6 years ago

@rhclayto The icon statements are used for app icons, not notification icons, that are much smaller. So, do you mean the app icons are automatically used (and scaled down) for local notifications anyway? Should I still use the icon and smallIcon settings somehow?

I still get the bell in any case.

moghwan commented 5 years ago

works perfectly with ionic version 4.5.0 thank you!

rhclayto commented 5 years ago

@rhclayto The icon statements are used for app icons, not notification icons, that are much smaller. So, do you mean the app icons are automatically used (and scaled down) for local notifications anyway? Should I still use the icon and smallIcon settings somehow?

I still get the bell in any case.

Yes, the small (autoscaled?) icons appear in notifications for me using these statements.

brunobaptista commented 5 years ago

perfect! you saved my life. :)

boltex commented 4 years ago

I've spent a couple hours reading contradicting tutorials about how to set icon, and smallIcon for this plugin. I just could not get it to work,. going to fallback on the 'bell' icon for now. oh well...

I wish there was a 'recent' project (not done for some old android 4.0) where we could actually see explicitly how to get those icons to appear. (required file format, required file location, required path specification when specifying this in JS. with or without file extension, with or without filepath, etc...)

Thanks in advance for anyone endeavoring such a thing! :)