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.
Related
While uploading the package on Build.Phonegap.com getting error for android
Error - The following splash screen or icon file does not exist:
/res/icons/android/mipmap-hdpi/ic_launcher.png
PhoneGap (iOS / Android / Windows)
cli-9.0.0 (5.0.1 / 8.0.0 / 7.0.0)
Thanks
Abhishek Mishra
I also tried to many alternatives but no success till now.
Changes the URL path as suggested in forum : but it not worked.
Deleted Apps from Build.PhoneGap.com portal and tried again.
Provided minimum and maximum SDK versions in Config URL
Changes CLI version in config.xml and again uploaded getting same problem
Error - The following splash screen or icon file does not exist:
/res/icons/android/mipmap-hdpi/ic_launcher.png
Please rename ic_launcher file with launcher ( remove ic_ ) could be problem with build.phonegap.com server, also update the config.xml with the same name..
<icon src="res/icons/android/mipmap-hdpi/launcher.png" density="hdpi" />
<icon src="res/icons/android/mipmap-ldpi/launcher.png" density="ldpi" />
<icon src="res/icons/android/mipmap-mdpi/launcher.png" density="mdpi" />
<icon src="res/icons/android/mipmap-xhdpi/launcher.png" density="xhdpi" />
<icon src="res/icons/android/mipmap-xxhdpi/launcher.png" density="xxhdpi" />
<icon src="res/icons/android/mipmap-xxxhdpi/launcher.png" density="xxxhdpi" />
create package and upload on build.phonegap.com
it will work for you.
its worked with renaming ic_launcher to launcher and same changed in config.xml
OK. After many hours I have figured this out. The problem is NOT to do with things being named ic_launcher etc. It is to do with the source path as declared in the config.xml file.
The build is in two parts, as a look at the log file shows (when you have an error). In the first part of the build, the various resources are copied to various places in order to be available to the application itself. This part is common to both ios and android. In the second, and last, part of the build for ios, Build does clever things to provide the icons which apple wants. And here is the problem. Currently, this part of the build CANNOT find files with this path: "www/res/icon...". However, it can find the files if you remove the www: "res/icon...".
So the fix: in the config.xml file section dealing with IoS icons, just give the path as "res/icon/ios" or similar. Omit the root "www/" part of the path.
Slight update! Just discovered in doing an Android build that the same also applies to the Android icon paths, as given in Android platform icon path definitions in config.xml file. They too have to be changed to "res/icon/androld.." from "www/res/icon/android..".
Sounds like this is something which should be fixed in Build. In this context, "www/res" and "res" are, or should be, identical. Please fix.
Works with ic_ removed in your files and in xml, not in target. This is my code that builds successfully
<preference name="android-minSdkVersion" value="22" />
<preference name="android-targetSdkVersion" value="22" />
<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" />
<uses-sdk android:minSdkVersion="22" android:targetSdkVersion="22" />
</edit-config>
<resource-file src="www/res/icons/android/drawable/launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
<resource-file src="www/res/icons/android/drawable/launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />
<resource-file src="www/res/icons/android/mipmap-anydpi-v26/launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<resource-file src="www/res/icons/android/mipmap-anydpi-v26/launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
<resource-file src="www/res/icons/android/mipmap-hdpi/launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
<resource-file src="www/res/icons/android/mipmap-hdpi/launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
<resource-file src="www/res/icons/android/mipmap-mdpi/launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
<resource-file src="www/res/icons/android/mipmap-mdpi/launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
<resource-file src="www/res/icons/android/mipmap-xhdpi/launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
<resource-file src="www/res/icons/android/mipmap-xhdpi/launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
<resource-file src="www/res/icons/android/mipmap-xxhdpi/launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
<resource-file src="www/res/icons/android/mipmap-xxhdpi/launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
<resource-file src="www/res/icons/android/mipmap-xxxhdpi/launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
<resource-file src="www/res/icons/android/mipmap-xxxhdpi/launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
I have been building apps with PhoneGap everyday with no such error until few minutes ago when I try to upload an updated source for an app I previously built successfully just a few weeks ago.
I tried all the recommendations I could find online with no success then I decoded to dig into the codava log. Only then did I notice that it was trying to copy the file from outside the "www" directory, even when the config file tells it exactly where to find the files.
The Fix.
I simply moved the resource folder to the root directory of my project and it solved the problem
Trying to get adaptive icons working in a Cordova app (described here in the docs), but when I try to run cordova run android, the app never runs and the CLI just outputs this
Android Studio project detected
The "path" argument must be of type string
This is how I have the icon defined in config.xml
<platform name="android">
<resource-file src="res/colors.xml" target="/app/src/main/res/values/colors.xml" />
<icon background="#color/background" density="hdpi" foreground="res/icon.png" />
<allow-intent href="market:*" />
</platform>
And here is the contents of colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background">#191919</color>
</resources>
I know the issue has to do with the icon config because it only happens when I use foreground instead of src. This config works fine (but the icon isn't adaptive and has the default background color).
<platform name="android">
<resource-file src="res/colors.xml" target="/app/src/main/res/values/colors.xml" />
<icon background="#color/background" density="hdpi" src="res/icon.png" />
<allow-intent href="market:*" />
</platform>
Here are my relevant versions.
node 9.11.2
npm 5.6.0
cordova 8.1.2 (cordova-lib#8.1.1)
cordova-android 7.1.1
Adaptive icons are only supported since cordova-android 8.0.0. See here.
I updated phonegap, and now the Android icon shows a white circle around it like 1/2 of the icons on my phone. I don't want the white circle.
Attached shows the Arlo icon which is normal, then two other icons with white circles around them. My config.xml has the icons listed to a png that does not look like this.
How can I get my icon without the circle again, like the Arlo icon?
<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>
I did fix it but I honestly can't recall exactly everything I did. Here's what I remember for sure.
1) I updated to cordova 8.0.0 (not sure if this is required)
2) Removed all android icon configs from config.xml, except I left:
<icon src="icon.png" />
3) Generate Adaptive Icons with Android Studio (Pretty easy): https://developer.android.com/studio/write/image-asset-studio#create-adaptive
The following steps must be done every time you use phonegap prepare android (or cordova prepare android), and of course if you rm/add the platform.
4) Copy the generated drawable/values folders/files from Android Studio to approot/platforms/android/app/src/main/res
5) Double check the approot/platforms/android/app/src/AndroidManifest.xml has this piece:
<application android:hardwareAccelerated="true" android:icon="#mipmap/icon" android:label="#string/app_name" android:supportsRtl="true">
There's probably a better way, but my app is working with adaptive icons and I'm happy. Hopefully this helps. Sorry I cannot remember all the details!
Zomg, way late but I spent 2 hours figuring this out and want to share!
I used Android Studio to create the icon, starting from a new blank project. I was able to figure out how to get to the icon generator from the description here, though I feel like I got lucky finding it, so if you need it, you can pay the $40 to view the video to see where that interface is. Then, I copied the files generated from the /app/src/main/res folder in that project, to my /res/icons/android directory.
Then, I added this to config.xml (I have other things inside this block too, but this is the relevant stuff:
<platform name="android">
<!-- Depend on v21 of appcompat-v7 support library -->
<framework src="com.android.support:appcompat-v7:21+" />
<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/icons/android/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
<resource-file src="res/icons/android/drawable-v24/ic_launcher_foreground.xml" target="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" />
<resource-file src="res/icons/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
<resource-file src="res/icons/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<resource-file src="res/icons/android/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
<resource-file src="res/icons/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
<resource-file src="res/icons/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
<resource-file src="res/icons/android/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
<resource-file src="res/icons/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
<resource-file src="res/icons/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
<resource-file src="res/icons/android/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
<resource-file src="res/icons/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
<resource-file src="res/icons/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
<resource-file src="res/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
<resource-file src="res/icons/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
<resource-file src="res/icons/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
<resource-file src="res/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />
<resource-file src="res/icons/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
<resource-file src="res/icons/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
</platform>
I'm not fully sure if the appcompat line is necessary so you can try without it if you like. I did also need to remove the android platform & re-add each time I made a change, to get it to notice the change. At one point I also deleted the folder .idea/caches to clear cache. All that, and now it works!! I think it's a better solution than the accepted answer here, because you aren't mucking with the platforms folder & thus won't need to hand-copy things every time, once and done. Hope this saves someone some time!
It looks like application taking first icon of ldpi from config.xml file
try adding
<icon src="www/res/android/ldpi.png" />
without density, outside of platform tag in config file and size of 1024x1024 so it will use full space of an app icon.
I get this white border in Android 10, but on my older Android phone the icon looks perfect.
I guess this is just Android/Samsungs way of prefering native apps over Web-View?
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.
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?