capacitor-assets: Android: Error occurred while copying
I am building an Ionic app with capacitor, and am trying to generate the resources as specified in the docs. It works great for iOS and I get all the icons correctly generated. When I run it for android, I get this error. Then when I run my app after a rebuild and sync it only copied the splash screen correctly. The app icon everywhere else is still the default capacitor icon.
This is the error I’m getting:
❯ cordova-res android --skip-config --copy
Generated 18 resources for Android
WARN: Error occurred while copying resources/android/icon/mdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/hdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/xhdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/xxhdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/xxxhdpi-foreground.png
Copied 26 resource items to Android
In my resources
directory I don’t have files with these names. Instead they’re named:
resources/android/icon/drawable-hdpi-icon.png
resources/android/icon/drawable-ldpi-icon.png
resources/android/icon/drawable-mdpi-icon.png
resources/android/icon/drawable-xhdpi-icon.png
resources/android/icon/drawable-xxhdpi-icon.png
resources/android/icon/drawable-xxxhdpi-icon.png
Which makes sense why they’re not getting copied. Is there possibly something I’m doing wrong? My icon is following the directions. It’s in the resources folder called icon.png
, and it’s 1024x1024. I get no errors with iOS, so I don’t think it’s something I’m doing wrong, but I’m absolutely not ruling that out.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 39
- Comments: 52 (5 by maintainers)
I agree, this is still an issue. This a true problem because the launch app of the icon remains capacitor’s picture, in my case.
This issue is still there.
@gregmeszaros - follow the instructions here to generate the *-foreground.png files: https://github.com/ionic-team/cordova-res#adaptive-icons
That should at least get you past this, though I believe that we need to get a bit more sorted out in how we handle this, document it, etc. as it is currently not exactly obvious what to do.
Note: you could also generate the adaptive icons via other means if you don’t want to follow the linked instructions.
you can do it from android studio, just follow this steps from the developers page: https://developer.android.com/studio/write/image-asset-studio
I’ve made a short video on how to change the icon https://www.youtube.com/watch?v=QOsDG5RSQ-Q&feature=youtu.be&ab_channel=RockyLon
@johnbwoodruff These are just warnings. It’s because the copy process expecting generated Adaptive Icon foregrounds, but since you’re not using Adaptive Icons, they aren’t there. It’s fine to ignore, and this won’t be an issue by 1.0.0 (see https://github.com/ionic-team/cordova-res/issues/113).
@benjiJanssens I’m not sure what you mean by app circle, but it sounds like a separate issue. Could you create a new issue if the problem persists in the latest version?
thanks it is now working!
Hello! Just in casy anywone is still struggling to find a solution this worked for me:
Step 1
Create a 432x432 black .png file. I used photopea.com. Then save it as “icon-background.png”.
Please note that I created a black image since I need a black background for my icon and I went for the minimum 432x432 since its only black I dont need it to scale well to other resolutions.
Step 2
Create a 1024x1024 .png file and save it as “icon-foreground.png”.
In this case if you want the actual background you provided in the previous step to show your icon should have transparency. In my case I just provided an exact copy of my icon since I dont mind it being placed on top of my black background .
Step 3
Now you can run
cordova-res android
command and it should work.Guys, I believe it is a mistake when generating the images using
cordova-res
, I temporarily solved it as follows:Go to: resources \ android \ icon
Copy the files: “drawable-mdpi-icon.png” “drawable-hdpi-icon.png” “drawable-xhdpi-icon.png” “drawable-xxhdpi-icon.png” “drawable-xxxhdpi-icon.png”
Paste in the same folder: resources \ android \ icon. ( Dont rewrite )
Rename the copied files to: “mdpi-foreground.png” “hdpi-foreground.png” “xhdpi-foreground.png” “xxhdpi-foreground.png” “xxxhdpi-foreground.png”
I ran the command
ionic capacitor sync
to synchronize the images, and thenionic capacitor run
to run on android.As I said, it is a temporary resolution, I believe that the way in which images are generated today by
cordova-res
will be correctedFor clarity, the files needed for this to work should be organized like this:
I kept getting these copying errors even after adding the
android-background.png
andandroind-foreground
images, because I misread the documentation and had added them to theresources
folder, notresources/android
, and it took me a while to figure it out. After getting moving those files into the correct folder, it worked perfectly.Perhaps the README could be updated to show this tree explicitly in the https://github.com/ionic-team/cordova-res#adaptive-icons section instead of displaying it without the adaptive images and only then mentioning them further down? Clearly the current docs are causing a lot of confusion.
Use the following steps to generate. However, you need to create a file as mentioned. Adaptive Icons Android Adaptive Icons are also supported. If you choose to use them, create the following additional file(s):
resources/android/icon-foreground.png must be at least 432×432px resources/android/icon-background.png must be at least 432×432px A color may also be used for the icon background by specifying the --icon-background-source option with a hex color code, e.g. --icon-background-source ‘#FFFFFF’.
Regular Android icons will still be generated as a fallback for Android devices that do not support adaptive icons.
📝 Note: For Cordova apps, Cordova 9+ and cordova-android 8+ is required. Link: https://github.com/ionic-team/cordova-res#adaptive-icons
I think this should be re-opened. I created a blank starter, added the android and ios platforms, and then did cordova-res with a new icon, which generated the warnings. Project is here: https://github.com/kensodemann/delete-me
You can verify here, for example: https://github.com/kensodemann/delete-me/tree/master/android/app/src/main/res/mipmap-xxhdpi
npx cap open android
and then run on a device or emulator and it will use the default cap icon and not the updated tea icon, at least on modern versions of Android. I have not tried on older versions of Android yet.Seems to be related to this fix: https://github.com/ionic-team/cordova-res/commit/65520bc58d579bf74bb8e9e38a9151a797e29a97 which is copying files that have not been generated even though I have tried generating with and without
--type=adaptive-icon
On the plugin page i.e Cordova-res repo , You need to look at this particular section. The adaptive icons are required for Android Platform and you need to put these image at
resources\android
directory.I have been having exactly the same issue on v0.15.1. This was not an issue on v0.14.0, so I downgraded to that version.
EDIT: I just tried it out and v0.14.0 seems to have its issues as well. The icons don’t fit the app circle. I would suggest generating those manually in Android Studio
If a folder ‘android’ does not exist within a resources, it must be created create two image in resources/android resources/android/icon-foreground.png must be at least 432×432px resources/android/icon-background.png must be at least 432×432px
Change your application icon manually go to Android Studio click on APP after File > new > imge Asset
and set Application icon manually after you get any error so read that line if it like <foreground android:drawable="@mipmap/ic_launcher_foreground"/> not found so remove and run that works Perfactally
You need script to copy the generated resources to the designated Android and iOS folder. Refer: https://medium.com/@dalezak/generate-app-icon-and-splash-screen-images-for-ionic-framework-using-capacitor-e1f8c6ef0fd4
@Hembi Yes, That will come with Capacitor 3+: https://github.com/ionic-team/cordova-res/issues/118
Thank you, I found this solution, but fix the command would be a better solution.
@Hembi You need to do it manually. See: https://youtu.be/QOsDG5RSQ-Q
Same issue, with a blank ionic/capacitor app… Ios image splash and icon generates OK, but on android the icon is not replaced and it’s still showing the capacitor one. Splash screen works on both ios and android.
Run this: cordova-res android --skip-config --copy
And also got bunch of warnings and icons didn’t get replaced:
Generated 18 resources for Android WARN: Error occurred while copying resources/android/icon/mdpi-foreground.png WARN: Error occurred while copying resources/android/icon/hdpi-foreground.png WARN: Error occurred while copying resources/android/icon/xhdpi-foreground.png WARN: Error occurred while copying resources/android/icon/xxhdpi-foreground.png WARN: Error occurred while copying resources/android/icon/xxxhdpi-foreground.png Copied 26 resource items to Android
ERROR: Missing valid source image for Android icons (sources: resources/android/icon.png, resources/android/icon.jpg, resources/android/icon.jpeg, resources/icon.png, resources/icon.jpg, resources/icon.jpeg)
encounter an error
Will review for 1.0 milestone
Thanks @RockyLon . Your solution worked perfectly. I hope that ionic can fix this issue.
This is not clear to me. Can you tell me the steps to avoid this issue?