I want to customize splash screen of my cordova project.
Here is my inserted code in config.xml file to change splash screen
<preference name = "SplashScreen" value = "screen" />
<preference name = "SplashScreenDelay" value = "3000" />
<preference name = "SplashMaintainAspectRatio" value = "true" />
<splash src="/HelloworldProject/splashimages/splash.png"platform="android" width="720" height="1280" />
I can't see any changes when i run my app.Any help here?
Try these suggestions out:
Looks like there should be a space before platform.
The SplashScreen preference should have the value of that src file; not screen
Try this out specifically (modelled after cordova apache docs):
<preference name="SplashScreen" value="/HelloworldProject/splashimages/splash.png" /> <!-- defaults to "/img/logo.png" -->
<preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
<preference name = "SplashMaintainAspectRatio" value = "true" />
<splash src="/HelloworldProject/splashimages/splash.png" width="720" height="1280" />
If you want, you could put the splash tag within a platform tag with name="android":
<platform name="android">
<splash density="land-ldpi" src="/HelloworldProject/splashimages/splash.png" />
</platform>
Excerpts from my root config.xml look like this:
<platform name="android">
<allow-intent href="market:*" />
<splash src="www\web\splashscreen\drawable-hdpi\screen.png" density="hdpi"/>
<splash src="www\web\splashscreen\drawable-ldpi\screen.png" density="ldpi"/>
<splash src="www\web\splashscreen\drawable-mdpi\screen.png" density="mdpi"/>
<splash src="www\web\splashscreen\drawable-hdpi\screen.png" density="port-hdpi"/>
<splash src="www\web\splashscreen\drawable-ldpi\screen.png" density="port-ldpi"/>
<splash src="www\web\splashscreen\drawable-mdpi\screen.png" density="port-mdpi"/>
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="750"/>
<preference name="ShowSplashScreenSpinner" value="true" />
<plugin name="org.apache.cordova.splashscreen" spec="~3.2.2" />
So I think it's setup okay. I've tried various other paths to the screen files, but it's not made any difference. I have verified that the images are in the specified paths prior to cordova build android. No matter what I try, though, I get a blank white screen until my app loads, and no sort of error message or debug output from the splashscreen.
Any ideas?
The ideal way to add splash screen images is by placing it in res/screen/android inside your cordova project then running the build command.
By doing this all the images gets copied to platforms/android/res/drawable-* folder.
As your splash images are not showing, make sure:
They have copied to platforms/android/res/drawable-* folder
successfully
Images are in correct size for all screen resolutions
Today I wanted to update my app in google play store but got the following error:
My config.xml looks like:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget
id="com.bla.blabla.bla"
version="1.3.8"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
xmlns:gap="http://phonegap.com/ns/1.0">
<name>MyApp</name>
<author>MyName</author>
<preference name="AutoHideSplashScreen" value="false" />
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="*" />
<!-- START: Android and iOS Quirks -->
<preference name="FadeSplashScreen" value="false"/>
<!-- START: Android section -->
<preference name="android-minSdkVersion" value="17" />
<!-- android quirks -->
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-hdpi"/>
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-ldpi"/>
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-mdpi"/>
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-xhdpi"/>
<splash src="www/resources/device/android/splash/port/hdpi.png" density="port-hdpi"/>
<splash src="www/resources/device/android/splash/port/ldpi.png" density="port-ldpi"/>
<splash src="www/resources/device/android/splash/port/mdpi.png" density="port-mdpi"/>
<splash src="www/resources/device/android/splash/port/xhdpi.png" density="port-xhdpi"/>
<icon src="www/resources/device/android/ldpi.png" density="ldpi" />
<icon src="www/resources/device/android/mdpi.png" density="mdpi" />
<icon src="www/resources/device/android/hdpi.png" density="hdpi" />
<icon src="www/resources/device/android/xhdpi.png" density="xhdpi" />
</platform>
<!-- END: Android section -->
</widget>
My build script looks like:
call cordova platform add android
call cordova plugin add cordova-plugin-device
call cordova plugin add cordova-plugin-file
call cordova plugin add cordova-plugin-file-transfer
call cordova plugin add cordova-plugin-network-information
call cordova plugin add cordova-plugin-splashscreen
call cordova plugin add cordova-plugin-inappbrowser
call cordova plugin add cordova-plugin-whitelist
call cordova plugin add cordova-plugin-file-opener2
call cordova build android
What could be the problem? Some months ago this script worked. I searched a lot in the web but did not find the solution. Mostly I read that the solution is to edit the AndroidManifest.xml but I am in cordova and not in a native android app development so I cannot edit the AndroidManifest.xml.
Ok now I resolved it by installing specific version of cordova:
npm install -g cordova#5.4.0
Before there was cordova 6.0.0 installed. I have no idea what changed from 5.4.0 to 6.0.0.
I have been trying over and over to add a splashscreen to my Ionic App
with this configuration the icons does work but the splashscreen aren't working. It's displaying a blank screen, not even the cordova default splashscreen.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.toggle423609" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Toggle</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you#example.com" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<preference name="AutoHideSplashScreen" value="false" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<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-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<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"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<icon src="resources/ios/icon/icon.png" width="57" height="57"/>
<icon src="resources/ios/icon/icon#2x.png" width="114" height="114"/>
<icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
<icon src="resources/ios/icon/icon-40#2x.png" width="80" height="80"/>
<icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
<icon src="resources/ios/icon/icon-50#2x.png" width="100" height="100"/>
<icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
<icon src="resources/ios/icon/icon-60#2x.png" width="120" height="120"/>
<icon src="resources/ios/icon/icon-60#3x.png" width="180" height="180"/>
<icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
<icon src="resources/ios/icon/icon-72#2x.png" width="144" height="144"/>
<icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
<icon src="resources/ios/icon/icon-76#2x.png" width="152" height="152"/>
<icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
<icon src="resources/ios/icon/icon-small#2x.png" width="58" height="58"/>
<icon src="resources/ios/icon/icon-small#3x.png" width="87" height="87"/>
<splash src="resources/ios/splash/Default-568h#2x~iphone.png" height="1136" width="640"/>
<splash src="resources/ios/splash/Default-667h.png" height="1334" width="750"/>
<splash src="resources/ios/splash/Default-736h.png" height="2208" width="1242"/>
<splash src="resources/ios/splash/Default-Landscape-736h.png" height="1242" width="2208"/>
<splash src="resources/ios/splash/Default-Landscape#2x~ipad.png" height="1536" width="2048"/>
<splash src="resources/ios/splash/Default-Landscape~ipad.png" height="768" width="1024"/>
<splash src="resources/ios/splash/Default-Portrait#2x~ipad.png" height="2048" width="1536"/>
<splash src="resources/ios/splash/Default-Portrait~ipad.png" height="1024" width="768"/>
<splash src="resources/ios/splash/Default#2x~iphone.png" height="960" width="640"/>
<splash src="resources/ios/splash/Default~iphone.png" height="480" width="320"/>
</platform>
</widget>
First try readding your plugin:
$ ionic plugin remove cordova-plugin-splashscreen
$ ionic plugin add cordova-plugin-splashscreen
Then edit the splash image in your resources folder.
Run $ ionic resources --splash in CLI
Rebuild $ ionic build android and run your app
Check Ionic documentation - Icon and Splash Screen Image Generation
If this is not working, you should remove and readd the platform, on which you experiencing the problem.
$ cordova platform remove android (or ios)
$ cordova platform add android (or ios)
Here is your answer!!
If you are using Cordova 6.4.0 (hit cordova -v in your terminal to check the version), you will face this issue(the icons and splash screens won't generate after build)
In order to resolve the issue, you have two options :
change the word density to qualifier in your config.xml. For eg. put
<icon src="resources\android\icon\drawable-ldpi-icon.png" qualifier="ldpi"/> in place of <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>. Build the project. Will work.
Just install the cordova version 6.3.1 by hitting npm install -g cordova#6.3.1 in your terminal. Remove and then add the platform, further build it. Works like a charm!!.
Regards!! :p
After remove and add cordova
$ cordova platform remove android (or ios)
$ cordova platform add android (or ios)
You will get a /res folder with your icons and splash screens. Copy the content from /res and paste into platfomrs/android/res, this will replace the standard icon and splash screens.
Then build your app and you will get your custom images.
I used ionic tab template, without changes.
My Splash-Screen wasn't showing up either (Ionic 3). I found this Link to be very helpfull. These entries in the config.xml did the trick for me:
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
since 07 Nov 2016. Cordova 6.4.0 released with new android version - android#6.1.0.
Most likely you are using android#5 in your cordova(or the old version of android).
Try updating/install the new version of cordova android.
To upgrade:
cordova platform update android#6.1.0
To add it explicitly:
cordova platform add android#6.1.0
https://cordova.apache.org/announcements/2016/11/07/android-release.html
https://cordova.apache.org/blog/
We were trying to update ionic app's splash screen using below configuration system but failed :
Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62
We were able to generate splash screen and fix the issue in below configuration system:
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.6.0
Xcode version: Xcode 8.1 Build version 8B62
i had same problem, i solved manually by going to path MY_PROJECT\platforms\android\res and delete drawable* and mipmap* and then copy drawable* and mipmap* from MY_PROJECT\res and then re-build project again
Check that you have "cordova-plugin-splashscreen" plugin installed (in the plugins/ folder or by running ionic cordova plugins (for Ionic v3+) or ionic plugins command (older versions of Ionic).
If it's not there run:
ionic plugin add cordova-plugin-splashscreen (Ionic v1 - v2)
ionic cordova plugin add cordova-plugin-splashscreen (Ionic v3+)
Without the plugin iOS will still show the splash screen briefly, but Android wouldn't.
add Splash Screen Cordova plugins in your app using the following command
$ionic cordova plugin add cordova-plugin-splashscreen
$npm install --save #ionic-native/splash-screen
Add following line in you config.xml file
<preference name="FadeSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
Also, Remove SplashScreen.hide() in app.component.ts file
More details with example visit: https://answerdone.blogspot.com/2018/02/ionic-3-splash-screen-plugins.html
I am building a small mobile app using Cordova + AngularJS, so far so good. But I spent the whole day trying to get the splash screen to show, and failed.
Here is my global config.xml
<preference name="Fullscreen" value="true" />
<preference name="WebViewBounce" value="false" />
<preference name="DisallowOverScroll" value="false"/>
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="Detect-data-types" value="true"/>
<preference name="Stay-in-webview" value="false"/>
<preference name="Android-targetSdkVersion" value="22"/>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="LoadingDialog" value="Loading, Please wait!"/>
<platform name="android">
<splash src="www/res/screen.png" density="land-hdpi"/>
<splash src="www/res/screen.png" density="land-ldpi"/>
<splash src="www/res/screen.png" density="land-mdpi"/>
<splash src="www/res/screen.png" density="land-xhdpi"/>
<splash src="www/res/screen.png" density="port-hdpi"/>
<splash src="www/res/screen.png" density="port-ldpi"/>
<splash src="www/res/screen.png" density="port-mdpi"/>
<splash src="www/res/screen.png" density="port-xhdpi"/>
<splash src="www/res/screen.png" density="hdpi"/>
<splash src="www/res/screen.png" density="ldpi"/>
<splash src="www/res/screen.png" density="mdpi"/>
<splash src="www/res/screen.png" density="xhdpi"/>
</platform>
I have installed Cordova's splash screen plugin successfully, and the path www/res/screen.png is correct and the screen.png gets moved to the /platforms/android/res/drawable-** folders successfully. I also tried using navigator.splashscreen.show, But still, the screen doesn't show up!
I tried every solution ever posted regarding this problem and it just wont work. The only way I could get the splash screen to show was by using Intel XDK build/icons & splash screen options, but the build process happens at the XDK servers and I wanna be able to just hit cordova run/emulate/build android and see the results with out XDK middling.
I am loosing my mind here, any help would be appreciated.
I am using Corodva 5.0.0, Angular 1.4.4, on an emulator (Intel atom 64), debugging via Chrome device inspection tools.