Cordova-plugin-firebase: Tutorial of solutions for icons and colors

Created on 29 Jun 2017 · 3Comments · Source: arnesson/cordova-plugin-firebase

Please try to keep this thread clutter free of questions - lets use it to only post working solutions. If you have a method that is different than the one below, please post it with step by step instructions (please don't assume certain steps, actually outline them for us)

==========================================

Like many others, i have not been able to get colors or custom icons to work as instructed in the plugin specs. However, without having to do any special specific downloads or xml configurations (and I am using Ionic v1.78) I was able to get the following to work.

I am passing the following values from my server side script. The upside of this technique is you can preload multiple images, icons for different types of messages:

  $fcmMsg = array(
    'body' => $msgBody,
    'title' => $msgTitle,
    'sound' => "default",
    'color' => "#203E78",
    'icon' => "icon"
  );

'icon' is the same 'icon.png' image that is in all the /platforms/android/res/mipmap-(x)dpi folders. I also got the screen image to work using 'screen.png (ie: 'icon' => 'screen') that is in all the platforms/android/res/drawable-(x)dpi folders. Not certain which folder its specifically using...as there are different sized versions of the same 'screen.png' or 'icon.png' in all of those various folders.

_There is even a method to pass a URL to icon so it uses a remote server icon - however I haven't tried this method yet._

Caveat:
Now, that being said, I have seen different responses on different phones when supplying the color from the server side script.

1a: Samsung Galaxy Status Bar at Top: Actual app icon. (sweet!)
1b: Samsung Galaxy status bar opened: Actual app icon, over a circle of the above color - effectively a deep blue icon (with some small/tiny detail) over a deep blue circle - very hard to see. (not sweet)
1c: If above color is "#ffffff" (white), then 1b looks perfect - my deep blue logo centered in a white circle

2a: LG K20 Status Bar at top: Outline of the app icon completely filled in with white. (not ideal) - defining a color has no impact on the LG Status Bar Icon.
2b: LG K20 Status Bar opened: Outline of the app icon completely filled in with above color (acceptable)
2c: If above color is "#ffffff" (white), then the 2b is a white icon. (def not ideal)

1a is what we would all want for both the status bar opened and closed. 2b could at least be acceptable. But there seems no clear way to merge 1a and 2b to at least come up with a more universal method that would (probably) accommodate most phone types.

I am still testing and researching methods....hoping to find a more universal method. I have 2 more Android phones and my iPhone I will be testing on later. Will post results when I do.

question

Source

rolinger

Most helpful comment

Update: Natively Android will use a white icon. Some phones (some Samsung devices) will honor your real icon. Other phones (like LG K20+) will use the Android spec white icon. On my LG phone its a white square. However, you can still get an outline of your logo in the status bar...and when the status bar drops down to actually view the notification you will see your real icon.

To do this, use these instructions: transparent png icon

Then you will need will need to make appropriate sized copies of that png file (ie: 192x192) and copy each one into its respective folder:

/projectRoot/platforms/android/res/mipmap-XXXXX
../mipmap-xxxhdpi = 192x192 pixels
../mipmap-xxhdpi = 144x144 pixels
../mipmap-xhdpi = 96x96 pixels
../mipmap-mdpi = 48x48 pixels
../mipmap-ldpi = 36x36 pixels
../mipmap-hdpi = 72x72 pixels

In my folders I already has my main app icon called "icon.png"....I just added the new transparent png file as "icontrans.png" (note: lowercase lettering ONLY...no dashes, symbols, upper case, etc). Then when you do your actual push from your server (see above) you set 'icon' => 'icontrans'

rolinger on 3 Aug 2017

👍3

All 3 comments

To do this, use these instructions: transparent png icon

Then you will need will need to make appropriate sized copies of that png file (ie: 192x192) and copy each one into its respective folder:

rolinger on 3 Aug 2017

👍3

My solution, based on this thread and the comment on https://github.com/arnesson/cordova-plugin-firebase/issues/53#issuecomment-304573222 was:

Add the notification icon to resources/android/notification_icon/(xxx)dpi.png
In config.xml, configure the copy of the resources for the android platform:

<platform name="android">
        ...
        <resource-file src="resources/android/notification_icon/ldpi.png" target="res/drawable-ldpi/notification_icon.png" />
        <resource-file src="resources/android/notification_icon/mdpi.png" target="res/drawable-mdpi/notification_icon.png" />
        <resource-file src="resources/android/notification_icon/hdpi.png" target="res/drawable-hdpi/notification_icon.png" />
        <resource-file src="resources/android/notification_icon/xhdpi.png" target="res/drawable-xhdpi/notification_icon.png" />
        <resource-file src="resources/android/notification_icon/xxhdpi.png" target="res/drawable-xxhdpi/notification_icon.png" />
        <resource-file src="resources/android/notification_icon/xxxhdpi.png" target="res/drawable-xxxhdpi/notification_icon.png" />
</platform>

In config.xml, configure the default notification icon for android. This step avoids to have to send the icon: 'notification_icon' on each notification on server side. (Note the android schema definition on widget root tag)

<widget ... xmlns:android="http://schemas.android.com/apk/res/android">
    <platform name="android">
        ...
        <config-file parent="./application" target="AndroidManifest.xml">
            <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />
        </config-file>
    </platform>
</widget>

Hope this helps!