SplashScreens: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 24: Line 24:
# Drag it into the Project Explorer
# Drag it into the Project Explorer
# Add a folder named 'ios' to the new 'splash' folder.
# Add a folder named 'ios' to the new 'splash' folder.
# In the ios folder, put the following files:
# In the ios folder, put the following files, so it look something like this:
  320X460.png
  640x920.png
  640x1096.png
  748x1024.png
  768x1004.png
  1496x2046.png
  1536x2008.png
New for iPhone 6 and 6 Plus:
  1242x2148.png
  2208x1182.png
  750x1284.png


The resulting file structure will look something like this:
The resulting file structure will look something like this:

Revision as of 18:06, 1 August 2019

SplashScreens are displayed when your app starts. The way they work depends on the platform you are running on.

Web Apps

Web Apps show splash screens when saved to the Home Screen. The implementation is different in iOS and Android.

Put the 'icons' and 'splash' folder names into 'manifest' in Project Properties. Your manifest will look like this:

 icons
 splash
 320x426.png

The last line is for splash screens when building with PhoneGap - otherwise, they will not be created.

There's a handy utility for generating icons and splash screens. Upload a single png, and it will generate all the different sizes. https://pgicons.abiro.com/

iOS

Images must be supplied for all the supported screen sizes.

Here's how to add splash screens:

  1. Add folder named 'splash' to your project directory.
  2. Drag it into the Project Explorer
  3. Add a folder named 'ios' to the new 'splash' folder.
  4. In the ios folder, put the following files, so it look something like this:

The resulting file structure will look something like this:

Android

Splash screens are supported for the Home screen. If you do not provide any additional splash screen information, it will default to the app's icon centered in the screen, on a white background. Chrome does not allow splash screens to be disabled if launched in fullscreen or standalone display modes.

Here's how to customize your splash screen:

  1. Put your splash screen image in your project folder. It should be a 192x192 png.
  2. In Project Properties, set iconAndroid to your image.
  • The image will be centered on the screen.
  • If set, the contents of 'Title' in Project Properties will be used as the title of the home screen app.

PhoneGap Apps

The default PhoneGap SplashScreen must be set in Project Properties. The file needs to be in the top level of the project folder. PNG images work best: the filename should also be added to the Manifest property.

Put the main splash screen file name into 'manifest' in Project Properties: i.e. 320x426.png Also, in Project Properties, put that same file name into PhoneGap splashscreen.

The same file structure can be used as in Web App for the rest of the splashscreens. Here's how it could look:

The Web App images can be in the same folder.

Android

A similar file structure is needed as for web apps, but the screen sizes are different:

Create a folder in your Splash folder called android. Add the structure returned by Zeppelin.

Add the following lines to the PhoneGap configxml property:

<!-- Splash Screens -->

<preference name='SplashScreenDelay' value='2000' />
<preference name='AutoHideSplashScreen' value='true' />
<gap:splash src='{splashscreen}'/>
<gap:plugin name='cordova-plugin-splashscreen' source='npm' />

<platform name='android'>
    <splash src='splash/android/res-long-land-hdpi/splash.png' qualifier='long-land-hdpi' />
    <splash src='splash/android/res-long-land-ldpi/splash.png' qualifier='long-land-ldpi' />
    <splash src='splash/android/res-long-land-mdpi/splash.png' qualifier='long-land-mdpi' />
    <splash src='splash/android/res-long-land-xhdpi/splash.png' qualifier='long-land-xhdpi' />
    <splash src='splash/android/res-long-land-xxhdpi/splash.png' qualifier='long-land-xxhdpi' />
    <splash src='splash/android/res-long-land-xxxhdpi/splash.png' qualifier='long-land-xxxhdpi' />
    <splash src='splash/android/res-long-port-hdpi/splash.png' qualifier='long-port-hdpi' />
    <splash src='splash/android/res-long-port-ldpi/splash.png' qualifier='long-port-ldpi' />
    <splash src='splash/android/res-long-port-mdpi/splash.png' qualifier='long-port-mdpi' />
    <splash src='splash/android/res-long-port-xhdpi/splash.png' qualifier='long-port-xhdpi' />
    <splash src='splash/android/res-long-port-xxhdpi/splash.png' qualifier='long-port-xxhdpi' />
    <splash src='splash/android/res-long-port-xxxhdpi/splash.png' qualifier='long-port-xxxhdpi' />
    <splash src='splash/android/res-notlong-land-hdpi/splash.png' qualifier='notlong-land-hdpi' />
    <splash src='splash/android/res-notlong-land-ldpi/splash.png' qualifier='notlong-land-ldpi' />
    <splash src='splash/android/res-notlong-land-mdpi/splash.png' qualifier='notlong-land-mdpi' />
    <splash src='splash/android/res-notlong-land-xhdpi/splash.png' qualifier='notlong-land-xhdpi' />
    <splash src='splash/android/res-notlong-land-xxhdpi/splash.png' qualifier='notlong-land-xxhdpi' />
    <splash src='splash/android/res-notlong-land-xxxhdpi/splash.png' qualifier='notlong-land-xxxhdpi' />
    <splash src='splash/android/res-notlong-port-hdpi/splash.png' qualifier='notlong-port-hdpi' />
    <splash src='splash/android/res-notlong-port-ldpi/splash.png' qualifier='notlong-port-ldpi' />
    <splash src='splash/android/res-notlong-port-mdpi/splash.png' qualifier='notlong-port-mdpi' />
    <splash src='splash/android/res-notlong-port-xhdpi/splash.png' qualifier='notlong-port-xhdpi' />
    <splash src='splash/android/res-notlong-port-xxhdpi/splash.png' qualifier='notlong-port-xxhdpi' />
    <splash src='splash/android/res-notlong-port-xxxhdpi/splash.png' qualifier='notlong-port-xxxhdpi' />
</platform>

iOS

A similar file structure is needed as for web apps, but the screen sizes and file names are different. See the file names and sizes as they appear in the configxml property. Create files of your own with the same names and sizes.

Assuming you want all sizes, add the following lines to the PhoneGap configxml property:

<preference name='SplashScreenDelay' value='2000' />
<preference name='AutoHideSplashScreen' value='true' />
<gap:splash src='{splashscreen}'/>
<gap:plugin name='cordova-plugin-splashscreen' source='npm' />

<platform name = "ios">
  <splash src='splash/ios/Default.png' width='320' height='480' />
  <splash src='splash/ios/Default@2x.png' width='640' height='960' />
  <splash src='splash/ios/Default-568h@2x.png' width='640' height='1136' />
  <splash src='splash/ios/Default-667h@2x.png' width='750' height='1334' />
  <splash src='splash/ios/Default-Portrait.png' width='768' height='1024' />
  <splash src='splash/ios/Default-Landscape.png' width='1024' height='768' />
  <splash src='splash/ios/Default-Portrait@2x.png' width='1536' height='2048' />
  <splash src='splash/ios/Default-Landscape@2x.png' width='2048' height='1536' />
  <splash src='splash/ios/Default-Portrait-736h@3x.png' width='1242' height='2208' />
  <splash src='splash/ios/Default-Landscape-736h@3x.png' width='2208' height='1242' />
</platform>