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)

Most upvoted comments

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?

resources/ ├── android/ │   ├── icon-background.png │   └── icon-foreground.png ├── icon.png └── splash.png

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 then ionic 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 corrected

For clarity, the files needed for this to work should be organized like this:

resources/
├── android/
│   ├── icon-background.png
│   └── icon-foreground.png
├── icon.png
└── splash.png

I kept getting these copying errors even after adding the android-background.png and androind-foreground images, because I misread the documentation and had added them to the resources folder, not resources/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.

This issue is still there.

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.

image

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 You need to do it manually. See: https://youtu.be/QOsDG5RSQ-Q

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

resources/ ├── android/ │   ├── icon-background.png │   └── icon-foreground.png ├── icon.png └── splash.png

thanks it is now working!

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?