How do I apply a smallIcon?

[JhonnyJason]

Hello,

I'm quite clueless how I do include a smallIcon.
I have been prompted that I need to use a "res://..." path.

But it appears that I have no Idea around that. And just stubbornly use

smallIcon: "res://path/to/icon/in/www
or
smallIcon: "res://path/to/icon/in/www/without/www

Does not do the trick. And I assume that naive attempt is pretty newbish because I'm missing out on what "res://" actually means.

So I'm there on the journey what this res:// actually is and how I can but ressources in there through cordova.
Maybe somebody here knows how I should treat it?

I'm already researching about it - until yet it only confused me, appears I need to completely figure out how Cordova moves assets for iOS and Android during build which is quite a task :-/

[rwillett]

We create a res folder at the root level for the application. e.g. where the config.xml file sits.

Inside the res folder we have folders for android and subfolders for that with the different icons in

find . -name pw_notification.png
./res/android/drawable-xxhdpi-v11/pw_notification.png
./res/android/drawable-xhdpi/pw_notification.png
./res/android/drawable-xxxhdpi-v11/pw_notification.png
./res/android/drawable-xxhdpi/pw_notification.png
./res/android/drawable-hdpi/pw_notification.png
./res/android/drawable-ldpi/pw_notification.png
./res/android/drawable-mdpi/pw_notification.png
./res/android/drawable-xxxhdpi/pw_notification.png
./platforms/ios/www/img/pw_notification.png
./platforms/ios/Jambuster.xcarchive/Products/Applications/Jambuster.app/www/img/pw_notification.png
./platforms/ios/build/emulator/Jambuster.app/www/img/pw_notification.png
./platforms/android/res/drawable-xhdpi/pw_notification.png
./platforms/android/res/drawable-xxhdpi/pw_notification.png
./platforms/android/res/drawable-hdpi/pw_notification.png
./platforms/android/res/drawable-ldpi/pw_notification.png
./platforms/android/res/drawable-mdpi/pw_notification.png
./platforms/android/res/drawable-xxxhdpi/pw_notification.png
./platforms/android/build/intermediates/assets/debug/www/img/pw_notification.png
./platforms/android/assets/www/img/pw_notification.png
./www/img/pw_notification.png

We have a hook

hooks/after_prepare/020_copy_notification_icons.sh

to look for the various png files in the res folder and copy them to

platforms/android/res

here's the code

#!/bin/bash

echo "Copying over PushWoosh notification icons for Android"

SAVEIFS=$IFS
IFS=$(echo -en "\n\b")
TARGET=platforms/android/res
FILES=`find res/android -type f -name "pw_notification.png" -o -name "jambuster_notification.png" -o -name "ic_notify.png" -o -name "icon.png" -o -name "android_oreo_large_notification.png" -o -name "ic_stat_onesignal_default.png" | sed "s/\-v11//"`
# FILES=`find res/android -type f -name "pw_notification.png"`
for j in $FILES
do
	newj=`echo $j | sed "s/\-v11//"`
	# echo "newj = $newj"
	FILE=`basename $newj`
	DIR=`dirname $newj`
	DIR=`basename $DIR`
	# TARGET_FILE=$TARGET/$DIR/$j
	# echo "FILE = $FILE"
	# echo "TARGET = $TARGET";
	# echo "DIR = $DIR"
	# echo TARGET_DIR $TARGET_DIR/$DIR
	echo cp $j $TARGET/$DIR/$FILE

	if [ ! -d $TARGET/$DIR ]; then
		mkdir -p $TARGET/$DIR
	fi

	cp $j $TARGET/$DIR/$FILE
done
IFS=$SAVEIFS

echo PWD = `pwd`

exit 0

This is for PushWoosh notifications, hence the pw_ prefix.

YMMV.

[Tawpie]

Pretty much the same as @rwillett

I do: "res://actionbar_light" and actionbar_light is a properly constructed action bar icon at each resolution (google specs this pretty tightly, if you don't follow their spec it will just show the default bell icon)

Because the cordova copying process is arcane to me, I also copy the individual icons to the platforms/android/res/drawable-xhdpi folder (etc., one folder for each resolution). Then res:// can find them.

I stress: the icon absolutely has to conform to the google spec or you'll get the bell

[rwillett]

@Tawpie seconded.

[JhonnyJason]

hello @rwillett
thanks for the extensive answer :-)

So inside platforms/android/
there should be a res/ folder and within this folder there should be other folders for drawables for many pixel densities.

The shell-script is an automation therefore to add the relevant assets out of the provided res/android/ folder to the corresponding res/ folder (in platforms/android/).

Well I first skipped the automation part and created the folders and icons manually to just see if I get where I want to.

The problem I'm facing then is that as soon I have a res/ folder in the platforms/android/ directory android won't build nor run.

I use the latest phonegap cli 8.0.0 using cordova Android 7.0.0.

So I'm investigating now on the build process itself. Using android Studio.
Maybe there is something simple I'm missing^^...
Do I have to add something on the config.xml?

Another question which came to my mind then was - as this looks like quite android specific, how will that work for iOS?
Does iOS already use an appropriate icon off the AppIcons I provide anyways in all possible Sizes?

Also, is there a real difference between folders called mipmap-ldpi to drawable-ldpi?
I have specified App launch Icon for Android in for all the pixel densities.(but those are in mipmap-ldpi folders inside the www/ folder and I only reference them through the config.xml as )
I once hoped that the build process is already copying these Icons somewhere Android can use it conveniently. Hopefully in a way I could access it through "res://..."
I just did not find it or any evidence that my hope is legit^^

@Tawpie
So the google spec is about pixel size of the icon?
I generate the icons through https://makeappicon.com/
There they provide these icons inside the mipmap-ldpi/ folders etc.
Maybe the mipmap and drawables are of slightly different pixel size, that I cannot use those generated icons as a drawable ressource?

[JhonnyJason]

Yet I have found the folder on my system where to I have put the ressources in:
platforms/android/app/src/main/res

When I include the icons notification.png of size
18x18 to drawable-ldpi-v11
24x24 to drawable-mdpi-v11
36x36 to drawable-hdpi-v11
48x48 to drawable-xhdpi-v11

It finally builds and works yey! :D

Now I can automate that with such a hook-script as inspired by @rwillett thnx!

And hope that for iOS it just works^^

[Tawpie]

@JhonnyJason Congratulations! Remember iOS doesn't need a small icon, it just uses the app icon. Also remember that every time you remove/add the android platform it will remove your new res folder so you have to put everything back. I'd recommend making a copy of the platforms/android/res folder once you get everything working and then copying that copy back when needed.

I don't know for sure what the mipmap folders are supposed to hold, for my app I have the app icon and splash screen in the xhdpi/ldpi etc. folders.

The last piece of icon heck to overcome is the Android26 app icon—I have two xml files in platforms/android/res/mipmap-anydpi-v26 in the res folder, again manually (actually with a script) placed.

[JhonnyJason]

Thanx,
yhea iOS just works with the App launch icon :-)

I guess I should take care about the v26 case too - will close as soon as I have everything set up and working like a charm ;-)

[rwillett]

@JhonnyJason

Thats why the hook script is there, to regenerate as needed. @Tawpie copies the directory tree, I recreate the directory tree, the time taken to do this is effectively zero.

You have the script, you know the technique. This should be easy now.

Rob

[JhonnyJason]

Hello,

You're right for the local build :D where we have full control over hooks.

When trying to use Phonegap Cloud build service for iOS and Android the quest on how to get the Icons right and everything neat appears to be not satisfactory solvable.

So I have to detach from that Quest - here is the current state:
https://forums.adobe.com/thread/2506003

And will close the issue - dealing with other issues :-)

Thanx and Cheers!

[J4si3k]

Thank you @JhonnyJason for your answer. This really help me! All my day i try to set smallIcon on android and finally i did this! I'm using this plugin with Meteor! What is important in my case that:

• file name should be other then icon.png, i use notification.png
• set correct png file, look here
• set property like this: smallIcon: 'notification'