Javatpoint Logo
Javatpoint Logo

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:

Platform Orientation Resolution
Android MDPI Landscape 480320
Android MDPI Portrait 320480
Android HDPI Landscape 800480
Android HDPI Portrait 480800
Android XHDPI Landscape 1280720
Android XHDPI Portrait 7201280
iPhone Retina Portrait 640960
iPhone Portrait 320480
iPad Retina Portrait 15362048
iPad Portrait 7681024
iPad Retina Landscape 20481536
iPad Landscape 1024768

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA