I'm using Cordova to build an app running on both iOS and Android.
Cordova version 7.0.1 - Platform Android version 6.2.3
I have a problem on Android about the splashscreen size. I have 6 different PNG size for each density as you can see in the config.xml below.
<!-- ANDROID SPLASH PREF -->
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="4000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<!-- ANDROID SPLASH PNG -->
<splash src="www/splashs/android/splash-land-hdpi.png" density="hdpi" />
<splash src="www/splashs/android/splash-land-ldpi.png" density="ldpi" />
<splash src="www/splashs/android/splash-land-mdpi.png" density="mdpi" />
<splash src="www/splashs/android/splash-land-xhdpi.png" density="xhdpi" />
<splash src="www/splashs/android/splash-land-xxhdpi.png" density="xxhdpi" />
<splash src="www/splashs/android/splash-land-xxxhdpi.png" density="xxxhdpi" />
Well, when I launch the app on my Lenovo tablet, which has a 800x1280 resolution, it display the wrong PNG file. The app decide to show the LDPI one, with a resolution of 400x240.
The result is of course really bad and very pixelated, I can't release my app like that.
I tried on a smartphone Galaxy J, everything works fine, the good PNG size is selected during the splashscreen.
I tried to remove all PNG file except the higher one (1920x1280 xxxhdpi). The app display it but the result is even worst. The image is really even more pixelated... really weird problem.
I didn't find any solution yet on the web. Any ideas?
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 have tried everything my config.xml code is this:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
<splash src="res/screen/android/screen-hdpi-portrait.png" density="port-hdpi"/>
<splash src="res/screen/android/screen-ldpi-portrait.png" density="port-ldpi"/>
<splash src="res/screen/android/screen-mdpi-portrait.png" density="port-mdpi"/>
<splash src="res/screen/android/screen-xhdpi-portrait.png" density="port-xhdpi"/>
</platform>
Please help someone
In android you will need to write the code for splash screen in src/<yourpackagefolder>/<yourprojectname>.java file
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
super.setIntegerProperty("splashscreen", R.drawable.screen);
super.loadUrl("file:///android_asset/www/index.html",60000);
}
Where you need to add the splashscreen file name "screen.png" in res/rawable-land-hdpi & drawable-land-ldpi & drawable-land-mdpi & drawable-land-xhdpi & drawable-port-hdpi & drawable-port-ldpi & drawable-port-mdpi & drawable-port-xhdpi. As these are the different screen sizes.
Same way you can add the icons into drawable-<resolution> folders respectively