how to avoid black screen in phonegap

Question

how to remove black screen and title in phone-gap app.when i enter into the app i'm getting black screen and project title before i get splash screen.please help how to avoid that.

<widget id="io.phongap.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>phonegapproject</name>
<description>
    Hello World sample application that responds to the deviceready event.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
    PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<platform name="android">
     <allow-intent href="market:*" />
    <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
    <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
    <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
    <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
    <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
    <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
    <splash src="www/res/screen/android/drawable-port-hdpi-screen.png"/>
</platform>

<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:*" />
<platform name="android">

</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform>

<feature name="SplashScreen" >
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />

<param name="onload" value="true" />

**<preference name="SplashScreenDelay" value="5000" /> 
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="750"/>
<preference name="ShowSplashScreenSpinner" value="false"/>**

this is screen i get default,after that it is go to slash screen how to i retify that splash screen [enter image description here][2]

enter image description here

Answer 1

change your config.xml as referenced below :

<widget xmlns = "http://www.w3.org/ns/widgets" 
    xmlns:gap = "http://phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android"

    id        = "com.domain.app"
    version   = "1.0.0">

    ...

    <gap:config-file platform="android" parent="/manifest">
        <supports-screens 
            android:xlargeScreens="true" 
            android:largeScreens="true" 
            android:smallScreens="true" />
        <application android:theme="@android:style/Theme.NoTitleBar" >
            <activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
            </activity>
        </application>
    </gap:config-file>
</widget>

and for the Blank Screen,This is an intermediate screen that Android shows while your process is being forked. The black screen is just your window background as defined by your theme. There is a great article here by Cyril Mottier, an Android Developer Expert, on this topic. You can customise this to look a little nicer as explained in the article (basically just change your window background, but be wary of overdraw)