icon and smallicon

[vasani-arpit]

I have a issue with icon and small icon

cordova.plugins.notification.local.schedule({
    id: 1,
    title: "DTH ",
    text: "Don't forget your DTH bill.",
    at: notificationDate,
    icon:'dth_notification',
    smallIcon:'dth_notification'
});

now the right sign is app icon. shouldn't that be 'dth_notification' ? (DTH_notification is the dish icon in assets. I've put hdpi,xhdpi,ldpi and mdpi files in all folders)
what I need is the following.

is that not possible with this plugin ? or this is a bug ?

[vasani-arpit]

Sorry.
Forgot "res://" in URI

cordova.plugins.notification.local.schedule({
    id: 1,
    title: "DTH ",
    text: "Don't forget your DTH bill.",
    at: notificationDate,
    icon:'res://dth_notification',
    smallIcon:'res://dth_notification'
});

[victorazevedo]

I´m trying to put image on the push and it´s not working. The sound is ok.

        var event = {
            id: 1,
            title: 'Hello!',
            sound: "file://img/ok.mp3",
            icon: "file://img/good.png",
            text: 'HI'
        };

I´m putting the image in the 'img' folder inside www folder at the project... Is it right?
What is the resolution of image for it?

[vasani-arpit]

no Image has to be in drawable folder inside android platform (if you are targeting android)
path is <project folder>/platforms/Android/res
find 4 folders named following

drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi

above folder will have app icon in it. put your notification icon as same size as app icon there. and then use icon:res://iconNameWithoutExtention
keep in mind that icon must be transparent PNG.

[vasani-arpit]

Yes,
your icon is not transparent.
it has to be transparent PNG.
https://developer.android.com/design/patterns/notifications.html
head over to the section "Make notifications optional"

[cquezpro]

what is correct dimensions for icon?

[vasani-arpit]

@sirius2013
depends on the device so you have to put it for all dimensions

drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi

[cquezpro]

[cquezpro]

I am seeing white icon on the status bar.

[vasani-arpit]

your logo has to be transparent png to be seen in notification bar.
have a look at this link

[cquezpro]

@vasani-arpit
Thanks
cordova.plugins.notification.local.schedule({
id: 1,
title: "DTH ",
text: "Don't forget your DTH bill.",
at: notificationDate,
icon:'res://dth_notification',
smallIcon:'res://dth_notification'
});
but you used same image for icon and smallIcon?
how didd you get this result?
https://cloud.githubusercontent.com/assets/6497827/15040979/50a9323a-12d6-11e6-95b7-8ecc136b0a16.jpg

[cquezpro]

I tried to use this, but no lucky.

[vasani-arpit]

@sirius2013
your file is not transparent.
in my case I had this file app_logo.png

if I use this file it gives round white circle, same as you are having square.
but if I use this file icon_transparent.png

it gives proper smallicon/icon like

cordova.plugins.notification.local.schedule({
    id: item.id,
    title: item.T,
    text: item.n,
    at: momentDate.toDate(),
    icon: 'res://otherBigIcon',
    smallIcon: 'res://icon_transparant',
    every: item.r,
    data: notifData,
    sound: 'file://' + item.s,
    ongoing: true
}, callback);

ignore other values than icon,smallIcon
and if res:// is not working for you can use file:// or http://
look 10.URIs

[shrutigv]

Hi,
I am getting the blank square blank in status bar and works fine rest places. I have placed them in drawable folder. My image is a transperant image. Thanks in advance
cordova.plugins.notification.local.schedule({
id: i,
icon: "res://icon.png",
smallIcon: "res://icon.png",
at: t
});

[vasani-arpit]

Hi @shrutigv

android will convert everything in single color

basically the white part inside your icon (head and glass) should not be white it should be transparent.

please refer this link which I've sent earlier.

I hope this resolves your query.

[dovk]

What eventually worked for me was taking the drawable-xhdpi-icon icon (size 96x96), renaming it icon.png and placing it in two places:
   /src/assets/img
   /platforms/android/res/drawable
The drawable folder is a new folder created manually.
In the local or geofence notification it is reference as follows:

      smallIcon: 'res://icon',
      icon: 'file://assets/img/icon.png'

[lathonez]

What eventually worked for me was taking the drawable-xhdpi-icon icon (size 96x96), renaming iticon.png and placing it in two places

This helped me out, thanks. Eventually I had to do platforms/android/app/src/main/res/drawable.

Any icon name seems to work in this location. I have an pacakge.json script to patch:

    "patch-small-icon": "mkdir -p platforms/android/app/src/main/res/drawable && cp src/assets/imgs/logo.png platforms/android/app/src/main/res/drawable"

The two are then referenced like this:

      smallIcon: 'res://logo.png',
      icon: 'file://assets/imgs/logo.png'

[joesleiman]

i made a transparent background image with png extension and with correct name m everything work fine, but i don't need a transparent background as the icon is white so it appears ugly, so how can i change the background color of the icon (big-icon)?

[Zerokk]

I've been trying multiple approaches to fix the smallIcon thingy, and none of them have worked this far. I managed to show a normal icon at the right of the notification, which is kinda okay, but I need to either remove or put a decent smallIcon, though I keep getting the "black" square.

I tried the @dovk approach, I followed the @vasani-arpit link of making a full alpha image with the visible parts in white, and everything. But nothing seems to work. Anybody can help me?

This is what I keep seeing, no matter what:

[dovk]

I see I didn't go into detail earlier: I added the script below as an after_platform_add hook.
Over time I expanded as follows -
(a) write to folder mipmap as well as drawable,
(b) write to path platforms\android\app\src\main\res as well as platforms\android\res

rem create and write to folder drawable
md ...\platforms\android\res\drawable 
copy ...\src\assets\img\icon.png   ...\platforms\android\res\drawable\ 
rem create and write to folder mipmap
md ...\platforms\android\res\mipmap 
copy ...\src\assets\img\icon.png   ...\platforms\android\res\mipmap\ 
rem do the same for path platforms\android\app\src\main\res
md ...\platforms\android\app\src\main\res\drawable 
copy ...\src\assets\img\icon.png   ...\platforms\android\app\src\main\res\drawable\ 
md ...\platforms\android\app\src\main\res\mipmap
copy ...\src\assets\img\icon.png   ...\platforms\android\app\src\main\res\mipmap\ 

I hope that might still help

[vasani-arpit]

@Zerokk
Can you share the app logo from android project? These Mi devices are weird in terms of following android standards.

[Zerokk]

@vasani-arpit The icon I currently have, and that shows in the right side of the push notifications aswell in the mobile desktop, is this:

As a transparent one was needed, I tested these both, none of them working (not even placing them in the drawable and mipmap directories as @dovk said):

This one is transparent and white, so do a click down here
\/

/\

The other tested logo:

(yes, they are simple, test-purpose-only logos, not final logos)

[vasani-arpit]

Issue could be different than what I am thinking. Can you share your code or platform/android folder ?

[Zerokk]

@vasani-arpit I just fixed it! I just changed the ILocalNotification's smallIcon to the name "transparent_logo", which was the name I had in the mipmap-ldpi folder, and it worked. Thanks everybody for the help!

[saifk5297]

@Zerokk can you please share the code and folder to place image. i am also facing same issues in mi mobile if possible ASAP

[hanoj-budime]

this my location resources/notificationIcons/IconNotificationDefault-ldpi.png

in code i added

    `smallIcon : 'res://notificationIcons/IconNotificationDefault-ldpi.png',  not worked`


    `smallIcon : 'resources/notificationIcons/IconNotificationDefault-ldpi.png',  not worked`

my project Angular 7 using ionic 4v