SplashScreens: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
'''''This page is obsolete. Starting with AppStudio 8, SpashScreens are created automatically. None of the information on this page is still applicable.
'''''
SplashScreens are displayed when your app starts. The way they work depends on the platform you are running on.
SplashScreens are displayed when your app starts. The way they work depends on the platform you are running on.


== Web Apps ==
== 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 the Android splash screen when building with PhoneGap.
There's a handy utility for generating icons and splash screens. Upload a single png, and it will generate all the different sizes.


=== iOS===
=== iOS===


(Splash screens for Home Screen apps do not work for iOS 9.0 to 9.2. It's an iOS problem.)
Updated documentation is pending, due to implementation of PWAs.
 
Images must be supplied for all the supported screen sizes.
 
Here's how to add splash screens:
 
# Add folder named 'splash' to your project directory.
# Drag it into the Project Explorer
# Add a folder named 'ios' to the new 'splash' folder.
# In the ios folder, put the following files:
  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:
 
[[File:Splashscreen.png]]


=== Android ===
=== Android ===


Splash screen support for Home screen apps was added in Chrome 47. 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 presently allow splash screens to be disabled if launched in fullscreen or standalone display modes.
Updated documentation is pending, due to implementation of PWAs.
 
If you have ChromeSplash in Project Properties set to True, you need to have a splash folder in your app. Otherwise, your icon will not display when saved to the Home Screen. http://www.zeppelindev.com
 
Here's how to customize your splash screen:
 
# Make sure ChromeSplash in [[Properties Window|Project Properties]] is True.
# Add folder named 'splash' to your project directory.
# Drag it into the [[Project Explorer]]
# Add a folder named 'android' to the new 'splash' folder.
# In the android folder, put the following files:
  192x192.png
  256x256.png
  384x384.png
  512x512.png
* Android will choose the appropriate image depending on the device.
* The image will be centered on the screen.
* If set, the contents of 'homescreenTitle' in Project Properties will be used as the title of the home screen app.
* In Project Properties, you can specify the text to display on the splash screen by setting 'Description'. If left blank, the general 'description' property's contents will be used.
* The background color of the splash screen will be taken from 'backgroundColor' in Project Properties. This ensures there is no flicker moving from the splash screen to your app.
* In Project Properties, you can specify a different color for the device's status bar by setting 'ThemeColor'.
* In Project Properties, you can specify the Chrome 'Orientation' as any, natural, landscape or portrait.
# any - permits the app to freely rotate. Overrides a device's screen orientation rotation lock, if set.
# natural - allows normal app orientation rotation if the device's rotation lock is not set.
# landscape - forces landscape orientation regardless of device settings.
# portrait - forces portrait orientation regardless of device settings.
* In Project Properties, you can select the 'Display' mode as fullscreen, standalone, minimal-ui or browser.
# standalone - launches like a native app in appearance.
# browser - launches the app in a browser window, complete with address bar and browser controls.
Neither the fullscreen nor minimal-ui modes are supported within Chrome at this time. Selecting them will cause the browser to fallback to the next lower mode.


== PhoneGap Apps ==
== 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.
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 extraFiles property.


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


Line 88: Line 27:


The Web App images can be in the same folder.
The Web App images can be in the same folder.
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/


=== Android ===
=== Android ===
Line 93: Line 34:
A similar file structure is needed as for web apps, but the screen sizes are different:
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 following files:
Create a folder in your Splash folder called android.  
 
  960x720.png
  640x480.png
  470x320.png
  426x320.png
  720x960.png
  480x640.png
  320x470.png
  320x426.png


Add the following lines to the PhoneGap configxml property:
Add the following lines to the PhoneGap configxml property:
<pre>
<pre>
<preference name="SplashScreenDelay" value="2000" />
&lt;!-- Splash Screens -->
<preference name="AutoHideSplashScreen" value="true" />
 
<gap:splash src="{splashscreen}"/>
&lt;preference name='SplashScreenDelay' value='2000' />
&lt;preference name='AutoHideSplashScreen' value='true' />
&lt;gap:splash src='{splashscreen}'/>
&lt;gap:plugin name='cordova-plugin-splashscreen' source='npm' />


<platform name="android">
&lt;platform name='android'>
  <splash src="splash/android/426x320.png" density="land-ldpi" />
    <splash src='splash/android/res-long-land-hdpi/splash.png' qualifier='long-land-hdpi' />
  <splash src="splash/android/470x320.png" density="land-mdpi" />
    <splash src='splash/android/res-long-land-ldpi/splash.png' qualifier='long-land-ldpi' />
  <splash src="splash/android/640x480.png" density="land-hdpi" />
    <splash src='splash/android/res-long-land-mdpi/splash.png' qualifier='long-land-mdpi' />
  <splash src="splash/android/960x720.png" density="land-xhdpi" />
    <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/320x426.png" density="port-ldpi" />
    <splash src='splash/android/res-long-land-xxxhdpi/splash.png' qualifier='long-land-xxxhdpi' />
  <splash src="splash/android/320x470.png" density="port-mdpi" />
    <splash src='splash/android/res-long-port-hdpi/splash.png' qualifier='long-port-hdpi' />
  <splash src="splash/android/480x640.png" density="port-hdpi" />
    <splash src='splash/android/res-long-port-ldpi/splash.png' qualifier='long-port-ldpi' />
  <splash src="splash/android/720x960.png" density="port-xhdpi" />
    <splash src='splash/android/res-long-port-mdpi/splash.png' qualifier='long-port-mdpi' />
</platform>
    <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' />
&lt;/platform>
</pre>
</pre>


Line 128: Line 78:
Assuming you want all sizes, add the following lines to the PhoneGap configxml property:
Assuming you want all sizes, add the following lines to the PhoneGap configxml property:
<pre>
<pre>
<preference name="SplashScreenDelay" value="2000" />
<!-- Splash Screens -->
<gap:splash src="{splashscreen}"/>
<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">
<platform name = "ios">
Line 135: Line 88:
   <splash src='splash/ios/Default@2x.png' width='640' height='960' />
   <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-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-Portrait.png' width='768' height='1024' />
   <splash src='splash/ios/Default-Landscape.png' width='1024' height='768' />
   <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-Portrait@2x.png' width='1536' height='2048' />
   <splash src='splash/ios/Default-Landscape@2x.png' width='2048' height='1536' />
   <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>
</platform>

Latest revision as of 21:52, 13 December 2019

This page is obsolete. Starting with AppStudio 8, SpashScreens are created automatically. None of the information on this page is still applicable.


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

Web Apps

iOS

Updated documentation is pending, due to implementation of PWAs.

Android

Updated documentation is pending, due to implementation of PWAs.

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 extraFiles property.

Put the main splash screen file name into 'extraFiles' 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.

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/

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 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>