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

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 2

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" />