Ionic Splash Screen

A splash screen is similar to a start screen or start-up screen. It is a graphical control element that consists of a window that contains the image, logo, and current version of the software. It displays while the application or other item is loading. When the loading is complete, the user generally gets another more functional screen. The splash screen is just a display screen that allows users to look something while the hardware is loading to present software to the user. It usually appears when a game or program is launching.

The common elements of a splash screen contain a company name and logo or a title that indicates what people will be using. The most excellent example of a splash screen is Microsoft logo on starting a Microsoft operating system.

Every mobile application must contain an icon and splash screen. Ionic provides an easy solution to add a splash screen that requires minimum work for the developers. In this tutorial, we are going step by step to see the splash screen by using the Cordova splash screen plugin.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. You can skip this step if you already had an Ionic project.

Step 2: Next, navigate to the project and install the following splash screen plugin using the below command. This plugin is responsible for displaying and hiding a splash screen during the application launch.

Step 3: If you want to take advantage of Apache Cordova?s Splash Screen plugin, add the following command in your project.

Step 4: Add the following lines to your config.xml file. When you add it, your app builds display a splash screen on the application launch for 3000 milliseconds.

Step 5: Now, you need to add images and icons to the project. You can find the splash screen images in the resource folder of your project.

Step 6: When you run the app in your device, you will see a splash screen before the app is started. Here, you will find that a default Ionic Icon is changed.

The most common splash screen sizes are as follows: