vladimir-kotikov/Standartized_splashscreen_support.md

## Standartized_splashscreen_support.md

      
    Raw
  

              Standartized_splashscreen_support.md
            
          
    Standartized splash screen support for Cordova

Configuring splash screen

Configuration of splashscreen is similar to existing [phonegap build  specification]
(http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens),
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]
(https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LaunchImages.html)
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.
Alternative approach

It can be possible to use folder with predefined image names. Images from this
folder will be just copied to each platform during 'prepare' step.
Possible folder structure:
assets\
    windows8\
        splashscreen.png
    wp8\
        splashscreenimage.jpg
    android\
        drawable-land-hdpi\
            screen.png
        drawable-land-ldpi\
            screen.png
        drawable-land-mdpi\
            screen.png
        drawable-land-xhdpi\
            screen.png
        drawable-port-hdpi\
            screen.png
        drawable-port-ldpi\
            screen.png
        drawable-port-mdpi\
            screen.png
        drawable-port-xhdpi\
            screen.png
    ios\
        Default@2x~iphone.png
        Default~iphone.png
        Default-568h@2x~iphone.png
        Default-Landscape@2x~ipad.png
        Default-Landscape~ipad.png
        Default-Portrait@2x~ipad.png
        Default-Portrait~ipad.png

User just need to specify source folder for each platform, e.g.:
 <platform name="android">
      <splash src="res/android/splash/" />
 </platform>

 <platform name="ios">
      <splash src="res/ios/splash/" />
 </platform>

 <platform name="wp8">
      <splash src="res/wp/splash/" />
 </platform>

 <platform name="windows8">
      <splash src="res/windows8/splash" />
 </platform>