Can't get custom icons & splash screen to work in Android

Hi there,

this is my first foray into mobile development - sorry in advance for being such a noob :slight_smile:

So I’ve spent the past day trying to all kinds of things to get custom icons & splash screen working on Android with ionic2. Here is my runtime info:

Cordova CLI: 6.4.0
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: Mac OS X Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

I’ve placed my custom images as PSDs in the /resources/ folder (I’ve also tried PNGs). Issuing a ionic resources build seems to build the images correctly under /resources/android and /resources/ios.

If I then run ionic run ios the iOS app shows up with my custom icon & splash screen and the images in /platforms/ios/{appname}/Images.xcassets/AppIcon.appiconset/ are also updated in the build process correctly.

When I do the same for android with ionic run android though, it continues to show the standard ionic icon and splash screen, not my custom one. And the images in /platforms/android/res/ don’t get updated either in the build process.

Has anyone managed to actually get this working with the latest ionic2 release? Am I missing something? I guess I could manually replace the images under /platforms/android/res, but I’d much rather have them automatically generated, like it works with the iOS ones…

Any ideas? Thanks for your help!

1 Like

I think it works with PNG not PSD, but I may be wrong. Anyway, if your splash and icons were correctly generated under resources/android that shouldn’t be the problem and I may be wrong.

When you have ran the command “ionic resources”, not only the splash and icon should have been generated, your config.xml should had been modified too (config.xml gonna tell cordova which splash and icons should be use when you build your app)

Could you double check that the urls to the splash and icon specified in config.xml for android are actually the same as the real data you’ve got under your resources/android?

If it’s ok, have you build “ionic build android” your app again (I know silly question ;))

Maybe you could also try following commands, sometimes work

ionic resources android --force

But well was the same for me…wasn’t able to set up icon and splash in 5 minutes, took a little bit of time too :wink:

Thanks for your answer @reedrichards. I just checked the config.xml (I’m using the ionic-conference-app to test this btw, but I also tried with a new project from scratch) and it seems the icons in there are linked correctly:

  <platform name="android">
    <allow-intent href="market:*"/>
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>

I’ve also rebuilt the resources again, which I’ve actually done about 30 times or so already yesterday.

But to me it looks as if the icons under /resources/android/ aren’t used at all, but instead the ones under /platforms/android/res get used and they are not updated in the build process.

Meanwhile, building the app on ios seems to update the icons in /platforms/ios/..., just not on Android.

I’ve also tried replacing the images manually in /platforms/android/res - that works, so if all else fails, I could go that route. Still, I’d much rather have alll the different image sizes generated via ionic resources from my custom PSD/PNG files in /resources/, like it does with iOS.

Looks like a bug to me so far.

EDIT: I’ve also tried deleting / re-adding the android platform, but that didn’t help either

Well seems good you are right. My config.xml look alike the same.

Just to be clear you’ve got a problem on Android with

  • The icon
  • The splashscreen
  • Both

not being correct?

About the icon maybe you could test something more. In my project I’ve got a different Icon on Android than iOS. Therefore I don’t have an Icon in resources but one under resources/ios/icon.png and one under resources/android/icon.png

Maybe you could try to do the same and run “ionic resources icon android” (if I remember correctly)

If still doesn’t work well sorry I guess I’m out of ideas. Maybe someone else or try to create a bug issue in the Ionic github.

P.S.: About running the ionic resources, I’m not sure but I’ve the feeling that that command somehow save a cache somewhere. So running it many times in my case most of the times doesn’t have any effects till I really made a change in source splash and icons…just for the record

Yes, both the icon and splash screen don’t get updated on Android.

I tried putting the PNGs into /resources/android but that didn’t change anything either.

I don’t think the fault is with ionic-cli actually, but with the build process. For example when I delete the files under platforms/ios/{appname}/Images.xcassets/AppIcon.appiconset/ and run ionic build ios they get regenerated somewhere around the last build step when the console outputs this:

[12:56:19]  build prod finished in 27.30 s

Not with Android though.

I’ll look into pin-pointing where exactly the problem happens later today so I can issue a bug report in the correct github (ionic has so many sub-packages!) or maybe even get it fixed myself.

Thanks for your help again.

Definitly weird. Well it seems you are right, the problem seems to be somewhere in the cordova build. Anyway maybe you could still try to update your ionic app-script to the last beta, they fixed stuffs there. Good luck.

And, maybe dumb too, but did you uninstall your app on your test phone before installing it again? As I said it’s a dumb question but who knows. Maybe the build doesn’t take the images from /platforms/android/res/ but from somewhere else and it’s just the deployment which fails?

I investigated a little further and found this to be a bug in the latest cordova release, specifically the cordova-android package. Someone has already filed a bug report here:

https://issues.apache.org/jira/browse/CB-12077

and this is the commit that is supposed to fix it:

https://github.com/apache/cordova-android/commit/854946e313c6b00e0087e9aa432fad664083c96a

I haven’t tried the fix yet, mainly because I don’t really know how to get cordova-android updated to the latest commit on the master branch :blush: - just wanted to get it out here quickly in case someone else stumbles upon the problem or reads my thread.

2 Likes

Thanks for the link ! To switch on master branch or specific tag version you can do the following :
you can use cordova-android from master with cordova platform add android@https://github.com/apache/cordova-android or the previous version with cordova platform add android@5.2.2

2 Likes

This fix worked for me:

ionic platform rm android
ionic platform add android@latest
ionic resources
ionic build android

8 Likes

to get it work ,
just delete the old android platform : ionic platform rm android
then add the latest platform : ionic platform add android @latest
then ionic resources
and for the slow start app , start new updated project and build with --prod : ionic build android --prod
Good,Luck

1 Like

@abmcr This is working :smiley: Thanks… You saved me.

Thanks, “ionic platform add android@latest” work!

Hi try ionic prepare ios
ionic resources.

you welcome

@abmcr when i add latest platform of android to my project am not able to generate apk file errror in restoring image picker file …any other solution please