CODEWITHSUNDEEP
cordovaionic-frameworkionic2cordova-pluginsionic3
Richard
Richard

Reputation: 8935

Ionic Icon and Splash screen not showing

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="[email protected]" 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/[email protected]" width="114" height="114"/>
        <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
        <icon src="resources/ios/icon/[email protected]" width="80" height="80"/>
        <icon src="resources/ios/icon/[email protected]" width="120" height="120"/>
        <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
        <icon src="resources/ios/icon/[email protected]" width="100" height="100"/>
        <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
        <icon src="resources/ios/icon/[email protected]" width="120" height="120"/>
        <icon src="resources/ios/icon/[email protected]" width="180" height="180"/>
        <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
        <icon src="resources/ios/icon/[email protected]" width="144" height="144"/>
        <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
        <icon src="resources/ios/icon/[email protected]" width="152" height="152"/>
        <icon src="resources/ios/icon/[email protected]" width="167" height="167"/>
        <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
        <icon src="resources/ios/icon/[email protected]" width="58" height="58"/>
        <icon src="resources/ios/icon/[email protected]" 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

Upvotes: 1

Views: 3307

Answers (3)

Mohamed Imran
Mohamed Imran

Reputation: 179

This will solve your issue go inside to resource folder of your project Then go to Android or ios Folder (Its depend on your platforms)And Delete Icon and Splash Folder. Then come back to resource folder and paste the splash and icon images in resources folder. And rename them for Splash->splash.png , and for icon->icon.png.

Then

ionic cordova platform rm android

Then

ionic cordova platform add android

Then

ionic cordova resources

Finally , Ready To build and hence it will be success.

ionic cordova build android

Upvotes: 0

Richard
Richard

Reputation: 8935

It looks like there was a bug in an old version of Cordova. I did some reading, and the following resolved the issue:

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

You may also need to:

npm install -g cordova@latest

However, this only seems to have partially fixed the issue. The icon is now my custom icon, but the splash screen is just white.

Upvotes: 2

Foo Bar
Foo Bar

Reputation: 165

  1. Go to apps res directory:

C:\Users\You\YourApk\platforms\android\res

  1. Open all the folders one by one and replace the icon/image of cordova app icon by your Apps icon with the same size.
- C:\Users\You\YourApk\platforms\android\res\drawable
- C:\Users\You\YourApk\platforms\android\res\drawable-hdpi
- C:\Users\You\YourApk\platforms\android\res\drawable-land-hdpi
- C:\Users\You\YourApk\platforms\android\res\drawable-ldpi
- C:\Users\You\YourApk\platforms\android\res\drawable-mdpi
- C:\Users\You\YourApk\platforms\android\res\drawable-xhdpi
  1. Then build your Application

If this is not enought, some blog with extras

If standard method doesn´t work I will post the guide of that blog into this answer.

Upvotes: 0

Related Questions