Ionic Splash Screen

The Apache Cordova plugin helps to displays and hides a splash screen during the application launch. The Ionic Splash Screen is similar to a home page on a website. The ionic splash screen is a graphical control element. It consists of a window containing a picture, a logo, and the latest version of the software. The Splash Screen usually appears when a game or application is launched. It is displayed when the app and other objects are loaded. A splash screen can cover the full screen or webpage, or it can be just a rectangular near the center of the page.

The Mobile application must have the icon, image, and splash screen. The Ionic framework provides an easy way to add a splash screen, in which the developer needs minimal work to display the splash screen. In this topic, we are going to discuss the ionic splash screen. Here, you will see step by step all the processes of the ionic splash screen in the ionic application.

Step 1: Firstly, create a new project in the ionic application. It also makes sure that you have installed the latest version of the ionic.

Step 2. After the installation of the latest version of the ionic framework, you are required to select a blank template from the various templates. After this process, run the following commands to install the Cordova geolocation plugin in the ionic application.

$ cd myapp
 $ ionic cordova plugin add cordova-plugin-splashscreen
 $ npm install @ionic-native/splash-screen 

Step 3: To take benefits of Apache Cordova’s splash screen plugin in the application, you are required to run the below command.

Cordova plugin add org.apache.cordova.splashscreen

Step 4: In this step, you need to write the below code to the config.xml file. After running this code, the app displays a splash screen on the application launch only for 3 seconds.

<preference name=“SplashScreen” value=“splash” />
 <preference name=“SplashScreenDelay” value=“3000” /> 

Step 5: In this step, you are required to include the icons and images to the project. You can get the splash screen images and icons in the resource folder of the project.

These are many splash screen sizes available in the ionic application. Some of them are as follow:

S.No	Platforms	Orientation	Resolution
1.	Android	MDPI Landscape	480×320
2.	Android	MDPI Portrait	320×480
3.	Android	HDPI Landscape	800×480
4.	Android	HDPI Portrait	480×800
5.	Android	XHDPI Landscape	1280×720
6.	Android	XHDPI Portrait	720×1280
7.	iPhone	Retina Portrait	640×960
8.	iPhone	Portrait	320×480
9.	iPad	Retina Portrait	1536×2048
10.	iPad	Portrait	768×1024
11.	iPad	Retina Landscape	2048×1536
12.	iPad	Landscape	1024×768