cordova app displays a black screen before splash screen displays

Question

I'm developing a web app with Intel XDK which builds my app with Cordova online. I add a splash screen with the splash screen plugin. And the splash screen appears when I launch my app. But before the splash screen shows, a black screen shows for a little while first. How could I make it shows the splash screen immediately without a black screen first.

I googled for days..And I find many others had this problem. But it seems the solutions can not help me..

I have tried set AutoHideSplashScreen to false and SplashScreenDelay = 10000(or higher), and hide the splash screen when all things are ready(app.Ready, deviceready..)

Any help will be appreciated, thank you.

Answer 1

Go to platform/android/AndroidMainfest.xml . And search android:theme="android:style/Theme.DeviceDefault.NoActionBar".

Android will load a blank layout before it loads based on the theme you have set for it. The solution is to the theme of the splash activity to a transparent one.

And change it to like this android:theme="android:style/Theme.Translucent.NoActionBar".

Answer 2

Go to confi.xml and try this code. It works for me.

<access origin="*" />
<preference name="SplashScreen" value="screen"/>
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="SplashScreenDelay" value="5000"/>
<preference name="FadeSplashScreenDuration" value="5000"/> 
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false" /> 



<!-- Ionic supports Android Jellybean and up --> 
<preference name="android-minSdkVersion" value="16" />

<!-- Don't store local data in an iCloud backup. Turn this to "cloud" to enable storage 
     to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.
-->
<preference name="BackupWebStorage" value="none" />

<feature name="StatusBar">
  <param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
<feature name="SplashScreen">
  <param name="ios-package" value="CDVSplashScreen"/>
  <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
  <param name="onload" value="true"/>
</feature>

Answer 3

1) if you use some splashscreen.png you can create android style file under {Project}\res\values (for example splashscreen-style.xml) and put splashscreen.png into {Project}\res\drawable folder (or drawable-mdpi, drawable-xhdpi, ...), it will be mapped in automatically @drawable/splashscreen:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="YourThemeName" parent="android:style/Theme.Light.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@drawable/splashscreen</item>
    </style>
</resources>

2) Apply your the by config.xml:

    <edit-config file="AndroidManifest.xml" mode="merge"
             target="/manifest/application/activity">
        <activity android:theme="@style/YourThemeName" />
    </edit-config>

It must work, at least for cordova 6.5.0:) and some eralier version.

Also you can see https://simonerescio.it/en/2014/05/phonegap-android-splashscreen-application

Answer 4

I fixed this after lot of researchs.

Firstly go to intelxdk.config.additions.xml file

add this line on top

<preference name="SplashScreenDelay" value="8000" />//change value depending on ur needs in milliseconds

Also modify the FadeSplashScreenDuration (iOS)

      `<preference name="FadeSplashScreenDuration" value="8000"/>`

Here is the full code

<!-- 'value' = number of milliseconds to display the splash screen in a Cordova build. -->
<!-- This preference only affects Cordova builds for Crosswalk and Android. -->
 <preference name="SplashScreenDelay" value="8000" /> 

<platform name="ios">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="FadeSplashScreen" value="false"/>
    <preference name="FadeSplashScreenDuration" value="8000"/>
    <preference name="ShowSplashScreenSpinner" value="true"/>

    <!-- below requires the status bar plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-statusbar -->
    <!-- see http://devgirl.org/2014/07/31/phonegap-developers-guid -->
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />
</platform>

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
      <preference name="ShowSplashScreenSpinner" value="true"/>
    <preference name="SplashMaintainAspectRatio" value="true" />
</platform>

<!-- use this feature to add command-lines to be used by Crosswalk builds on device -->
<!-- see http://peter.sh/experiments/chromium-command-line-switches/ for complete list -->
<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />
<!-- ignore gpu blacklist for larger collection of gpu accelerated devices -->
<intelxdk:crosswalk xwalk-command-line="--ignore-gpu-blacklist" />

Answer 5

I had the same problem and the documentation is a little disjointed.

Config.XML ensure you have the following lines. Android: Adjust time out period to what suits.(10000 for me as I pre-load some pages in DOM).

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

Ios:

<preference name="FadeSplashScreen" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />

in Index.Js

function () {
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
setTimeout(function () {
        navigator.splashscreen.hide();
    }, 50);
}

This kept the splash screen open until the platform was ready for me.