Phonegap - Add a Splash Screen for Android App

Phonegap - add a splash screen for Android app

In order to have a splash screen in a PhoneGap Android application you need to put your splash.png file into res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi, res/drawable-xhdpi. Where those directories represent low, medium, high and extra large dots per inch. You'll need to resize you splash.png (the file name is important here) for each directory or Android will stretch it for you.

The sizes of each image should be:

• xlarge (xhdpi): at least 960 x 720
• large (hdpi): at least 640 x 480
• medium (mdpi): at least 470 x 320
• small (ldpi): at least 426 x 320

Then in your main Java class, the one that extends DroidGap, you'll need to add one line and modify another. First add:

super.setIntegerProperty("splashscreen", R.drawable.splash);

this line should show up under super.onCreate but before super.loadUrl. Then you'll need to modify your loadUrl method to pause for 5 seconds before loading up the main page. It would look like this:

super.loadUrl("file:///android_asset/www/index.html", 5000);

That should do it for you.

I've recently made some updates to how the SplashScreen works on PhoneGap Android. The main app now loads while the splash screen is being shown. This is a big improvement over the previous blocking splash screen call. Read more about the changes on my blog.

blank splash screen on android with phonegap build

Found the problem : the debug mode fail the splash screen. When removing it, it works as expected.

Phonegap Build App Don't Display Splash Screen in Android

You don't have the default splash tag which is

<gap:splash src="splash.png" />

It's in the documentation: http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

You need to look at PhoneGap Build documentation, not just the PhoneGap documentation. Build is special.

phonegap build not showing splashscreen

You don't have the default splash tag which is

<splash src="splash.png" />

It's in the documentation:
http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

Update

If you are using phonegap version cli-5.1.1 or above, you need the new splashscreen plugin from npm.

Here's the new plugin on github, there you can find how to use it:

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

Phonegap / ionic app splash screen are not shown

For anyone with the same problem,

I had to add an folder inside the www folder for example folder res. inside i put all my splash screens and configured my config.xml like this:

<content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="android-minSdkVersion" value="16"/>

  <gap:plugin name="org.apache.cordova.splashscreen" />

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

  <preference name="SplashScreenDelay" value="4000" />

  <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/drawable-port-ldpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/drawable-port-mdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/drawable-port-hdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/drawable-port-xhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xxhdpi" src="res/drawable-port-xxhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xxxhdpi" src="res/drawable-port-xxxhdpi/screen.png" />

  <gap:splash gap:platform="android" gap:qualifier="land-ldpi" src="res/drawable-land-ldpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-mdpi" src="res/drawable-land-mdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-hdpi" src="res/drawable-land-hdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-xhdpi" src="res/drawable-land-xhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-xxhdpi" src="res/drawable-land-xxhdpi/screen.png" />
  <gap:splash gap:platform="android" gap:qualifier="land-xxxhdpi" src="res/drawable-land-xxxhdpi/screen.png" />

  <!-- iPhone 4 and iPod touch -->
  <gap:splash src="res/ios/iphone4/Default.png" gap:platform="ios" width="320" height="480" />
  <gap:splash src="res/ios/iphone4/Default@2x.png" gap:platform="ios" width="640" height="960" />

  <!-- iPhone 5 / iPod Touch (5th Generation) -->
  <gap:splash src="res/ios/iphone5/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />

  <!-- iPhone 6 -->
  <gap:splash src="res/ios/iphone6/Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
  <gap:splash src="res/ios/iphone6/Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />
  <gap:splash src="res/ios/iphone6/Default-Landscape-736h@3x.png" gap:platform="ios" width="2208" height="1242" />

  <!-- iPad -->
  <gap:splash src="res/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
  <gap:splash src="res/ios/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />

  <!-- Retina iPad -->
  <gap:splash src="res/ios/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2048" />
  <gap:splash src="res/ios/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1536" />

  <gap:splash src="splash.png" />

  <gap:plugin name="org.apache.cordova.device"/>
  <gap:plugin name="org.apache.cordova.network-information"/>
  <gap:plugin name="org.apache.cordova.inappbrowser"/>
  <gap:plugin name="uk.co.whiteoctober.cordova.appversion" version="0.1.4"/>
  <gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" source="pgb"/>
  <gap:plugin name="com.ionic.keyboard" version="1.0.3" source="pgb"/>
  <gap:plugin name="nl.x-services.plugins.socialsharing" version="4.3.8" source="pgb"/>
  <gap:plugin name="fi.avaus.cordova.geolocation"/>
  <platform name="ios">
    <icon src="resources/ios/icon/icon.png" gap:platform="ios" width="57" height="57"/>
    <icon src="resources/ios/icon/icon@2x.png" gap:platform="ios" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" gap:platform="ios" width="40" height="40"/>
    <icon src="resources/ios/icon/icon-40@2x.png" gap:platform="ios" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-50.png" gap:platform="ios" width="50" height="50"/>
    <icon src="resources/ios/icon/icon-50@2x.png" gap:platform="ios" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" gap:platform="ios" width="60" height="60"/>
    <icon src="resources/ios/icon/icon-60@2x.png" gap:platform="ios" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-60@3x.png" gap:platform="ios" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" gap:platform="ios" width="72" height="72"/>
    <icon src="resources/ios/icon/icon-72@2x.png" gap:platform="ios" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" gap:platform="ios" width="76" height="76"/>
    <icon src="resources/ios/icon/icon-76@2x.png" gap:platform="ios" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-small.png" gap:platform="ios" width="29" height="29"/>
    <icon src="resources/ios/icon/icon-small@2x.png" gap:platform="ios" width="58" height="58"/>
    <icon src="resources/ios/icon/icon-small@3x.png" gap:platform="ios" width="87" height="87"/>
  </platform>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" gap:platform="android" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" gap:platform="android" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" gap:platform="android" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" gap:platform="android" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" gap:platform="android" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" gap:platform="android" density="xxxhdpi"/>
  </platform>

  <icon src="icon.png" />

most input found in this tutorial (was very helpfull)
https://www.youtube.com/watch?v=9KVvaZPhGWo

splash screen not come when in build from cloud phonegap. form eclipse i run in emulator its work prefect

When you upload to Phonegap build services your config.xml file should be in www/config.xml. Also the name space for your config should be xmlns:gap="http://phonegap.com/ns/1.0." Look here for further info: http://docs.build.phonegap.com/en_US/configuring_basics.md.html#The%20Basics

---

Related Topics