Standartized splash screen support for Cordova

Configuring splash screen

Configuration of splashscreen is similar to existing phonegap build specification, and to existing <icon> behaviour.

You can define app splashscreen via <splash> element (config.xml). If you do not specify a splash screen then the default splash screen for each platform is used.

    <splash src="splash.png" width="120" height="240" density="mdpi"/>

src: (required) specifies the location of the image file, relative to application root directory

width: (optional) image width in pixels

height: (optional) image height in pixels

density: (optional) android specific, specifies image density

For each platform you can also define a splashscreens to fit different screen resolutions.

Android

     <platform name="android">
              <!-- Portrait -->
              <splash src="res/android/splash-portrait-ldpi.png" density="port-ldpi" width="320" height="426" />
              <splash src="res/android/splash-portrait-mdpi.png" density="port-mdpi" width="320" height="470" />
              <splash src="res/android/splash-portrait-hdpi.png" density="port-hdpi" width="480" height="640" />
              <splash src="res/android/splash-portrait-xhdpi.png" density="port-xhdpi" width="720" height="960" />
              <!-- Landscape -->
              <splash src="res/android/splash-ldpi.png" density="land-ldpi" width="426" height="320" />
              <splash src="res/android/splash-mdpi.png" density="land-mdpi" width="470" height="320" />
              <splash src="res/android/splash-hdpi.png" density="land-hdpi" width="640" height="480" />
              <splash src="res/android/splash-xhdpi.png" density="land-xhdpi" width="960" height="720" />
     </platform>

iOS

     <platform name="ios">
              <!-- iPhone  -->
              <splash src="res/ios/splash.png" width="320" height="480" />
              <!-- iPhone Retina  -->
              <splash src="res/ios/splash-2x.png" width="640" height="960" />
              <!-- iPhone 5  -->
              <splash src="res/ios/splash-wide.png" width="640" height="1136" />
              <!-- iPad -->
              <splash src="res/ios/splash-ipad-portrait.png" width="768" height="1024" />
              <splash src="res/ios/splash-ipad-landscape.png" width="1024" height="768" />
              <!-- iPad Retina -->
              <splash src="res/ios/splash-ipad-portrait-2x.png" width="1536" height="2048" />
              <splash src="res/ios/splash-ipad-landscape-2x.png" width="2048" height="1536" />
     </platform>

Windows Phone8

     <platform name="wp8">
              <splash src="res/wp/splash.jpg" width="768" height="1280" />
     </platform>

Windows8

     <platform name="windows8">
              <splash src="res/windows8/splash.png" width="300" height="620" />
     </platform>

Platform-specific quirks

Splash Screens for the Android Platform

The size for each should be:

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

More info here

Splash Screens for the iOS Platform

Sizes of images for IOS platform defined here

Splash Screens for the Windows Phone 8 platform

Image size for Windows phone devices should be 768 × 1280 px (Guide)

Also Windows Phone 8 supports only JPEG splashscreen images.

Splash Screens for the Windows 8 platform

Image size for Windows 8 should be 620 x 300 px. Also Background color for splashscreen is not requred, but recommended.Design Guidelines, SplashScreen Quickstart, Appxmanifest reference

Flow

Image, specified by src attribute copied during ‘prepare’ step to platform splashscreen location:

  • Windows8: images/splashscreen.png
  • WP8: splashscreenimage.jpg
  • Android: res/drawable-land|port-{dpi}/screen.png
  • IOS: resources/splash/default-*.png

Resulting name of the file is defined from its’ width and height attributes, or density attribute, if defined.

src

Leave a Reply

Your email address will not be published. Required fields are marked *