---
title: "Cordova - Splash Screen"  
description: "This plugin is used to display splash screen on application launch.Step 1 - Install Splash Screen PluginOpen command prompt window, type and run the f"  
author: "Anonymous User"  
published: 2017-05-03  
updated: 2018-03-19  
canonical: https://www.mindstick.com/blog/11371/cordova-splash-screen  
category: "apache cordova"  
tags: ["mobile development", "apache", "cordova"]  
reading_time: 2 minutes  

---

# Cordova - Splash Screen

This plugin is used to display [splash screen](https://answers.mindstick.com/qa/33372/i-wanted-to-do-show-a-splash-screen-in-my-application-only-once-for-the-first-time-when-user-downloads-my-application-how-do-you-design-it-what-logic-will-you-use-for-it) on [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) launch.

**Step 1 - Install Splash Screen Plugin**

Open **[command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt) window**, type and run the following code to install Splash screen plugin.

```
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen
```

**Step 2 - Adding Splash Screen**

Adding splash screen isn’t similar to adding other Cordova plugins. We have to open add the following code snippets inside the **widget** element in config.xml file.

The first code is **SplashScreen**.

It has **value** [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) which depicts the name of the images placed in [platform](https://www.mindstick.com/articles/13080/wikipedia-the-most-powerful-advertising-platform-of-the-digital-age)/[android](https://www.mindstick.com/articles/13046/10-reasons-why-i-prefer-android-vs-iphone-ios)/res/drawable- folder. Cordova offers default screen.png images that we are using in this example, but you can add any of your own images. Important thing is that you should add images for portrait and landscape view and also to for different [screen sizes](https://www.mindstick.com/forum/158661/how-to-create-a-responsive-layout-that-adapts-to-different-screen-sizes-using-css-media-queries).

```
<preference name = "SplashScreen" value = "screen" />
```

Second piece of code we need to add is **SplashScreenDelay**. Value is the time [duration](https://answers.mindstick.com/qa/45301/what-is-a-short-duration-discussion) in milli seconds for which the screen will be displayed. We have set value to 4000 to hide the splash screen after three seconds.

```
<preference name = "SplashScreenDelay" value = "4000" />
```

The last preference is optional. It sets stretching of the image. If the value is set to true, the image will not be stretched to fit screen. If it is set to false, it will be stretched.

```
<preference name = "SplashMaintainAspectRatio" value = "true" />
```

Now, we will see the splash screen on running the app.

**Also Read: [Cordova - Network Info](https://www.mindstick.com/blog/11370/cordova-network-information)**

\

![Cordova - Splash Screen](https://www.mindstick.com/blogs/127a0cb0-efdc-4d3d-bc15-557d86827a06/images/ca01c033-9182-41b0-8bbb-89119f994103.png)\

\

**You may also Like : [Google's Digital Marketing Course](https://www.mindstick.com/Articles/12312/google-s-digital-marketing-learning-initiative-for-smbs)**\

---

Original Source: https://www.mindstick.com/blog/11371/cordova-splash-screen

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
