how-to-setup-splash-screen-for-phonegap-projects

how to setup splash screen for phonegap project

Want create site? Find Free WordPress Themes and plugins.
how-to-setup-splash-screen-for-phonegap-projects

how-to-setup-splash-screen

how to setup splash screen for phonegap project

In this splash screen tutorial, we’re going to learn how to setup splash screen for phonegap project or apache cordova based applications. Before that you can also read various icon and splash screen sizes for phonegap projects

Follow these steps:

Step 1 : Create your phonegap project

Step 2 : Add Splash Screen Plugins

For 5.0+

cordova plugin add cordova-plugin-splashscreen

For Older Version

cordova plugin add org.apache.cordova.splashscreen

or

cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

step 3 :

Create New folder called (res) in your root directory and save / move your splash screen images (Read this article for various icon and splash screen sizes for Phonegap / Apache Cordova projects)

Step 4:

Change your config.xml file with following

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

<platform name="wp8">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/wp8/SplashScreenImage.jpg" width="768" height="1280"/>
</platform>

<platform name="windows8">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/windows8/splashscreen.png" width="620" height="300"/>
</platform>

<platform name="blackberry10">
    <!-- Add a rim:splash element for each resolution and locale you wish -->
    <!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html -->
    <rim:splash src="res/screen/windows8/splashscreen.png"/>
</platform>

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

where SplashScreenDelay is display duration in milliseconds

Step 5 : save and compile

There are two methods in splash screen plugin. such as

splashscreen.show
splashscreen.hide
Did you find apk for android? You can find new Free Android Games and apps.
MyMail WordPress Plugin free
Save $50 USD on Ionic Firebase Chat Source CodeEXPLORE