Splash screen white

diaslucas · May 2, 2018, 6:08am

Hi,

I am using Ionic3. I created a custom icon and splash screen for my app. I created a splash.png (2732x2732) in the resources folder.

I then run ionic cordova platform add android and automatically returned me:
ionic cordova resources android --force
Collecting resource configuration and source images - done!
Filtering out image resources that do not need regeneration - done!
Uploading source images to prepare for transformations - done!
Generating platform resources: 18 / 18 complete - done!
Modifying config.xml to add new image resources - done!

I can see the new images have been generated for my icon and splash:
resources/android/splash and resources/android/icon

my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>gamesearch</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework 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:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="30000" />
    <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" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <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" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="1.1.19" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
    <engine name="android" spec="7.1.0" />
</widget>

I then run:

ionic cordova run android
to build the app on emulater, the icon appers normally, but the splash does not load, there is a white screen:

If anyone can help, I would appreciate it.

diaslucas · May 2, 2018, 5:37pm

Up, anyone can help-me?

JAR19 · May 2, 2018, 5:41pm

Instead of ionic cordova run android try running the normal run command

ionic cordova build android

diaslucas · May 2, 2018, 6:01pm

I tried this command too, the splash keeps appearing white

JAR19 · May 2, 2018, 6:04pm

Was there any errors in the command window?
Have a look at the console window and see what is reported there.

diaslucas · May 2, 2018, 6:16pm

No error was displayed:

ionic cordova build android
Running app-scripts build: --platform android --target cordova
[14:46:29]  build dev started ... 
[14:46:29]  clean started ... 
[14:46:29]  clean finished in 8 ms 
[14:46:29]  copy started ... 
[14:46:29]  deeplinks started ... 
[14:46:29]  deeplinks finished in 19 ms 
[14:46:29]  transpile started ... 
[14:46:33]  transpile finished in 3.33 s 
[14:46:33]  preprocess started ... 
[14:46:33]  preprocess finished in less than 1 ms 
[14:46:33]  webpack started ... 
[14:46:33]  copy finished in 3.47 s 
[14:46:39]  webpack finished in 6.09 s 
[14:46:39]  sass started ... 
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[14:46:40]  sass finished in 1.11 s 
[14:46:40]  postprocess started ... 
[14:46:40]  postprocess finished in 5 ms 
[14:46:40]  lint started ... 
[14:46:40]  build dev finished in 10.64 s 
> cordova build android
Android Studio project detected

[14:46:42]  lint finished in 2.38 s 
ANDROID_HOME=/home/dias/Android/Sdk
JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
studio
Subproject Path: CordovaLib
Subproject Path: app
Starting a Gradle Daemon (subsequent builds will be faster)

publishNonDefault is deprecated and has no effect anymore. All variants are now published.

The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

	at build_bptnp9bkk21dxkv3hjyjndwz.run(/home/dias/gamesearch/platforms/android/app/build.gradle:143)
:CordovaLib:preBuild
 UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE

:CordovaLib:compileDebugAidl

:CordovaLib:compileDebugRenderscript

:CordovaLib:checkDebugManifest UP-TO-DATE
:CordovaLib:generateDebugBuildConfig
 
UP-TO-DATE

:CordovaLib:prepareLintJar
 
UP-TO-DATE

:CordovaLib:generateDebugResValues
 
UP-TO-DATE

:CordovaLib:generateDebugResources

:CordovaLib:packageDebugResources

:CordovaLib:platformAttrExtractor
 
UP-TO-DATE
:CordovaLib:processDebugManifest
 
UP-TO-DATE
:CordovaLib:processDebugResources

:CordovaLib:generateDebugSources

:CordovaLib:javaPreCompileDebug
 UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac
 UP-TO-DATE
:CordovaLib:processDebugJavaRes
 NO-SOURCE
:CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug
 UP-TO-DATE
:app:preBuild
 UP-TO-DATE
:app:preDebugBuild
 
UP-TO-DATE
:app:compileDebugAidl

:CordovaLib:packageDebugRenderscript
 
NO-SOURCE

:app:compileDebugRenderscript

:app:checkDebugManifest
 
UP-TO-DATE

:app:generateDebugBuildConfig
 
UP-TO-DATE

:app:prepareLintJar
 
UP-TO-DATE

:app:generateDebugResValues
 
UP-TO-DATE

:app:generateDebugResources

:app:mergeDebugResources

:app:createDebugCompatibleScreenManifests
 UP-TO-DATE
:app:processDebugManifest
 
UP-TO-DATE
:app:splitsDiscoveryTaskDebug
 
UP-TO-DATE

:app:processDebugResources

:app:generateDebugSources
:app:javaPreCompileDebug
 UP-TO-DATE
:app:compileDebugJavaWithJavac
 
UP-TO-DATE
:app:compileDebugNdk
 NO-SOURCE
:app:compileDebugSources UP-TO-DATE
:CordovaLib:mergeDebugShaders
 
UP-TO-DATE

:CordovaLib:compileDebugShaders

:CordovaLib:generateDebugAssets
:CordovaLib:mergeDebugAssets
 UP-TO-DATE
:app:mergeDebugShaders 
UP-TO-DATE
:app:compileDebugShaders

:app:generateDebugAssets
:app:mergeDebugAssets
 
UP-TO-DATE

:app:transformClassesWithStackFramesFixerForDebug
 
UP-TO-DATE

:app:transformClassesWithDesugarForDebug
 
UP-TO-DATE

:app:transformClassesWithDexBuilderForDebug
 
UP-TO-DATE

:app:transformDexArchiveWithExternalLibsDexMergerForDebug
 
UP-TO-DATE

:app:transformDexArchiveWithDexMergerForDebug
 
UP-TO-DATE

:CordovaLib:compileDebugNdk
 
NO-SOURCE

:CordovaLib:mergeDebugJniLibFolders
 
UP-TO-DATE
:CordovaLib:transformNativeLibsWithMergeJniLibsForDebug
 
UP-TO-DATE
:CordovaLib:transformNativeLibsWithIntermediateJniLibsForDebug 
UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNativeLibsWithMergeJniLibsForDebug
 UP-TO-DATE
:app:processDebugJavaRes 
NO-SOURCE
:app:transformResourcesWithMergeJavaResForDebug
 
UP-TO-DATE
:app:validateSigningDebug

:app:packageDebug

:app:assembleDebug

:app:cdvBuildDebug


BUILD SUCCESSFUL
 in 32s

46 actionable tasks: 12 executed, 34 up-to-date

JAR19 · May 2, 2018, 6:25pm

What about in the console window?

diaslucas · May 2, 2018, 6:31pm

Using ionic -lab, the console window shows these errors:

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:66
util.js:66 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

In the emulator, device and the terminal does not appear any error.

JAR19 · May 2, 2018, 6:46pm

I am out of suggestions!

reedrichards · May 2, 2018, 6:49pm

Test on a real device
Connect this device with a cable to your laptop
Debug it with the chrome javascript console

from @joshmorony survival kit:

diaslucas · May 3, 2018, 3:14am

I tried and the problem persists

reedrichards · May 3, 2018, 5:10am

What was the stacktrace in the chrome dev javascript console?

Kanishk12 · May 3, 2018, 5:43am

Did you try adding the splashscreen plugin ?
“cordova-plugin-splashscreen”

JAR19 · May 3, 2018, 6:16am

Start with a new app - add the splash screen and make sure that works.

reedrichards · May 3, 2018, 6:31am

totally miss that in his/her config.xml, you are right, cordova-plugin-splashscreen seems to be missing, well spotted

Kanishk12 · May 3, 2018, 6:48am

yes, exactly! Thanks

ramon · May 3, 2018, 11:26am

Make sure you have installed the plugin and the ionic-native lib:

    ionic cordova plugin add cordova-plugin-splashscreen

    npm install --save @ionic-native/splash-screen

Then, put this line in your config.xml:

    <preference name="AutoHideSplashScreen" value="false" />

Hope this helps.

diaslucas · May 3, 2018, 7:10pm

@ramon worked out
thank you all for the answers

reedrichards · May 4, 2018, 5:16am

@diaslucas what worked out?

could you select the answer which worked out aka mark your question as solved? someone might face the same problem as you in the future, could help him/her

anasshl · June 12, 2018, 1:42pm

how top add this plugin i have the same problem

Topic		Replies	Views
Icon and Splash screen - how to? ionic-v3	10	12993	June 3, 2017
How to change Splash Screen image in ionic for both android and ios ionic-v3	3	39385	July 19, 2021
How to add custom splashscreen to android? iOS already works ionic-v3	4	2472	July 19, 2021
[SOLVED] App icon+splash issues ionic-v3	7	2814	December 16, 2016
Cannot change default Splash screen for Android ionic-v3	5	2425	January 4, 2017

Splash screen white

Related topics