Where to specify small icons (for notifications in status bar) in config.xml?

ionic-v1
1

Android 5.1 expects a white-on-transparent icon for status bar.

App icon is with full color, and those for notifications are in white-on-transparent.

So there should be two distinct zones in config.xml to provide both style of icons.

However, I have only this, thus mixing both styles:

<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
        <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
        <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
        <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
        <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
        <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

Where should I specify the white-on-transparent icons for notifications zone only ?

1 Like
2

I’m not sure about the config.xml options for the icon. I’ve googled for a solution about this and the information is quite scattered. I’d like to see @mhartington do a post about the various Android notification icons. I’ve seen several questions asked on SO about this for cordova apps but the answers aren’t too well developed. These things the Ionic devs usually explain very well for low/high level users.

3 Likes
3

android notification icons can be specified in the gcm push notification payload also.

4

@gaurav_ch Using GCM-Server ? (com.google.android.gcm)

5

@gaurav_ch - isn’t this something that the push service has to offer as part of it’s modeling? I’ve tried setting the title for ionic’s push service, by adjusting the data to match Parse/PushWoosh and it never works. Or is this at the cordova plugin level? Sorry for the ignorance.

Also, a lot of answers on stackoverflow point to modifying the plugin .java code which should work but it’s not clear on where the resource (icon) should be in relation to an ionic/cordova app. I’m assuming the platforms “resources” folder, is that correct?

6

@bradmartin Yes, they should reside in the platforms/android/res folder.

It’s not a good solution to modify the plugin itself. => error prone.

7

@bradmartin @gaurav_ch @mhartington In the PushPlugin.java (Telerik Cordova plugin) I found this regarding small icons:

    // try a custom included icon in our bundle named ic_stat_notify(.png)
	if (icon == -1) {
	   icon = getIconValue(context.getPackageName(), "ic_stat_notify");
	}

So I added in the drawables folders some ic_stat_notify.png with respect of all needed resolutions: last zone here about notifications .

It well displays the good icon on the very top (status bar), but whenever we swipe to show all notifications, it’s the app icon with full color that is taken, not the “ic_stat_notify”.
Any idea?

Update -----------

I managed to do the job.
I added ic_notify.png files for each resolution (same resolution as the app icon) representing large icons (those that appear in the notifications list).

So I have now icons for Android 5.1 without altering any plugins :wink:

1 Like
8

yes. you are right. I think plugin modification should not be done as it might lead to more errors.

9

@Mik378 that’s awesome. I’ll try this later today and see if it works for me as well. Would you mind posting a screenshot of your res folder for Android? I have like 20+ folders, are there that many density differences for Android or can it be reduced?

11

It just doesn’t load the image when I upload it here …

Basically, I put a ic_notify.png and ic_stat_notify.png for all folders whose patterns are:
drawable-[resolution] (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)

12

Hi @Mik378, did you change anything in the config.xml or just put the files into the folders?

13

No, I just put them into the folders.

14

@mik378 how did you generate all the resolutions from cli?

Or did you manually generated it and added it to all the folders.

15

@Mik378
I manually cropped images and placed those images in different 5 folders.

platforms/android/res/drawable-hdpi/ic_notify.png (24 Ă— 24 )
platforms/android/res/drawable-mdpi/ic_notify.png (36 Ă— 36)
platforms/android/res/drawable-xhdpi/ic_notify.png (48 Ă— 48)
platforms/android/res/drawable-xxhdpi/ic_notify.png (72 Ă— 72)
platforms/android/res/drawable-xxxhdpi/ic_notify.png (96 Ă— 96)

But still,there icon does not appear in notification bar. Am I missing something?

16

so you have to make sure, that the drawables are present again after you do ionic platform rm android?

isn’t there a way to add the resources in config.xml like we did with icon & splashscreen?

3 Likes
17

so did you solved this?

I also got an empty icon on android pushnotification (using ngcordova push plugin)

18

your png is just an image with some transparency, right?

19

I solved it :smile:

            var androidConfig = {
               'senderID'   : _senderid,
               'badge'      : true,
               'sound'      : false,
               'alert'      : true,
               'icon'       : 'icon'
             };

added “icon” in the android registration options.

1 Like
20

Exactly what I needed, works perfectly in ionic 3.5.

Thanks!

21

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>

And you set the notification option like this (without extension):

smallIcon: "res://my_notification_icon",
3 Likes