I have done below things to make a simple app just to open a mobile website inside app browser.
Installed Phone Gap Desktop App and created a project
Build using Phone Gap Build and downloaded APK for testing on mobile
Problem : Everything works well expect splash screen is showing
default CORDOVA ICON WITH GREY BACKGROUND
I have replaced all the splash screen image inside \res\screen\android
And updated my config.xml code as well
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/screen-hdpi-landscape.png" density="land-hdpi"/>
<splash src="res/screen/android/screen-ldpi-landscape.png" density="land-ldpi"/>
<splash src="res/screen/android/screen-mdpi-landscape.png" density="land-mdpi"/>
<splash src="res/screen/android/screen-xhdpi-landscape.png" density="land-xhdpi"/>
<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>
<preference name="SplashScreenDelay" value="3000" />
In index.html using below script and it open the URL as expected but splash screen loading default cordova icon with grey background
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
var ref2 = cordova.InAppBrowser.open(encodeURI('https://example.com'), '_blank', 'location=no');
navigator.splashscreen.show();
window.setTimeout(function () {
navigator.splashscreen.hide();
}, 3000);
}
Tried already posted solutions but none of them working for me.
Any help will be appreciated
It's not about cleaning or caching issues at all. The problem is PhoneGap includes all possible launch images in project template by default. These files are under Resources folder and copied to bundle's root folder on build event. Although I properly selected my own launch images in Xcode (Target/Summary screen), default PhoneGap's specific files e.g. Default~iphone.png overridden my files :(
Once issue is identified, you can fix it someway, but I prefer below steps:
Delete all default icons and splashscreen files under
/platforms/ios/AppName/icons and /splash folders. You surely don't
need these placeholder images.
In Xcode, select Targets/AppName, then tab Build Phases, delete all
file names of images in the above step in section Copy Bundle
Resources.
Add your own images files for app icon and launch images here.
Edit Info.plist file (file AppName-Info.plist under
/platforms/ios/AppName/) to include your images, you will need to
use CFBundleIcons and UILaunchImageFile keys. Go to iOS developer
site for reference.
I've been away from my Cordova app for a bit, but just did a fresh clone yesterday and noticed that it's got the "white screen of death" symptoms -- the splash screen displays, the program loads... and then I just get a blank screen. Some more details:
CLI: Cordova 6.1.1, android 5.1.1, ios 4.1.1
I'm not using any special plugins to display a splash screen -- just <splash> elements in my config.xml file.
This is happening in both iOS and Android, both on local builds and using PhoneGap Build (i.e., debug and release).
There are no exceptions of missing resources in the console, either in iOS (using Safari's dev tools) or Android (using Chrome's dev tools).
I've done a diff with my last known working build, and there's really nothing that pops out. I saw an undefined Underscore reference, but I backed that change out and it didn't resolve anything -- I think I'd see the exception in the console, anyway.
Has Cordova / PhoneGap done something recently that might be causing this? Any ideas on how to isolate this one? I'm really stumped.
Well that was ugly. It turned out that there was an exception being thrown, it was just being thrown too early for the browser dev tools to pick it up (Safari, Chrome for iOS and Android, respectively). The exception did show up when I ran things through the browser target (cordova platform add browser, etc.) So that browser platform is useful for something I guess. :-)
In my case, the cordova-sqlite-storage plugin had made a breaking API change that broke the code when I updated everything. The solution was to pin the plugin to an earlier version in the config.xml file.
So, lessons learned:
If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down.
Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.
[another option from #jcesarmobile, below] hitting refresh in the browser dev tools will also kick out the exception. Nice!
I'll be going back in to the config.xml and pinning the other items -- and doing some cleanup as suggested above. Thanks again, everyone.
I manged to run your app this are the steps I followed.
1) First you need to declare Splash screen preference along with splash screen plugin location in your config.xml. This is what I think you are missing
<preference
name="SplashScreen"
value="screen" />
<preference
name="AutoHideSplashScreen"
value="true" />
<preference
name="SplashScreenDelay"
value="5000" />
<feature name="SplashScreen" >
<param
name="android-package"
value="org.apache.cordova.splashscreen.SplashScreen" />
<param
name="onload"
value="true" />
</feature>
2) Declare your splash screens images in config.xml ,which you have already done.
I suggest you to keep images in default density folders of android project (ldpi,mdpi,hdpi,xhdpi etc) instead of screen/android folder as it will simplifiy your project structure.
<!-- you can use any density that exists in the Android project -->
<splash
density="land-hdpi"
src="res/drawable-land-hdpi/splash.png" />
<splash
density="land-ldpi"
src="res/drawable-land-ldpi/splash.png" />
<splash
density="land-mdpi"
src="res/drawable-land-mdpi/splash.png" />
<splash
density="land-xhdpi"
src="res/drawable-land-xhdpi/splash.png" />
<splash
density="port-hdpi"
src="res/drawable-hdpi/splash.png" />
<splash
density="port-ldpi"
src="res/drawable-ldpi/splash.png" />
<splash
density="port-mdpi"
src="res/drawable-mdpi/splash.png" />
<splash
density="port-xhdpi"
src="res/drawable-xhdpi/splash.png" />
</platform>
3) Add Splash screen plugin class into your android project structure under org.apache.cordova.splashscreen package or install splash screen Cordova plugin
https://cordova.apache.org/docs/en/3.1.0/cordova/splashscreen/splashscreen.html
4) Final and most important step you must have cordova.js in your www folder
And after that I was able to run your web app
I am android developer I guess something similar you might need to do for iOS
The only fix that worked for me was found here:
http://www.codingandclimbing.co.uk/blog/ionic-2-fix-splash-screen-white-screen-issue-14
basically edit your config.xml file. The splashscreen setup should look like this:
<preference name="ShowSplashScreen" 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"/>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
</feature>
In my case, i put an ALERT before first screen still mounted.
I had a similar problem while using cordova with ember.js. It was about the url change strategy of my application.
Have a look on this answer, it maybe related with your problem.
Try adding this preference to your config.xml, maybe this is the problem
<preference name="AutoHideSplashScreen" value="true"/>
You should install the splash-screen plugin for both iOS and Android to work properly if you are adding splash in config.xml. or else without splash-screen plugin what you could try to do is making an splash screen with HTML, divide your body in 2 parts: content and login. Then you set the content style display: none. When the app is done loading you just set loading screen display: none and content screen display: block or whatever you want
And you missing below preferences in your config.xml
<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
A missing <meta http-equiv="Content-Security-Policy"> tag on the head caused a white-screen in my case.
I added these lines in config.xml
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
I also have a black screen when I give screendelay as 3000.so I changed to 6000.I think cordova take some time to load your js,css and image files.
In my case, I accidentally commented the state definition in app.js.
My problem was with ES6, it runs perfectly on iPhone and Android 6, but it doesn't work with Android 4 and 5.
I have this situation and solved it.
In my case it was something similar to this code:
$scope.images.push({ id: i, src: "http://placehold.it/50x50" , pstb, trno});
The above code run well on android 7.0 but only white screen after splash on android 4.4.4
Changed to this:
$scope.images.push({ id: i, src: "http://placehold.it/50x50", pstb: pstb, trno: trno});
Run on all devices (at least all my devices)
Not really an answer, but I'll add it to the list of potential experiments here - I never worked out how this was happening, but it was resolved by deleting the entire platforms folder and node_modules, then re-adding the platform.
1>> If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down.
2>>Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.
The Phonegap CLI documentation on the subject of Splashscreens and Icons suggests the following
SplashScreen (string, defaults to splash): The name of the file minus its extension in the res/drawable directory. Various assets must share this common name in various subdirectories.
<preference name="SplashScreen" value="mySplash"/>
I configured my Phonegap CLI project as follows
project folder
|
res
|
---port-ldpi.png
|
---land-ldpi.png
|
--- ...
|
--- land-xhdpi.png
With that done I wrote up my project level config.xml file
<preference name="SplashScreenDelay" value="12000"/>
<preference name="SplashScreen" value="screen"/>
<splash src="res/port-ldpi.png" density="port-ldpi"/>
<splash src="res/land-ldpi.png" density="land-ldpi"/>
<splash src="res/port-mdpi.png" density="port-mdpi"/>
<splash src="res/land-mdpi.png" density="land-mdpi"/>
<splash src="res/port-hdpi.png" density="port-hdpi"/>
<splash src="res/land-hdpi.png" density="land-hdpi"/>
<splash src="res/port-xhdpi.png" density="port-xhdpi"/>
<splash src="res/land-xhdpi.png" density="land-xhdpi"/>
I then issued a phonegap build android --release -d >> /tmp/result.txt and examined the output in /tmp/result.txt. I showed the following lines
copying image from /path/to/my/project/res/port-ldpi.png to
/path/to/my/project/platforms/android/res/drawable-port-ldpi/screen.png
copying image from /path/to/my/project/res/land-ldpi.png to
/path/to/my/project/platforms/android/res/drawable-land-ldpi/screen.png
.....
copying image from /path/to/my/project/res/land-xhdpi.png to
/path/to/my/project/platforms/android/res/drawable-land-xhdpi/screen.png
Finally, I examined the generated APK by opening it in 7-zip. In the res folder I found the following
drawable-port-ldpi-v4/screen.png
drawable-land-ldpi-v4/screen.png
...
drawable-land-xhdpi-v4/screen.png
The images beign the ones I supplied in my /project/res folder. Finally, I checked the output to ensure that it was terminating with a Command finished with error code 0: line.
I then installed my application and ran it - no splash screen.
For good measure - though it makes little sense as a requirement - I retried the above after wrapping the splash & icon bits of the config.xml file in a
<platform name='android'>
</platform>
section - it made no difference. The strange thing is that icons assigned in precisely the same way work perfectly. I wanted to be sure that I was in fact supplying a splash screen for the resolution of my Huwaei Holly phone where I was testing it all so I used slightly different icon images. The installation displayed the XHDPI icon so by rights when the app starts up it should display the XHDPI splash screen
This is a frequently discussed subject but I fail to see that I am doing something wrong here.
For completeness I should mention
Phonegap CLI version : 5.3.6
Tested on Honor Holly, Android version 4.4.2
I am posting the answer for the benefit of anyone running into this thread. The Cordova/Phonegap CLI documentation on the subject of splashscreens is very confusing. Here are a few tips to help you along
When you build the config.xml file you need to specify the locations of the various splashscreen images in the format <splash src="res/{$name}.9.png" density="{$name}"/>. The .9. is optional - use if if you are using 9 patch images
You also need to have the line <preference name="SplashScreen" value="screen"/>. This is invariant. Contrary to what the documentation seems to imply you have no choice over the value - screen and only screen will work.
The original location of the images does not matter - it is best to place it in a folder inside the project folder, res in my case. If you place it inside the www folder you end up with two copies of your image - one of which is never used.
When Phonegap CLI builds your project it will copy your images to platforms/android/res/drawable-port|land-??dpi-v4. I am not sure why v4 but that is the wya it is. It is these images that are used to show the splash screen
most important of all On the Android splash screens do not show up at startup automatically. For them to show up you must do two things
Include the cordova-plugin-splashscreen plugin in your project
Call navigator.splashscreen.show() - typically from the deviceReady event
Finally, to control the duration of the splash display you need to specify <preference name="SplashScreenDelay" value="..."/> where the value is in milliseconds.
It would help a lot of developers if the Cordova documentation had the grace to mention that on the Android the splashscreen does not display automatically.
I'm having a couple of issues with the Android splash screen using PhoneGap 3.5.0. When I do a build, I'm seeing some weird results with the splash screen files in platforms/android/res:
Some folders copy over the splash.png file as expected (drawable, drawable-land, drawable-hdpi, drawable-ldpi, drawable-mdpi, drawable-xhdpi)
Some folders copy over splash.png and also include a default PhoneGap splash screen with the name screen.png (drawable-land-hdpi, drawable-land-ldpi, drawable-land-mdpi, drawable-land-xhdpi)
Some folders only include a default PhoneGap splash screen with the name screen.png (drawable-port-hdpi, drawable-port-ldpi, drawable-port-mdpi, drawable-port-xhdpi)
The second issue is that despite splash images being in the folders, when I test the app I see a black screen rather than either my custom splash screens or a default PhoneGap splash screen.
I've found several articles around this issue, but none of the fixes worked for me. Some of the things I've tried included:
Pare down the number of image options and use a 9-slice image (Black splash screen - Phonegap Build (Android))
Swapping :qualifier and :density in my config.xml (http://phonegap.com/blog/2014/04/11/phonegap-build-adds-some-new-features/)
Adding the org.apache.cordova.splashscreen plugin
Adding SplashScreen and SplashScreenDelay preferences to my config.xml (also in conjunction with the above) (phonegap dont show splashscreen)
A few other notes:
The splash screen works fine in the iOS build.
I'd like to solve this in the PhoneGap build... I'd like to avoid editing Android-specific files
I wonder if it's possible that I need to clear out a cache somewhere. I've had success with the Android splash screen in earlier versions of this project and have since updated my versions of PhoneGap.
I have a grunt-phonegap setup going, but I see the same errors if I use phonegap local build rather than grunt platform-build.
My splash links look like <gap:splash src="www/res/screen/android/drawable-land-hdpi/splash.png" gap:platform="android" gap:qualifier="land-hdpi" />
If anybody has any suggestions, I'd love to hear them. Thanks!
If that can help you when I used qualifier instead of density, if I want that the Splash Screen work I have to configure :
<preference name="SplashScreen" value="splash" />
instead of
<preference name="SplashScreen" value="screen" />
In the config.xml add the following keys:
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>
<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"/>
I tried everything, and then I figured to ignore the minimum size and make my splash.png image in my resources folder 5000px by 3000px. Then it worked. So: If all else fails, try making the splash image ENORMOUS.
I have an Android Phonegap proyect and I'm trying to use the Splashscreen plugin Cordova provides. I think I have everything correctly set... Here are the pieces of code I think are relevant.
Config.xml
<widget ...>
...
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="15000" />
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
</widget>
Index.html
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.splashscreen.hide()
}
</script>
I have correctly installed with the CLI the plugin and the splash itself is in the res/drawable* folders in the Android project as I think it should be, but regardless of what I try to do, the splash is not showing. Not even a default one. Not even if I disable the navigator.splashscreen.hide() function (in case it was too fast).
I'm absolutely lost now, have been trying tweaks for a week but I just can't see it.
I'm using cordova v3.6.3 in my android project.
I read a API & Plugin Documentations but, I confused the some options in config.
but, I found a perfect solution.
1. above all, you don't need to use
"navigator.splashscreen.hide()" or ".show()" in Android project.
2. refer my directory structure for understanding clearly.
3. Add following codes into your config.xml file.
※ Do not change the value="screen".
you just change the src and delay value for your splashscreen image.
[Config.xml]
<platform name="android">
<splash src="www/res/screen/android/screen-default.png" />
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="4000" />
4. delete a "screen.png" file from drawable directory for understanding clearly.
5. build your project on your command line (cordova build android)
and, look again drawable directory.
I'll promise, you'll success. :-)
I was having the same issue after the 2.5.1 CLI update. If i run the same project in the VisualStudio ionic simulator all works fine. It also works fine when I run the app in the bowser with Telerik Platform. I just need to comment out navigator.splashscreen.hide(); in my project for the latest CLI simulator or I just get a plain white screen.
James