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?
Related
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>
My app keeps using the default cordova icon and splash screen. Upon digging, what should happen is all of my icon/splash get copies to platforms/android/res/. When I look in there, it's just the default cordova ones. However, in my resources/android/ all of my custom ones are there.
Working fine for iOS, not fine for Android at. I am running Cordova CLI 6.4.0.
I have all the custom icons and splash images setup in correct directory structure, and receive no errors during platform add or build android
Below is my config.xml
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
<preference name="FadeSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0" />
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
Same exact exact setup for iOS, and works perfectly there
I've triple checked the paths and everything is correct, and my custom icons are indeed in the indicated locations, but simply not copied over during build
I've tried several times to remove and add android platform, then build, same with cordova-plugin-splashscreen
Both the icon and the splash screen are not working on Android
And here's a screencap showing the folder layout, and the unfortunately incorrect images.
Update made some progress but not quite there. I replaced "qualifier" with "density" in my config.xml. Now what it does it create a correct looking "res" folder, but it puts it in the root of my project instead of platforms/android. It also creates platforms/android/res but all of the images in there are the default Cordova ones. If I move the new folder /res (my custom icons) into /platforms/android (default cordova icons) before build then the app shows my correct stuff. I guess it's a working workaround but an annoying one... and to note; I delete the /res folder but cordova platform add android builds it, just seems to create it in the wrong directory.
This is an issue in cordova-android solved in the version 6.1.0.
The recommended steps are:
cordova platform update android#6.1.0 --save
cordova platform rm android
cordova platform add android
Source: https://github.com/apache/cordova-android/pull/343
I have the same problem, If you find a solution tell me please :)
EDIT
I Solved updgrading my version of android
cordova platform update android#6.1.0
I had this problem some time before and I, and found two ways to pass over.
Upgrade Cordova Platform: This is the recomended, I believe that you upgrade to Cordova 6.4.x but not your Platform, please try: cordova platform update android#latest
OR
Downgrade Cordova CLI: Sometimes, the prev step does not work, so you have to do something that is disrecomended, downgrade cordova to work npm install -g cordova#6.3.1 (Note => CLI 6.3.1 is just the version I believe could work)
I have a Cordova app running Cordova CLI 6.4.0. During load, there is a blank white screen for a solid 4-6 seconds on load after the splash screen. This same thing happens during app reload. No events fire from the app, either before or inside platform.ready event. After searching there seems to be some success by people for similar issues, all centered around the splash screen the below config options, none of the suggestions or ideas have worked.
Update
I seem to have made some progress and I think I understand more of what's going on here. Per another post here I added the below lines to my config.xml
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000"/>
The behavior now, with those two, is that the Splash Screen is displayed (for a long time, usually around 9 seconds), then the Splash goes away and my app loads. So it's no longer a white screen of evil but just a very slow to load app that is my problem.
/Update
Splash Screen -> 4-6 seconds blank white screen -> Then the app loads and deviceReady fires. This happens with SplashScreenDelay=2000
Or it will not show the splash screen at all and instead have 8-9 seconds of the blank white screen before the app loads. This happens with SplashScreenDelay=0
I have console.logs in my main app's constructor and on platform.ready, neither fire until the white screen of doom is resolved and gone away.
I have tried the below options
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
and
<preference name="SplashScreenDelay" value="0" />
It's very confusing because it's not actually my app that's being slow... it's just the loading bits, with a blank white screen between the splash page and app load before anything else happens. I'm open to trying out any ideas as it's basically un-releasable in this state.
This does not happen at all on iOS, with the build and settings all identical, it's an Android specific issue. The device I am running on is a Moto E2.
I am using Ionic and below is a list of included plugins, as it seems that's the most likely culprit at this time. I will have to test everything out without certain plugins to see how it performs.
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.7.4 "Facebook Connect"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
And here's my full icon/splash definitions.
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
When you build the apk-file, be sure to include "--prod" in the command:
ionic cordova build --release --prod android
This optimizes performance and decreases boot-time from 15 seconds (debug build) to 3 seconds (production build) in our app.
Found one some other SO answer, but I have solved with the below
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000"/>
The app still takes forever to load (usually around 9 seconds), but I avoid the white screen nonsense at least.
We can fast the loading of application by reducing the assets. But if it is not possible then we can atlease improve User experience(instead of showing blank screen, we can show splashscreen until all assets were loaded).
In config.xml, set auto splashscreen to false.
<preference name="AutoHideSplashScreen" value="false" />.
Create a separate javascript file for App specific events and link this file in index.html
in the javascript file, Catch DeviceReady event. In DeviceReady event handler, hide splash screen. See the code below.
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
//You can register other plugin specific events here and handle them.
},
onDeviceReady: function() {
navigator.splashscreen.hide();
}
}
};
app.initialize();
I have experienced this with Cordova before. I believe one way I solved it was to initially load an empty page, then redirect to the actual app page. You might give that a try? (It's possible that you will need to wait for the deviceready event before redirecting, not sure)
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
I'm building a iOS and Android app (with ionic framework and Adobe Phonegap Build), but can't seem to get the splash screens showing up in Android here's my config.xml:
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1000" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="icons/splashscreen/port-ldpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="icons/splashscreen/port-mdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="icons/splashscreen/port-hdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="icons/splashscreen/port-xhdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xxhdpi" src="icons/splashscreen/port-xxhdpi.png" />
The splash screen images are sizes like this:
port-ldpi.png = 240x320
port-mdpi.png = 320x480
port-hdpi.png = 480x800
port-xhdpi.png = 720x1280
port-xxhdpi.png = 1280x1920
The path to the images are correct. On iOS it working without any problems.
Any suggestions how to solve this problem? :S
You don't have the default splash tag which is
<gap:splash src="splash.png" />
It's in the documentation: http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
You can look at my example demos.
https://github.com/jessemonroy650/Phonegap-Splashscreen-Test
It works for both Android and iOS. Implemenation notes are included.
NOTE: AndroidManifest.xml is NOT needed.
Also the splash image MUST be the correct size or at least the correct size ratio so it can stretch it.
Example:320x240 will work for 640x480, etc. Otherwise, you need to use a 9-patch image. I have not tested 9-patch.