Ionic Splash Screen

Facebooktwitterredditpinterestlinkedinmailby feather

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.

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

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.

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