Ionic-cli: Icons and splash screens generated from `ionic resources` ignored on Android

[bilalakil]

Short description of the problem:

Even in a freshly generated project, icon and splash screens generated from ionic resources are being ignored in Android, where the default Cordova images are instead used. This problem does not exist on iOS.

What behaviour are you expecting?

Icons and splash screens generated by ionic resources (which comes up with the Ionic logos if no other icon or splash screen is provided) to be used in the Android app.

Steps to reproduce:

ionic start x
cd x
ionic platform add android
ionic resources
ionic build android
ionic run android

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

The res directory created in the root of the project (following the ionic resources command) contains the expected Ionic logo images (which are created by the ionic resources command as an example) in the many different sizes required by Android.

The platform/android/res directory, however, contains all of the default Cordova images, which appear to be the ones actually being used.

platform/res/android/xml/config.xml perfectly matches the expected config.xml, so it is copying that across as expected, but not the generated images.

Which Ionic Version? 1.7.14

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.4.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Version: 1.3.2
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.10 
OS: Mac OS X El Capitan
Node Version: v6.6.0
Xcode version: Xcode 8.1 Build version 8B62 

[bilalakil]

Note that my current workaround to get it built with the icons is to simply move them into the correct position. I do that like so:

mv platforms/android/res/{values,xml} res
rm -rf platforms/android/res
cp -r res platforms/android
ionic build android

However I suspect if I generate a new set of icons or prepare the Android platform again, these steps would be reversed.

[koenvanzuijlen]

I'm also having this exact problem, seems the res map isn't created in the correct location

[camexapps]

Yes, having the same issue just after updating Ionic and Cordova NPM libraries.

Using Ionic 1.3.2 app

Cordova CLI: 6.4.0
Ionic Framework Version: 1.3.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2

Update:

Hmm, mine appears to be a bigger issue than that, none of my Plugins (using the Ionic Native library) are no longer loading/found (all is fine for iOS), installed/reinstalled all plugins/platforms etc, strange because I have managed to upgrade fine in the past..

Also to note:
Upgraded all Android SDK tools..
Uninstalled and Reinstalled Cordova/Ionic

will investigate further...

* Lastest Update *

So after the various CLI updates. It appears if I use an explicit older android cli platform:
cordova platform add [email protected]
Fixed the issues with plugins, icons ect, and runs fine.

I have noticed the 'res' folder was appearing (cordova 6) (with the correct iocns) in the root folder of my inital app files, NOT the platform generated folder

So, this should be considered a Cordova issue?

[workfluo]

Hi folks,
I have this pb also. I think I know the reason (don't worry it has nothing to do with Illuminatis ;-).
The command "ionic resources" updates config.xml. The code written is partly bad code.
Instead of "density" inside:
It should be "qualifier" as here:
Then magically the build process creates the right folders and copy the right files for every screens.
So basically the CLI has to be patched (PLZ supa Ionic Team).
But for know let's house party: https://www.youtube.com/watch?v=tGJEe-yGLos

[kodeine]

this issue started as soon i upgraded cordova to latest (6.4.0).

[jonatastrafaniuc]

The same problem here with ionic 2 RC2.

[alfonsojohan]

@workfluo thanks man, you solution solved this issue for me. was having this issue as well, my ionic info:

Cordova CLI: 6.3.1
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.39
OS:
Node Version: v6.9.1

[EmreErdogan]

I had the same issue with the following system information:

Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.2
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.4
Xcode version: Xcode 8.1 Build version 8B62

and my cordova-android version is 6.0.0

I tried the solutions above but none of them worked for me.

Finally I managed to make it work by downgrading Cordova CLI from 6.4.0 to 6.3.1 by running the following command:

npm install -g [email protected]

and removing & adding android platform then re-building for android:

ionic platform remove android
ionic platform add android
ionic run android

Note: In this solution, instead of qualifier I keep using density attribute in config.xml. For example, <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/> or <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

[workfluo]

If i try: ionic build android i get this:
Note: /Users/Workfluo/ionic-server/wad/platforms/android/src/org/apache/cordova/splashscreen/SplashScreen.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
What does it means?
I've got this , the latest version.

[jonatastrafaniuc]

I will try this from ghenry22 in https://github.com/driftyco/ionic/issues/9060:
"Upgrade to android platform 6.1.0 and this should be fixed, just updated my project, reran ionic resources and then build and all good."

[workfluo]

I have this:
Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39
And i use this for config settings:
+
BUT in APK the splash screens are named splash.
It depends probably on cordova or ionic cli version.
Whatever it's unstabil! A MESS!

[workfluo]

I would highly recommend to open the .pkg file with an unzip tool in order to check IF in "res" folder you have any image for splash screens AND their name.

[workfluo]

GET IT. GOTTCHA YOU BUGGY BUG!
My solution with a config like:
Cordova CLI: 6.4.0 + Ionic Framework Version: 2.0.0-rc.2 + Ionic CLI Version: 2.1.4;
is basically:
after the Command $ionic resource,
in config.xml for all the

REPLACE "density" by "qualifier"
AND
in
REPLACE value="screen" by value="splash"

[pinindajin]

@camexapps , your solution to do cordova platform add [email protected] worked. NOTE: This is for a cordova backbone app - thought i'd post here since this seems to be more a cordova issue than an ionic issue.

[rhuanbarreto]

@EmreErdogan your solution solved my problem. Downgrading cordova solves all problems!

For the people reading this, just uninstall the current cordova before installing the older version.

npm uninstall -g cordova
npm install -g [email protected]

[workfluo]

Simply because there is no single answer.
For me the pb comes not from a plugin or a cordova version.
It all about playing with playing with the propriety name "density" vs. "qualifier" and the attribut value "screen" vs. "splash".
Than rebuild.

[fonini]

+1

[karser]

I was able to fix this issue by:

npm install -g [email protected] [email protected]

[florentsuc]

I found my problem. I created a new ionic test project and the splashscreen is working.
So I made a diff between the two config.xml files.

I was using <preference name="SplashScreen" value="splash"/> instead of <preference name="SplashScreen" value="screen"/>.

Thus, I can tell this configuration is working:

• ionic lib: 2.0.0-rc2
• ionic cli: 2.1.8
• cordova: 6.4.0
• cordova-android: 6.1.0
• cordova-plugin-splashscreen: 4.0.0

All you have to do is:

• ionic platform remove android
• install the correct configuration (cordova, ionic cli)
• ionic platform add [email protected]
• ionic resources
• check you don't have a bad config.xml (see my error)

A valid Android splashcreen config line should look like: <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>

Hope this helps! :-)

[vintage]

@florentsuc What about the icons? Do they work properly for you? I can't manage to fix it and always get the default cordova icon.

[florentsuc]

@vintage Yes they do. I spent so much time to find my mistake. I can only advice you to create a new ionic blank project to find your problem.

[vintage]

@florentsuc I've been reading your comment multiple times and just realized I'm using [email protected]. Upgrade to [email protected] solved the issue. The icon & splash works great now. Thanks! :)

[dilhan2013]

Thanks @vintage updating to android @ 6.1 solved the issue

[felippepuhle]

Thanks @florentsuc, your tips helped me a lot.

Add <engine name="android" spec="~6.1.0" /> to the config.xml file to make ionic platform add android always resolve to 6.1.0.

[balate]

@florentsuc Thanks!

[xgzl87]

npm ERR! fetch failed http://registry.npmjs.org/cordova-android/-/cordova-android-6.1.0.tgz
npm WARN retry will retry, error on last attempt: Error: connect ECONNREFUSED
npm ERR! fetch failed http://registry.npmjs.org/cordova-android/-/cordova-android-6.1.0.tgz
npm WARN retry will retry, error on last attempt: Error: connect ECONNREFUSED
npm ERR! fetch failed http://registry.npmjs.org/cordova-android/-/cordova-android-6.1.0.tgz
Error: Failed to fetch platform android@~6.1.0
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: connect ECONNREFUSED

[ataraxus]

Same issue here

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

[blakholesun]

Yup! Upgrading to [email protected] fixed it for me. Thanks @vintage !

[mattbryan9]

Upgrade to 6.1 worked. Many thanks to @florentsuc and @felippepuhle!

[clodo]

Gracias @florentsuc y @felippepuhle, the workarround worked for me!

[almothafar]

@florentsuc and @felippepuhle
Thank you, the workaround worked, but bad news I have a new issue, the splash screen shown as a blank, not image one, if I use <preference name="SplashScreen" value="screen" /> it works.

[mg1075]

@florentsuc - Thanks for the instructions. I can now see my custom icon on my Android device.

Hope this issue gets a good resolution: an app distributed with a default cordova icon gives a bad impression, even if distributed only for testing purposes.

[ceberS]

Thanks @florentsuc !!

[herkulano]

@florentsuc thanks!

It worked for the icon but I still have the splash screen blank issue.

My config.xml

<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<preference name="SplashScreen" value="screen"/>

My info

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Platforms

Installed platforms:
  android 6.1.0

[almothafar]

@herkulano
Try this: when you use ionic resources to generate icon and splash change it to:

<preference name="SplashScreen" value="splash"/>

then change it back to:

<preference name="SplashScreen" value="screen"/>

This how I solved the blank splash.

[herkulano]

@almothafar thanks. you forgot to post the code.

[almothafar]

@herkulano the code was there but not wrapped with ```.

[herkulano]

@almothafar thanks.

It was working already with @florentsuc post. My splash problem was the previous value of: <preference name="SplashScreenDelay" value="10000"/> was set at 0. Changed it and it's now working correctly.

[paragw09ckp]

Thanks to @florentsuc to get past that frustrating issue!

Now, in my case, my app is saved on device with the correct icon. And also getting the splash screen shown with correct image. However, after the splash display, the screen goes all white. Nothing happens! :(

Any suggestions or pointers?

Your help is highly appreciated!

[patrickbussmann]

Thank you both!
@felippepuhle @florentsuc

But why isn't the 6.1 engine set as default if it contains bugs like this?

[ea2809]

Only changing the android version, everything works fine.

[PterPmnta]

@florentsuc What Node Version you have and SO?

[PterPmnta]

@herkulano Sorry, i have a problem with tha Node 6.9.X, say sys is deprecated. Use util instead. I wanna to know this hide using Node 7.0 or above.

Your system information:

 ordova CLI: 6.3.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v5.12.0
Xcode version: Not installed

[louisdoe]

I too have the issue.
I just did

cordova platform update [email protected]

because I was on [email protected] and it seems it is the cause of the problem.

But then I go through a lot of errors on compilation, plugins errors like:

AdMobPlugin.java:37: error: package com.rjfun.cordova.ad does not exist

import com.rjfun.cordova.ad.GenericAdPlugin;

I tried ionic plugin rm and ionic plugin addall the plugins, but I still see these errors.

Can you help ?

@EmreErdogan solution doesn't seem to work.

[ScreamZ]

Any support for cordova 6.4 is coming ?

Or should I use @workfluo strategy ?

[vksgautam1]

for cordova 6.4 this is working one
https://github.com/apache/cordova-android/commit/854946e313c6b00e0087e9aa432fad664083c96a

[mhartington]

If you're splashscreens and icons are not getting used/copied, run

ionic platform rm android
ionic platform add android@latest --save

Android 6.0 (which cordova currently has pinned as the default version) had a bug with resources not being used.

[jamesvsshark]

@mhartington who's better than you?

[deepchandyadav]

@mhartington Upgrading to latest android worked for me.

[frey1esm]

I got Error: cordovaProject.projectConfig.getFileResources after running

ionic platform rm android
ionic platform add android@latest --save

[entymon]

Thanks a lot @florentsuc. I updated android platform to 6.1.3 but seems like only 6.1.0 works well.