Having problems with icons on Android and PhoneGap Build (Nexus 4, Android 5.1.1)

[p-schuler]

I can't get the plugin to pickup my app icon. I looked at the instructions for PhoneGap build support to include an icon in the <www.zip>/locales/android/drawables/logo.png, when I look at the APK the logo.png is located here:/res/drawable/notificationIcon.png.

I specify notificationIcon in the init:

var push = PushNotification.init({
"android": {
"senderID": "xyz"
, "icon": "notificationIcon"
, "iconColor": "black"
}
});

I get a blank icon when the notification comes in on my Nexus 4, Android 5.1.1.

[macdonst]

@debugErr does you icon have any transparent pixels in it?

[ballenjr]

@macdonst, Mine does, it is a png. Is this a problem? I have been assuming that it treats it the same as any other resource. And I am using the same png as the main app icon which displays fine.

[macdonst]

@ballenjr No, a png is fine. What are the details of your problem. Seriously folks a screenshot would go a long way 😄

[ballenjr]

K, here is what I got... I have the png in all of the drawable folders. I am assuming that the documentation here is not being literal when mentioning "drawables" folder but referring to the various conventions denoting screen density eg. hdpi, xhdpi, etc. Oh ya, I am using inbox style. Clearly. Android version 5.1

I have tried both ways, 1) assuming that the default name would be valid so I left out the config option "icon". 2) explicitly providing the config option {"icon": "icon"}. File name is valid and it is located in all of the folders that I am aware that it should be. But this is what I see:

[ballenjr]

Needless to say that is not the icon I am expecting. And it is the same either way. Any thoughts?

[ballenjr]

I see now that this was specifically PGB. But I see that you already closed one for PGB. I am not using PGB. Should mine be a separate issue?

[ballenjr]

K, here is something I haven't tried: #118 (comment)

I'll try it now.

[macdonst]

@ballenjr it looks correct. Can you post the small icon you are using here?

[ballenjr]

I will have to ask the owner if he is ok with that. But it does have 3 colors including transparency. The post I just referenced is saying that there should only be 2 including transparency, correct?

[macdonst]

@ballenjr any pixel that is not transparent will be replaced with a white pixel. So if there are no transparent pixels inside of that white circle then it is acting like it should. Look at how the Gmail icon looks when you get a notification. Good use of negative space.

[ballenjr]

I suppose that is subjective. That was my problem but now, and I am sure the stakeholder will have something to say about it, the border padding is way off. Or margin depending on where you start your measure from. I got it to show properly using the negative space technique but it centered inside of a substantial margin so the look of it is not what it should be. Ya know? Plus the usable space that is left is so little that finer details are being lost. Personally I don't see the appeal. Seems like a design mangle to me.

So there really is no way to fill in the whole circle? I thought that your example filled it in pretty good. But mine needs to get really close to the edge.

[ballenjr]

You can see the empty border that I am referring to in the screenshot. Its all of the gray part. That is just too much to be mandatory.

[macdonst]

@ballenjr did you remove all the border from the icon you are including. It should go edge to edge.

[ballenjr]

Yes sir, the colored pixels touch all four edges. The pixeled edges are a little feathered but the opaque touches. I think the feathering may be a by product though cuz I exported the final png from an svg with clean edges.

[ballenjr]

Doesn't seem to be because of pixel density either. I just tried 96 dpi, same result.

[ballenjr]

Like I said you can see how it looks from that screen shot. It's basically the same though I did remove a little empty space around the edges. But it didn't make much of a visual difference.

[p-schuler]

Sorry @ballenjr I think you should open another issue. That's related to PhoneGap build.

@macdonst: I do have a dedicated icon that should be used for notifications (my standard app icons do not have transparency in them). That icon is basically all white with a transparent letter in the middle. I looked at the docs that are provided to include the custom icon for PB:

<www.zip>/locales/android/drawables/logo.png --> <android_apk>/res/drawables/logo.png

I added a locales folder as a child of the www root folder:

locales/android/drawables/notificationIcon.png

That logo does have transparency in it. Not sure what the recommended size is for that particular icon and how we would handle different resolutions, but anyway, when I build this, I don't see it being included in the PB package that is being created for some reason.

I'm using the suggested way of PB to include icons for android in different resolutions:

http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens

That might interfere with adding them directly to the project tree? It's definitely not being added to the res folder.

[p-schuler]

And here is a screenshot of what I'm seeing (since the regular icons are not transparent, I somewhat expect this if it picks up those):

[ballenjr]

It looks like your settings are correct. You seem to be saying that PGB failed to copy your notificationLogo.png into the drawable folder. If that is correct then do you know what image is actually being loaded?

I don't know how closely you read what we were just talking about but perhaps it might help you if you checkout that post that I referenced above. It cleared things up for me post haste. Then the owner elaborated even more right below my post.

Essentially looking at your screenshot it appears that you may be having the same misunderstanding that I was. If you compare yours with mine you will notice that yours is a white square while mine is a white circle. This is because the transparent pixels in my icon were arranged to form a circle and everything that was not transparent was completely filled in.

Since the visible pixels are all converted to white I had to redesign my icon to add more transparent pixels in the correct shape to reveal the background in that shape. This is to use the negative space technique that we were referring to.

In short your icon does not display as a multicolored rendering it displays as white and transparent on top of a colored background.

[p-schuler]

Apparently I had a problem in my path for the PB workaround. After fixing it and including the drawables folder name, it all worked and got added to my apk file. Thanks.

phonegap/build#401 (comment)

[lock]

This thread has been automatically locked.