Icon and Splash screen - how to?


#1

Hi All,

I am using Ionic3. I am trying to create a custom icon and splash screen for my app. I created an icon.png (432x193) and splash.png (6135x2733) in the resources folder.

I then run:

ionic cordova resources
✔ Collecting resource configuration and source images - done!
✔ Uploading source images to prepare for transformations - done!
✔ Generating platform resources: 38 / 38 complete - done!
✔ Modifying config.xml to add new image resources - done!

If I check resources/android/icon:

enter image description here

and resources/android/splash:

enter image description here

I can see the new images have been generated (I have <preference name="orientation" value="portrait"/>, so I think that’s why only portrait images are generated, landscape has the default ionic ones).

I also check:

config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.thewhozoo912107" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>theWhoZoo</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="admin@thewhozoo.com" href="http://thewhozoo.com/">theWhoZoo Team</author>
    <content src="index.html"/>
    <access origin="*"/>
    <allow-intent href="http://*/*"/>
    <allow-intent href="https://*/*"/>
    <allow-intent href="tel:*"/>
    <allow-intent href="sms:*"/>
    <allow-intent href="mailto:*"/>
    <allow-intent href="geo:*"/>
    <allow-intent href="*"/>
    <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>
    <platform name="ios">
        <allow-intent href="itms:*"/>
        <allow-intent href="itms-apps:*"/>
        <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
        <icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
        <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
        <icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
        <icon src="resources/ios/icon/icon-40@3x.png" width="120" height="120"/>
        <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
        <icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
        <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
        <icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
        <icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
        <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
        <icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
        <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
        <icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
        <icon src="resources/ios/icon/icon-83.5@2x.png" width="167" height="167"/>
        <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
        <icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
        <icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/>
        <splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
        <splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
        <splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/>
        <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
        <splash src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" height="2732"/>
        <splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
        <splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
        <splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
    </platform>
    <allow-navigation href="*"/>
    <preference name="webviewbounce" value="false"/>
    <preference name="UIWebViewBounce" value="false"/>
    <preference name="DisallowOverscroll" value="true"/>
    <preference name="android-minSdkVersion" value="16"/>
    <preference name="BackupWebStorage" value="none"/>
    <preference name="SplashMaintainAspectRatio" value="true"/>
    <preference name="FadeSplashScreenDuration" value="300"/>
    <preference name="loadUrlTimeoutValue" value="700000"/>
    <preference name="orientation" value="portrait"/>
    <preference name="SplashScreen" value="screen"/>
    <preference name="SplashScreenDelay" value="3000"/>
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar"/>
    </feature>
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
    <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
    <plugin name="cordova-plugin-console" spec="1.0.5"/>
    <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
    <plugin name="cordova-plugin-device" spec="1.1.4"/>
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
    <plugin name="cordova-plugin-facebook4" spec="~1.7.4">
        <variable name="APP_ID" value="XXXXXXXXXX"/>
        <variable name="APP_NAME" value="theWhoZoo"/>
    </plugin>
    <plugin name="cordova-plugin-googleplus" spec="~5.1.1">
        <variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.XXXXXXXXXXXXXXXXXXX"/>
    </plugin>
    <plugin name="cordova-plugin-crop" spec="~0.3.1"/>
    <plugin name="cordova-plugin-app-version" spec="~0.1.9"/>
</widget>

I then run:

ionic cordova build android

to build an apk file. When I install this apk on my Android device, the icon and splash screen is still the same default Cordova image:

enter image description here

If anyone can help, I would appreciate it.

More info:

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.0.0 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed

#2

Are you sure that you are on android ? Just kidding… :wink:

Hum… what about the icon/splash.png outside the folder android/ios/… ?

Path :
YourProject/resources/icon.png
YourProject/resources/splash.png

Let me know. I had the same problem but in my case, it was the config.xml, there is mine (just with the ionic resources command line (CLI)

There is only all the lines that concern the SplashScreen.

config.xml :

<preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="loadUrlTimeoutValue" value="700000" />


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


    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
    </platform>

<plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />

#3

Reading here, it looks like there’s a bug in the 6.0.0 version of the Android Cordova platform. So it looks like an upgrade fixes it.

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

However, when I upgraded to android 6.2.3 (latest), I now get:

ionic cordova build android

> cordova build android
✖ Running command - failed!

[ERROR] Cordova encountered an error.
        You may get more insight by running the Cordova command above directly.
        
[ERROR] An error occurred while running cordova build android (exit code 1):
        
        Error: cordovaProject.projectConfig.getFileResources is not a function
        

Richards-MacBook-Pro:theWhoZoo richardmarais$ (node:60728) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: channel closed
(node:60728) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am going to try figure this out first, then hopefully the above issue will be resolved.


#4

I upgraded Codova, and now I can build an apk:

npm install -g cordova@latest . (Cordova CLI : 7.0.1 )

cordova build android

Now the icon is there!!! The Splash screen is just white though.


#5

Verify your icon.png and splash.png in yourproject/resources

then do in the CLI (on macbook) :

sudo ionic resources

To be sure that everything has been applied


#6

Looks like the upgrade to Cordova 7.0.1 has caused a few issues I need to resolve first:

Using ionc-native Geolocation

Application does not have sufficient geolocation permissions


#7

Oh well I just implement geolocation yesterday, working fine :neutral_face:

Try remove and re-add the plugins
If this is this one : https://ionicframework.com/docs/native/geolocation/ and not the background-one try this :

$ npm remove --save @ionic-native/geolocation
$ ionic cordova plugin remove cordova-plugin-geolocation

then re-install

$ ionic cordova plugin add cordova-plugin-geolocation
$ npm install --save @ionic-native/geolocation

Also check the version in the package.json file

Mine is :

"@ionic-native/geolocation": "^3.10.3"

"cordova-plugin-geolocation": "^2.4.3"

My ionic info :

ionic info

global packages:

@ionic/cli-utils : 1.1.2
Cordova CLI      : 7.0.1
Ionic CLI        : 3.1.2

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.1.2
@ionic/cli-plugin-ionic-angular : 1.1.2
Ionic Framework                 : ionic-angular 3.2.1

System:

Node       : v6.10.3
OS         : macOS Sierra
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed

#8

I am using Ionic3:

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.0.0 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed

I then upgraded my Cordova to the latest version (from 6.4.0 to 7.0.1):

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.2.3 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed

As you can see, I also upgraded my Android platform from android 6.0.0 to android 6.2.3.

Since then, I cannot get my Cordova plugins to work on Android. iOS and browser all still works fine.

If I run it on an Android device or emulator, it loads the app, but does not show the Splash Screen, or get the Geolocation, allow Firebase login, etc. It looks like all Cordova plugins for Android are not working.

When I run in Android Studio, I get the following over and over in the logs:

W/art: Attempt to remove non-JNI local reference, dumping thread

It appears as if the install of the latest Android Platform (6.2.3) has broken the app.

Any suggestions welcome.


#9

Now I try uninstall the Android platform and reinstall version 6.0.0. But I get errors:

cordova platform remove android
Removing platform android from config.xml file...
Richards-MacBook-Pro:theWhoZoo richardmarais$ ionic cordova platform add android@6.0.0
> cordova platform add android@6.0.0 --save
✖ Running command - failed!

[ERROR] Cordova encountered an error.
        You may get more insight by running the Cordova command above directly.
        
[ERROR] An error occurred while running cordova platform add android@6.0.0 --save (exit code 1):
        
        Using cordova-fetch for cordova-android@6.0.0
        Adding android project...
        Creating Cordova project for the Android platform:
        	Path: platforms/android
        	Package: com.ionicframework.thewhozoo912107
        	Name: theWhoZoo
        	Activity: MainActivity
        	Android target: android-24
        Subproject Path: CordovaLib
        Android project created with cordova-android@6.0.0
        Installing "cordova-plugin-app-version" for android
        ANDROID_HOME=/Users/richardmarais/Library/Android/sdk/
        JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home
        Failed to install 'cordova-plugin-app-version': Error
            at Object.module.exports.check_gradle (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/lib/check_reqs.js:90:25)
            at GradleBuilder.prepEnv (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/lib/builders/GradleBuilder.js:161:23)
            at Api.module.exports.runClean (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/lib/build.js:131:20)
            at /Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/Api.js:391:50
            at _fulfilled (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/node_modules/q/q.js:834:54)
            at self.promiseDispatch.done (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/node_modules/q/q.js:863:30)
            at Promise.promise.promiseDispatch (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/node_modules/q/q.js:796:13)
            at /Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/node_modules/q/q.js:604:44
            at runSingle (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/node_modules/q/q.js:137:13)
            at flush (/Users/richardmarais/Development/ionic/theWhoZoo/platforms/android/cordova/node_modules/q/q.js:125:13)
        Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
        Looked here: /Users/richardmarais/Library/Android/sdk/tools/templates/gradle/wrapper

But:

cordova platform ls
Installed platforms:
  android 6.0.0
  ios 4.3.1

then

cordova build android
✖ Running command - failed!

[ERROR] Cordova encountered an error.
        You may get more insight by running the Cordova command above directly.
        
[ERROR] An error occurred while running cordova build android (exit code 1):
        
        ANDROID_HOME=/Users/richardmarais/Library/Android/sdk/
        JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home
        Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
        Looked here: /Users/richardmarais/Library/Android/sdk/tools/templates/gradle/wrapper

I check my Android SDK in Android Studio, and I have all the latest installed (Android 6.0, 7.0 & 7.1).

So I upgrade back to the latest Android platform:

cordova platform remove android
ionic cordova platform add android@latest

Now it builds again with no errors, but I sit with the same problem of the Cordova Plugins not working, and the following in the logs:

W/art: Attempt to remove non-JNI local reference, dumping thread


#10

I have read here , that changing from Snapshot to Host GPU may help.

Where is this? Reading here indicates that it’s a setting on an emulator. Bit then how do you get this to work on a devise? Or is there a way to build the apk with this setting?

I think I don’t really understand this?


#11

Solved:

deleted node_modules

npm install

ionic cordova platform remove android
ionic cordova platform add android@latest

ionic cordova build android