How to create cordova splash screen

after i add cordova splashscreen plugin

i put this code in my config.xml

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<platform name="android">
<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

in index.html i put this code

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

and in my app.js i put this code

angular.module('starter', ['ionic', 'starter.controllers', '', 'ngCordova'])

//this code i put for splash sceen
.run(function($cordovaSplashScreen) {
  setTimeout(function() {
  }, 5000)

//this code already it is before when i create app
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required


can any one help me . i m trying from 1 week for solution not able to do.

Did You install the splashScreen plugin first?
Checkout this tutorial: Customize Ionic Splash Screen

yes i follwed the same… and create accordingly. i m doing android… i m testing in ionic serve.

The splash screen will only appear when testing in an emulator or on an actual device, not when just using ionic serve and a web browser. This is because it’s a cordova plugin and you can’t run cordova in the browser. There are some plugins that have mock eqivalents but unless you are using these, you can’t test in the browser.

HI edd , when i m doing ionic emulator android iti s not opening so i m doing apk then i will install in device and test or what is good way to test ?

hi edd many thanks it is worked in device. i m stuggling from last 1 week i m testing in ionic serve only it is not worked… you are super super super frnd…

can you guide me now how to test in emulator, and why my one is not working so i check and work every thing in emulator…

another thing this code need to write or not

.run(function($cordovaSplashscreen) {
setTimeout(function() {
}, 1000)

in my config.xml i written this

Hi, glad you got it working on your device. That shows the code is correct.
I’m afraid I can’t guide you how to use your emulator. I’m only using iOS at the mo.

The code

.run(function($cordovaSplashscreen) {
    setTimeout(function() {
    }, 1000)

is just used to add a delay before hiding the splash screen so it is not necessary. In reality, you could do whatever you need in order to load data for your app, and then hide the splash screen once it’s loaded. The timeout is just as an example.

p.s. general forum guidance - the code block (grey) should just be used for code and non-code should not be in a code block. It just makes it easier to distinguish between code and non-code and easier to read.

thanks edd. i wil find solution for emulator… for code quote i will follow next if i post any thing… many thanks…