SplashScreens - Revision history

Ghenne: Replaced content with "'''''Starting with AppStudio 8, SpashScreens are created automatically. '''''"

2024-12-05T12:25:36Z

Replaced content with "'''''Starting with AppStudio 8, SpashScreens are created automatically. '''''"

← Older revision		Revision as of 12:25, 5 December 2024
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~~.		'''''Starting with AppStudio 8, SpashScreens are created automatically.
	'''''		'''''


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

	~~[[File:Splashscreen1.png]]~~

	~~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:~~
	~~<pre>~~
	~~<!-- 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>~~
	~~</pre>~~

	~~=== 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:~~
	~~<pre>~~
	~~<!-- 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 = "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>~~

Ghenne at 21:52, 13 December 2019

2019-12-13T21:52:38Z

← Older revision		Revision as of 21:52, 13 December 2019
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.		'''''This page is obsolete. Starting with AppStudio 8, SpashScreens are created automatically. None of the information on this page is still applicable.
	'''''~~Italic text''~~		'''''


	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.

Ghenne at 21:52, 13 December 2019

2019-12-13T21:52:12Z

← Older revision		Revision as of 21:52, 13 December 2019
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.
			'''''Italic text''
	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.

Ghenne: /* PhoneGap Apps */

2019-09-10T08:15:04Z

PhoneGap Apps

← Older revision		Revision as of 08:15, 10 September 2019
Line 15:		Line 15:
	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.		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.

Ghenne: /* PhoneGap Apps */

2019-09-10T08:14:44Z

PhoneGap Apps

← Older revision		Revision as of 08:14, 10 September 2019
Line 13:		Line 13:
	== 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 'manifest' in Project Properties: i.e. 320x426.png

Ghenne: /* PhoneGap Apps */

2019-08-01T18:14:40Z

PhoneGap Apps

← Older revision		Revision as of 18:14, 1 August 2019
Line 23:		Line 23:

	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 28:		Line 30:
	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 structure returned by Zeppelin~~.		Create a folder in your Splash folder called android.

	Add the following lines to the PhoneGap configxml property:		Add the following lines to the PhoneGap configxml property:

Ghenne: /* Web Apps */

2019-08-01T18:14:00Z

Web Apps

← Older revision		Revision as of 18:14, 1 August 2019
Line 2:		Line 2:

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

Ghenne: /* Android */

2019-08-01T18:13:32Z

Android

← Older revision		Revision as of 18:13, 1 August 2019
Line 21:		Line 21:
	=== Android ===		=== 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.~~		Updated documentation is pending, due to implementation of PWAs.

	~~Here's how to customize your splash screen:~~

	~~# Put your splash screen image in your project folder. It should be a 192x192 png.~~
	~~# 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 ==		== PhoneGap Apps ==

Ghenne: /* iOS */

2019-08-01T18:13:16Z

iOS

← Older revision		Revision as of 18:13, 1 August 2019
Line 17:		Line 17:
	=== iOS===		=== iOS===

	~~Update~~ documentation is pending, due to implementation of PWAs.		Updated documentation is pending, due to implementation of PWAs.

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

Ghenne: /* iOS */

2019-08-01T18:13:02Z

iOS

← Older revision		Revision as of 18:13, 1 August 2019
Line 17:		Line 17:
	=== iOS===		=== iOS===

	~~Images must be supplied for all the supported screen sizes.~~		Update documentation is pending, due to implementation of PWAs.

	~~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, add the required sizes~~ of ~~files. The resulting file structure will look something like this:~~

	~~[[File:Splashscreen~~.~~png]]~~

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