I am using the local notifications plugin (Android) and I would like to add the notification-icons using the config.xml
For example I have a png file:
ic_stat_music_play
ic_stat_music_pause
As I need to add the files to the different drawable folders in the same way as I add the icons/splash, I would like to know if I can add the files using the config.xml
For example I add the icon for hdpi like this:
<icon src="assets/icon/android/drawable-hdpi/icon.png" density="hdpi" />
So far I tried:
<ic_stat_music_play src="assets/icon/android/drawable-hdpi/ic_stat_music_play.png" platform="android" density="hdpi" />
<ic_stat_black_call src="assets/icon/android/drawable-hdpi/ic_stat_music_play.png" platform="android" qualifier="hdpi" />
<gap:ic_stat_black_call src="assets/icon/android/drawable-hdpi/ic_stat_music_play.png" gap:platform="android" gap:density="hdpi" />
But none works so far.
Any idea how this might work?
Related
I am trying to add app icons to my Cordova app (android currently):
<platform name="android">
<icon src="res/icons/mipmap-ldpi/ic_launcher.png" density="ldpi" />
<icon src="res/icons/mipmap-mdpi/ic_launcher.png" density="mdpi" />
<icon src="res/icons/mipmap-hdpi/ic_launcher.png" density="hdpi" />
<icon src="res/icons/mipmap-xdpi/ic_launcher.png" density="xhdpi" />
<icon src="res/icons/mipmap-xxdpi/ic_launcher.png" density="xxhdpi" />
<icon src="res/icons/mipmap-xxxdpi/ic_launcher.png" density="xxhdpi" />
</platform>
I get the error:
Source path does not exist: res/icons/mipmap-hdpi/ic_launcher.png
I have tried multiple different paths in config.xml and tried multiple places where to actually put the images, but I haven't seen clearly in any documentation or stackoverflow questions where to actually put the icon files. They seem to need to be in a folder called res but I can't figure out where to put that folder in Cordova.
Edit:
I have tried to put the files in:
www/
www/res/
platforms/android/
platforms/android/res/
platforms/android/platform_www/
platforms/android/platform_www/res/
at the same level as www
/www
/res
/platforms/android
I have a generated set of icons using Android Image Asset Studio.
However, I do not know how I can set those icons to my app in Cordova.
When following the documentation regarding icons in Cordova, I only managed to set the square icons to my project using the following code:
<platform name="android">
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>
However, say in Android Oreo the icons of apps are round and it does not display my app's icon properly on that phone. The icon is shrank inside the circle and has white background around it.
Question: How can I set the rounded icons that Image Asset Studio generated to my Cordova project?
Below is a tested and working solution for my project that is in production.
Copy all the generated icons to res/android at the root of your project (Same level as resources or platforms folders) and add the below configuration to config.xml file:
<widget xmlns:android="http://schemas.android.com/apk/res/android">
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:icon="#mipmap/ic_launcher" android:roundIcon="#mipmap/ic_launcher_round" />
</edit-config>
<resource-file src="res/android/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
<resource-file src="res/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
<resource-file src="res/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
<resource-file src="res/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
<resource-file src="res/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
<resource-file src="res/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
<resource-file src="res/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
<resource-file src="res/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
<resource-file src="res/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
<resource-file src="res/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
<resource-file src="res/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
</platform>
</widget>
Don't forget to add xmlns:android="http://schemas.android.com/apk/res/android" to your <widget>.
Remove <icon> if you have one as <widget> => <platform => <icon>.
After adding above changes to your config.xml, remove your Android platform with ionic cordova platform remove android or sudo ionic cordova platform remove android (depending upon your environment settings) and then add Android platform again with ionic cordova platform add android or sudo ionic cordova platform add android.
Create build, install and check the results.
I used above configurations in my production code and here are the results:
This SO post is the top hit when you Google for "Cordova Android adaptive icons". The methods suggested here, particularly #VicJordan's answer are a complete solution. However, it should be noted that version 8 of Cordova Android introduced its own way of supporting adaptive icons that do not require you to use Android Asset Studio.
Here is what you need to do
Remove the old style <icon density="?dpi" src = "path/to/icon/resource"/> statements in the config.xml file for your Cordova app
Provide a <icon density = "?dpi" background = "path/to/icon/background"/> directive
Provide a matching <icon density = "?dpi" background="path/to/icon/foreground"/> directive
where ? = l|m|h|x|xx|xxx
You can also use color blackgrounds rather than images. For full details on all of this refer to the Cordova 8 documentation.
You can try this: After selecting the image for the app icon from Image Asset, set the property of Shape (found in Legacy tab under Image Asset) from Square to None.
<splash platform="android" src="package-assets/splash_320_426.png" density="ldpi" width="320" height="426" orientation="portrait"/>
You can change android to ios, change the src="path" to whatever you want, change the density to one of the known settings, set the images width and height and the orientation. Icon orientation is irrelevant but splash and other images may not be. Icons are set like this:
<icon platform="android" src="package-assets/ldpi.png" density="ldpi" width="36" height="36"/>
Of course this goes in the config.xml and you don't have to place it inside of platform sections since you specify the platform in the tag.
The way how to do it with an adaptive vector icon is following. The Asset Studio will create 3 files (in the platform res hierarchy) we have to copy to a folder in the Cordova project root. Let's be it android-res/ for example. The files we are looking for are: ic_launcher.xml, ic_launcher_background.xml and ic_launcher_foreground.xml.
These resource files should be added to config.xml:
<icon src="icon.png" platform="android" />
<platform name="android">
<!-- Adaptive icon -->
<resource-file src="android-res/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<resource-file src="android-res/ic_launcher_background.xml" target="app/src/main/res/values/ic_launcher_background.xml" />
<resource-file src="android-res/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />
<!-- rest of Android platform stuff ... -->
</platform>
This way assume one wants to use the same icon for both normal and round icon. Keep in mind that an adaptive icon does not have to be round! It depends on the launcher. Adaptive icons are supported from API 26, so we should keep there our default/legacy icon.png in the PNG format.
My app keeps using the default cordova icon and splash screen. Upon digging, what should happen is all of my icon/splash get copies to platforms/android/res/. When I look in there, it's just the default cordova ones. However, in my resources/android/ all of my custom ones are there.
Working fine for iOS, not fine for Android at. I am running Cordova CLI 6.4.0.
I have all the custom icons and splash images setup in correct directory structure, and receive no errors during platform add or build android
Below is my config.xml
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
<preference name="FadeSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0" />
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
Same exact exact setup for iOS, and works perfectly there
I've triple checked the paths and everything is correct, and my custom icons are indeed in the indicated locations, but simply not copied over during build
I've tried several times to remove and add android platform, then build, same with cordova-plugin-splashscreen
Both the icon and the splash screen are not working on Android
And here's a screencap showing the folder layout, and the unfortunately incorrect images.
Update made some progress but not quite there. I replaced "qualifier" with "density" in my config.xml. Now what it does it create a correct looking "res" folder, but it puts it in the root of my project instead of platforms/android. It also creates platforms/android/res but all of the images in there are the default Cordova ones. If I move the new folder /res (my custom icons) into /platforms/android (default cordova icons) before build then the app shows my correct stuff. I guess it's a working workaround but an annoying one... and to note; I delete the /res folder but cordova platform add android builds it, just seems to create it in the wrong directory.
This is an issue in cordova-android solved in the version 6.1.0.
The recommended steps are:
cordova platform update android#6.1.0 --save
cordova platform rm android
cordova platform add android
Source: https://github.com/apache/cordova-android/pull/343
I have the same problem, If you find a solution tell me please :)
EDIT
I Solved updgrading my version of android
cordova platform update android#6.1.0
I had this problem some time before and I, and found two ways to pass over.
Upgrade Cordova Platform: This is the recomended, I believe that you upgrade to Cordova 6.4.x but not your Platform, please try: cordova platform update android#latest
OR
Downgrade Cordova CLI: Sometimes, the prev step does not work, so you have to do something that is disrecomended, downgrade cordova to work npm install -g cordova#6.3.1 (Note => CLI 6.3.1 is just the version I believe could work)
I've followed tutorials and solutions to Phonegap icon issues here on SO. From what I'm reading it looks like, if I'm building locally, I need to replace the PG icons in platforms/android/res/drawable (there are 3 diff folders in drawable that contain the icon) with my own. That is what I am doing. Here's where it gets weird. I replace these icons with my own (different icon, same name), then go to Terminal and do phonegap build android, and then if I navigate back to the drawables folders I see that my new icons have been replaced yet again with the default Phonegap robot icons. What am I missing?
Yes, the problem is that the platform folders are rebuilt every time you do a build or run from the PhoneGap CLI so you don't want to replace them in there manually. Instead you should keep them in a folder somewhere in the root of your project (named whatever you'd like), then refer to their paths in the config.xml file for the given platform. The PhoneGap CLI will will copy them down to the platform level for you automatically when you do a build, run etc. For Android it will copy them down to the platforms/android/res/drawable* folders specifically based on their density (ldpi etc). You just need to make sure you specify the right density attributes in the config.xml (or width/height for iOS) to match the correct paths in your root project where those can be found.
For instance, in the config.xml you may have the following for Android icons:
<platform name="android">
<icon density="ldpi" src="resources/android/ldpi-icon.png" />
<icon density="mdpi" src="resources/android/mdpi-icon.png" />
<icon density="hdpi" src="resources/android/hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/xxxhdpi-icon.png" />
</platform>
Where resources is located in the root of your project at the same level as the www folder (ie: myProj/resources).
You can find more details about this in the Cordova docs for more details on configuring your icons.
If for some reason it doesn't work, check to make sure you have a recent version of the PhoneGap CLI or update to the latest.
~Holly
You have to add the icon configuration in you config.xml file inside your www root folder. Try adding something like this:
<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>
The create these folders containing your icons and execute phonegap build android.
The answer was in fact to use this code block in config.xml at the root level (same level as www directory):
<icon src="www/res/icon/android/ldpi.png" platform="android" density="ldpi" />
<icon src="www/res/icon/android/mdpi.png" platform="android" density="mdpi" />
<icon src="www/res/icon/android/hdpi.png" platform="android" density="hdpi" />
<icon src="www/res/icon/android/xhdpi.png" platform="android" density="xhdpi" />
<icon src="www/res/icon/android/xxhdpi.png" platform="android" density="xxhdpi" />
<icon src="www/res/icon/android/xxxhdpi.png" platform="android" density="xxxhdpi"/>
Making sure, obviously, that those paths lead to your icons.
And by "custom splash graphic" I just mean my own image. No matter what I try I it always just shows the little phonegap robot. Note that I'm only concerned with Android here. Here's what I've done:
installed the plugin via command line
ran my original image through this converter to get it as a collection of the appropriate Android sizes
replaced the files in these path with my own (yes, I renamed my own files to these names):
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/ldpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/mdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/hdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/xhdpi.png" />
replaced the files in these paths to my own even though it shouldn't have anything to do with splash image:
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/xhdpi.png" />
At this point I honestly don't even see where the default phonegap robot image file could be hiding in my project or what in config.xml is pointing to it.
Have you added the default splash screen location like so
<preference name="SplashScreen" value="screen"/>
also as per the new updated docs seen here http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
the gap:splash is be deprecated and you are supposed to use just the splash tag
I have found that if you add the plugin using npm in phonegap buil it does not work so the following will not work
<plugin name="cordova-plugin-splashscreen" source="npm"/>
and so you have add the plugin the old way so the followin works
<plugin name="br.com.paveisitemas.splashscreen" spec="2.1.1" source="pgb" />
Please note that in the past splash screens were specified with the gap:splash element and the platform specified with gap:platform. This is still supported but we recommend moving to splash and platform.
In my case what I was seeing was, in fact, not the splash but rather the background image set in index.css. So while the app shows it loads the robot image... which is not the splash.