how to add icon and splashscreen in Ionic Creator? - angularjs

Question

I added the splashscreen plugin using this:
cordova plugin add cordova-plugin-splashscreen
I have images for the icon and splashscreen and added them to the resources folder and have added this code in my controller.js:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
setTimeout(function() {
navigator.splashscreen.hide();
}, 300);
});
})
And I added the following in my config.xml:
<preference name="ShowSplashScreen" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>
And also this:
<platform name="android">
<icon src="resources/android/icon/icon.png" />
<splash src="resources/android/splash/screen.png" />
</platform>
But after building my app (using adobe's online phonegap builder) the icon shows, but the app starts with a blank white screen for a few seconds instead of the splashscreen. What could be the problem?

Answer 1

Add the plugin with :
$ ionic plugin add org.apache.cordova.splashscreen
$ ionic platform add android
$ ionic build android
$ ionic run android
Once the image is created, you have to include it in your project by adding the following to config.xml:
<splash src="pathtosplashimage" />
Example Configuration
In the top-level config.xml file (not the one in platforms), add configuration elements like those specified here.
Please notice that the value of the "src" attribute is relative to the project root directory and not to the www directory (see Directory structure below). You can name the source image whatever you like. The internal name in the app is determined by Cordova.
Directory structure:
projectRoot
hooks
platforms
plugins
www
css
img
js
res
screen
android
ios
windows
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
<!-- There are two mechanisms for showing launch images.
-- Legacy method (supports all devices except iPad Pro 12.9):
-- Note: Images are determined by width and height. The following are supported -->
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" height="2048"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" height="1536"/>
<splash src="res/screen/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
<!-- Storyboard method (supports all devices):
-- Important: If you use the storyboard method, legacy images are
-- copied but ignored.
-- Note: images are determined by scale, idiom, and size traits. The following
-- are suggested based on current device form factors -->
<splash src="res/screen/ios/Default#2x~universal~anyany.png" />
<splash src="res/screen/ios/Default#2x~universal~comany.png" />
<splash src="res/screen/ios/Default#2x~universal~comcom.png" />
<splash src="res/screen/ios/Default#3x~universal~anyany.png" />
<splash src="res/screen/ios/Default#3x~universal~anycom.png" />
<splash src="res/screen/ios/Default#3x~universal~comany.png" />
</platform>
<preference name="SplashScreenDelay" value="10000" />
More information can be found on https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/