Skip to content
This repository has been archived by the owner on Sep 4, 2020. It is now read-only.

Phonegap Build: Notification doesn't show app icon #118

Closed
LufoX11 opened this issue Sep 9, 2015 · 45 comments
Closed

Phonegap Build: Notification doesn't show app icon #118

LufoX11 opened this issue Sep 9, 2015 · 45 comments

Comments

@LufoX11
Copy link

LufoX11 commented Sep 9, 2015

Hi. I'm using build.phonegap.com to compile my app. I'm using the last available version (cli-5.1.1) and the last version of this plugin (1.2.3, updated 2 hours ago and tested everything again). My phone is a Nexus 5 running Android 5.1.1.
This is my current config:

var push = PushNotification.init({
        "android": {
            "senderID": "123456"
        },
        "ios": {},
        "windows": {}
    });

And this is the result:
screenshot_2015-09-09-01-36-58
screenshot_2015-09-09-01-37-44
My app icon is present everywhere in drawable folders (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). My phone is using xxxhdpi. I tried adding the custom var icon:

var push = PushNotification.init({
        "android": {
            "senderID": "123456",
            "icon": "icon",
            "iconColor": "#FFFFFF"                                                                                                                       
        },
        "ios": {},
        "windows": {}
    });

...and only worked as expected the iconColor property, but the icon is still missing.
This is the icon I'm using for xxxhdpi (res/drawable-xxxhdpi, size 192x192):
icon-192-xxxhdpi
The size of the icon present in the fallback drawable folder (res/drawable) is 57x57.
It has a transparent background (to make it look a round) and a solid white for the circle background.
It's working since my app is using it for showing everywhere:
screenshot_2015-09-09-01-38-48

Am I missing something? I read all the other threads about, checked the new android doc regarding this (as you recommended) and even so I can't get it.

@macdonst macdonst added the docs label Sep 9, 2015
@macdonst
Copy link
Member

macdonst commented Sep 9, 2015

@shamank the problem is PhoneGap Build. You don't have access to the res/drawables folder on PGB. You can only upload your www folder and hooks don't run on PGB as well. So there is no way for you to upload the icon you want to use to PGB.

The two possible workarounds are:

  1. build your app using the CLI
  2. Modify your default app icon to have the a transparency as it will be used as the default.

@LufoX11
Copy link
Author

LufoX11 commented Sep 9, 2015

But I want to use my default app icon, the icon that is already there in the res/drawables folder. Why is it not taking it as the default? That icon is 57x57 png, the same that is in the root folder

@LufoX11
Copy link
Author

LufoX11 commented Sep 9, 2015

Is there some example icon I could see to be able to understand the properties I need for the icon?

@LufoX11
Copy link
Author

LufoX11 commented Sep 11, 2015

Sorry to insist in this, but I would really appreciate your help.

@macdonst
Copy link
Member

@shamank here is an example icon. You'll notice that the image only has two color pixels, black and transparent. Android 5+ will take your image and replace all non transparent pixes with white. So when you are creating an icon you should take the transparency factor into account. If there is no transparency the who image turns white. That's why we give you the option to supply a different icon for the push notification.

phonegap

@LufoX11
Copy link
Author

LufoX11 commented Sep 11, 2015

Oh god... That's really bad news. The guys from Build Phonegap told me I can't upload custom images to the drawable folder. Is there a way I could hide the little icon and just show the bigger image (when available)? It would be really really helpful to me (and users migrating to this plugin since the most popular one -I was using it- stoped working in Android 5 and the project is not being updated anymore) if:

  • I could define a custom path to the icon (external resource like http://... or following the path from www folder).
  • I had the option to completly hide the icon.

Is it possible? Thanks!

@chriseckman
Copy link

@shamank this is how I fixed the white icon in my Ionic app. If you have specific questions, just let me know. http://forum.ionicframework.com/t/android-lolipop-nexus-push-notifications-plugin-icon-is-white/29724

@LufoX11
Copy link
Author

LufoX11 commented Sep 12, 2015

Thank you! That site is really a very valuable resource and will save me a lot of time in the future :)
Well, regarding the main subject, you are saying that I need to place a folder "/platforms/android/res" in the root of the project? Won't Phonegap Build leave it there (inside the scope of "www" folder) instead of moving / merging it with Android scheme folders? It would be really a miracle :| Are you using Phonegap Build (build.phonegap.com) to compile your app?

@chriseckman
Copy link

The images don't go in the www folder. They go into the platform specific folder for Android. Idk, what those are in a phone gap project, but I'd assume it's fairly similar to Ionic. I'm using Ionic's CLI tool to build.

If I were you, I'd really consider switching to Ionic, the performance is much better as well as a whole host of other reasons.

@LufoX11
Copy link
Author

LufoX11 commented Sep 12, 2015

I use ionic too (my current project I built using jqm however). compiling from the cli is different, there you can access those folders. The problem is that in Phonegap Build you can't. I use Build because it's a lot of easier compiling for iOS too (I'm on Linux). Now I have a vm with the last OSX installed and is what I use to send to AppStore, but I'm very used to use this cloud service, and switching will imply a lot of things I don't want to do :P

@smdvdsn
Copy link
Collaborator

smdvdsn commented Sep 13, 2015

A quick fix for this although not ideal is to set your targetSdkVersion to 20 (anything less than 21) as per this stack overflow. http://stackoverflow.com/questions/30795431/icon-not-displaying-in-notification

In your config.xml add..
<preference name="android-targetSdkVersion" value="20"/>

If you really want the new layout, you could try creating a plugin. Plugins are able to copy resources into the res folder of your android project. If you are paying for PG Build you can have private plugins otherwise you need to publish to npm.

In your plugin.xml add a resource line for each icon resolution..
<resource-file src="noti-icon.png" target="res/drawable/noti-icon.png" />
<resource-file src="noti-icon-hdpi.png" target="res/drawable-hdpi/noti-icon.png" />

@LufoX11
Copy link
Author

LufoX11 commented Sep 13, 2015

Wow! The last solution sounds really good! I will build this plugin and tell if that worked. Thank you!

@mauron85
Copy link

@shamank thank you, I've just posted question on Phonegap build forum, before reading your answer here.

I would like to use custom icons/images for notification bar actions buttons. Of course it works fine with cordova-cli, but in phonegap build apk they're missing :-(.

@smdvdsn is there any plugin in the wild, we can use?

@kentmw
Copy link

kentmw commented Oct 19, 2015

+1 I'm having this issue as well.
Just to add to our collective knowledge:

  1. I tried fooling PGB to bring in my images into the res directory by trying various qualifiers (raw, foo, etc.) to the and gap:splash tags. No luck.
  2. I'm considering using apktool to explode the apk, add an icon and then rebuild it. Something like: apktool d foo.apk where foo.apk was pulled down from phonegap build. Then add the icon to the res directory, then rebuild it using: apktool b -c foo. Not a fan of this because it adds apktool as a dependency to our build process, and then I have to worry about serving the newly created apk (it's nice pulling the apk onto my phone using PGB to host it).

Question: if I lower my targetSdkVersion, does that mean my app doesn't work for any users on lolipop?

@kentmw
Copy link

kentmw commented Oct 19, 2015

@smdvdsn, I don't understand how a plugin will help here. Plugins get registered and invoked after the apk has been built - more specifically during run time. Phonegap Build won't move things into the res directory, so the only alternative is to copy the icons from the www directory to the res directory after starting the app. If a plugin was going to copy something from the www to the res directory after the application has started, the R class has already been generated (it's dynamically generated) and ids are assigned. I don't think you could access a new resource added later. Please prove me wrong if that's not the case (see the link below for someone who thinks it might be possible).

I did find that in the newest android API (23 or code name M) they let you build your own Icon object, so that will work - dependent on PGB letting you build with targetSdkVersion of 23 and users having that version, nether which is the case. When that happens, it would look like:

Bitmap iconBitMap = GCMIntentService.getBitmapFromAsset(context, "www/res/icon/android/drawable/small_icon.png");
Icon icon = Icon.createWithBitmap(iconBitMap);
NotificationCompat.Builder mBuilder =
            new NotificationCompat.Builder(context)
                             .setSmallIcon(icon)

@shamank and @mauron85, any luck on other solutions?

Lastly, I saw this guy post a similar question to SO: http://stackoverflow.com/questions/30802589/how-to-add-native-image-with-phonegap-build
In his comments he mentioned having a plugin to do the copying. I don't have enough SO reputation to post a comment back to him for further clarification.

@smdvdsn
Copy link
Collaborator

smdvdsn commented Oct 19, 2015

@kentmw what I'm suggesting is using/abusing the way plugins are installed in your project. The plugin.xml contains entries that tell plugman where to install the files into your project. By creating a plugin that contains your notification icons and plugin.xml with resource-file entries it should copy the icons over for you. Your plugin would have no runtime components.

The inappbrowser is an example of a plugin that has resource images. You can see it here https://github.com/apache/cordova-plugin-inappbrowser/blob/master/plugin.xml#L53

@kentmw
Copy link

kentmw commented Oct 19, 2015

@smdvdsn awesome. I didn't realize that plugins could move things over to the res directory. @shamank, did you write a plugin to do this? Otherwise I'll take a stab at it today.

@kentmw
Copy link

kentmw commented Oct 19, 2015

Hmm... it seems that the resources that the plugin can grab have to be inside the plugin itself... which makes making a generic one impossible.

@kentmw
Copy link

kentmw commented Oct 19, 2015

I haven't released the plugin publically, just trying it out privately so far. But you can take a look at: https://github.com/kentmw/secondary-icon

@mauron85
Copy link

@kentmw secondary-icon looks nice, but how will you propagate it to PGB? The only way in my mind is npm. But I don't encourage anybody to do so. It's a crazy idea to polute npm with res only plugins.

@kentmw
Copy link

kentmw commented Oct 19, 2015

Well, you have to fork the project as resources are only accessible to the plugin project and when you do so, the plugin contains your propriatary content, so it should be a private plugin. If it's a private plugin, it shouldn't be on npm or PGB as a public plugin, so I'm submitting my fork as a private plugin to PGB.

@mauron85
Copy link

Ahh. I forgot that there are private plugins on PGB. Then it sounds like solution. Anybody who needs this should create their own private res only plugin. For me it means to start paying adobe tho. :-(

@kentmw
Copy link

kentmw commented Oct 19, 2015

If you found it useful, plus one the answer to SO: http://stackoverflow.com/questions/30802589/how-to-add-native-image-with-phonegap-build/33221780#33221780 so people know to look here and contribute to the conversation.

@LufoX11
Copy link
Author

LufoX11 commented Oct 20, 2015

Well, I got to the same conclusion than you guys, so after spending some time developing such plugin I desisted and updated my app icon instead (I know, it sucks).
I hope PGB people understand the importance of creating an elegant way for dealing with this for their next updates.
If you want to say something or contribute with this "feature request", this is what I wrote a month ago in their forum: http://community.phonegap.com/nitobi/topics/can-i-add-custom-images-in-the-drawable-directory

@LufoX11
Copy link
Author

LufoX11 commented Oct 20, 2015

PS: Any of you is having issues with iOS push notifications? It doesn't work anymore since I implemented this plugin.

@kentmw
Copy link

kentmw commented Oct 20, 2015

Implemented which plugin? Phonegap-plugin-push or secondary-icon?

On Tue, Oct 20, 2015, 9:44 AM Luciano Fantuzzi notifications@github.com
wrote:

PS: Any of you is having issues with iOS push notifications? It doesn't
work anymore since I implemented this plugin.


Reply to this email directly or view it on GitHub
#118 (comment)
.

@LufoX11
Copy link
Author

LufoX11 commented Oct 20, 2015

Phonegap-plugin-push. I didn't use the last one.

@mauron85
Copy link

Getting Adobe attention?
phonegap/build#472

@ghost
Copy link

ghost commented Dec 4, 2015

@macdonst
Copy link
Member

Please go comment on this issue.

apache/cordova-discuss#6

The best way forward is to get this into a new version of Cordova that can be picked up by PGB.

@LufoX11
Copy link
Author

LufoX11 commented Jan 18, 2016

And after 3 months we are still stuck here, with a "workaround" (using all my app main icons set with transparencies -to fit the different sizes and screens-) because there's no way to reach the resources directory. Did someone solved this in any way?

To PGB developers: Would it be possible for you to allow adding custom icons / images exactly the same you do for app / splash images? Ie.:

<!-- Valid tag -->
<icon src="my-path/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />

<!-- New custom tag -->
<icon src="my-path/custom.png" gap:platform="android" gap:qualifier="custom" />

@macdonst
Copy link
Member

@shamank see my previous comment. Getting this added into Cordova is the best way to go.

@LufoX11
Copy link
Author

LufoX11 commented Jan 18, 2016

http://phonegap.com/blog/2015/11/19/config_xml_changes_part_two

About the last part ("Splashscreens and Icons"), where inside the iOS tag you don't specify things like gap:something:

<platform name="ios">
  <icon src="ios/icons/100.png" width="100" height="100" />
  <splash src="ios/splash/default.png" width="320" height="480" />
</platform>

Is it possible now to do this...

<platform name="android">
  <icon src="my-path/custom.png" width="100" height="100" />
</platform>

...with custom.png being moved to native Android's assets folder?

@macdonst
Copy link
Member

@shamank no, the tags icon and splashscreen specify exact locations for things to be copied to.

@LufoX11
Copy link
Author

LufoX11 commented Jan 18, 2016

@macdonst but if those paths (src attribute) are target locations, how does PGB builder know the source file to be copied from? I think they act the same as before but just inside a tag defining the scope (platform name="X"). My hope was because of the contents (icon & splash tags) inside the ios platform tag, where they don't specify "gap" attributes, so I thought they are now being copied to the assets folder as is (right now, if they don't match a gap:qualifier pattern they will be ignored).
PS: I agree with you and just added a comment to the thread in your link.

@LufoX11
Copy link
Author

LufoX11 commented Jan 19, 2016

guys, it looks like there's support from november for including custom files in the res directory (and subdirectories): phonegap/build#401 (comment)

@LufoX11
Copy link
Author

LufoX11 commented Jan 19, 2016

I can confirm it works :D problem solved!

@LufoX11 LufoX11 closed this as completed Jan 19, 2016
@phongnguyen192
Copy link

@shamank Could you explain more detail ? About how to use custom image, and how to configure PushNotification to use my custom icon.

@LufoX11
Copy link
Author

LufoX11 commented Jan 19, 2016

@kun192 Short solution:

push = PushNotification.init({
    "android": {
        "senderID": "blablala",
        "icon": "pin", // It will search for pin.png in your android drawable folder
        "iconColor": "#00AABB"
    }
});

To allow the plugin to use a custom icon (pin.png) and not taking the default app icon (icon.png) just add the locales/android/drawable folder structure in the root of your project (Ie. where it's supposed you have your main index.html) and add the custom icon file (pin.png) inside: locales/android/drawable/pin.png
The builder will merge your custom drawable contents with the ones in the /res/drawable folder, prioritizing yours.

I'm using phonegap-version cli-5.2.0.

@kentmw
Copy link

kentmw commented Jan 19, 2016

@macdonst macdonst added this to the Release 1.6.0 milestone Jan 20, 2016
@macdonst
Copy link
Member

I'm going to re-open this so I will remember to document it. 😄

@benmcmaster
Copy link

Anybody know what size the icon PNG should be?

@pke
Copy link

pke commented Jun 17, 2016

@benmcmaster 24x24px

@pke
Copy link

pke commented Jun 17, 2016

I am using the image, generated by https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=system even but the icon is still white. In my init I use

window.PushNotification.init({
        android: {
          senderID: GCM_SENDER_ID,
          icon: "system",
        },
        ios: {
          alert: true,
          badge: false,
          sound: false,
        },
        windows: {
        },
      })

@lock
Copy link

lock bot commented Jun 4, 2018

This thread has been automatically locked.

@lock lock bot locked as resolved and limited conversation to collaborators Jun 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests

9 participants