How to Remove Splash Screen?

  • 1
  • Question
  • Updated 6 years ago
  • Doesn't Need an Answer
Hi,

How can I remove splash screen from the app?
Currently the app use the default splash screen.

Please advise.

Thanks.
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You don't want to remove the splash screen...you just want to replace it with your own. At least iOS requires a splash screen.

Explanation on how to do that can be found in the Docs:
http://docs.build.phonegap.com/en_US/...
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
Actually I want to remove the default splash screen. I already created the animated loading screen in the index.html page, so I don't want the splash screen.
Is it possible to remove the splash screen?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, you can hide it immediately, so it looks like you don't have a splash screen. Would that do?
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
Yes, please.

I tried this, but didn't work.



<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available
//
function onDeviceReady() {
navigator.splashscreen.hide();
}

</script>



source: https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That should do nicely.
Do you get any error messages? What is the status of the navigator and navigator.splashscreen objects within the onDeviceReady() function?
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
No error message.
I installed the app to the iPhone and the app opens without showing any error.
But the default cordova splash screen is shown before my loading page appear. It's not hidden.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, javascript error messages aren't usually shown in the app. You must debug to find them, for instance using the safari console, by testing in a normal webbrowser or by adding alerts in your code showing object status and error messages (from a try-catch-block).

The fact that a default screen appears, is correct. You haven't defined any icon or splash screen in your assets and within the config.xml
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
Just now I have put:

in the config.xml and I have created splash.png image (the first frame of the animated loading page) and put in the root folder (in the same folder as index.html & config.xml).

But when it's loaded in iPhone it's still shows the Cordova Default Splash.

I'm not sure how to debug .ipa in browser. I'm new with PhoneGap, just started using this yesterday.
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
Sorry, forgot the CODE tag.

I have put the following in config.xml.

<gap:splash src="splash.png" />
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Could you please post a screenshot of your zip file directory structure?
2. Have you included the gap: namespace in your widget element?
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
1. Here's the screenshot.


2. This is my current config.xml.


<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets"
id = "io.cordova.helloCordova"
version = "2.0.0">
<name>Project X</name>

<description>
SnP App
</description>

<author href="http://cordova.io" email="dev@cordova.apache.org">
ME
</author>

<access origin="*"/>

<content src="index.html" />
<gap:splash src="splash.png" />
<preference name="fullscreen" value="false" />
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

</widget>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
OK, thanks.

1. You should delete cordova.js
Only a reference to cordova.js or phonegap.js is required, not the file itself.

2. You don't have the gap namespace included, which is why the gap:splash and gap:plugin elements are not recognized.
Make sure you validate your XML using the W3C validator.

EDIT: ...and in order to hide your splashscreen, you need the splashscreen plugin, which you have not included, yet.
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
Thanks.
After adding the gap namespace, it can read my custom splash.png.

Just now I tried to hide the splash page, by removing:
<gap:splash src="splash.png" />
and adding:
<gap:plugin name="org.apache.cordova.splashscreen">

I also have removed the cordova.js.

However, the splash screen hide script still doesn't work. Now the default splash screen is displayed on app load.
The app also still overlaying the status bar.

Here's my current config.xml.

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
version="2.0.0"
versionCode="1"
id="xx.xx.xx">
<name>Project X</name>

<description>
SP App
</description>

<author href="http://cordova.io" email="dev@cordova.apache.org">
ME
</author>

<access origin="*"/>

<content src="index.html" />

<gap:plugin name="org.apache.cordova.splashscreen">

<preference name="fullscreen" value="false" />
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

</widget>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
However, the splash screen hide script still doesn't work. The app also still overlaying the status bar.
So, it seems that your plugins are still not active.
What is the type of the navigator- and navigator.splashscreen-objects? Does the hide() method exist at that point?

You may also want to include:
    <preference name="ios-statusbarstyle" value="black-opaque" />

<preference name="auto-hide-splash-screen" value="false" />


Side remark. why are you using a previous version of the statusbar plugin?
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
I just put the following script in the ... tag:



<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available
//
function onDeviceReady() {
navigator.splashscreen.hide();
}

</script>
</head>



Regarding the version 0.1.4, I am just following this:
https://build.phonegap.com/plugins/715
What is the latest version? Where can I find it?

Just now I included this, but also doesn't work.


<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="auto-hide-splash-screen" value="false" />
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. As I suggested in the other thread: use
https://build.phonegap.com/plugins/505 , not the plugin you are using now.

2. What is the type of the navigator- and navigator.splashscreen-objects? Does the hide() method exist at that point?
    

function onDeviceReady() {
alert("Hidetype=" + typeof(navigator.splashscreen.hide));
alert("Splashtype=" + typeof(navigator.splashscreen));
alert("Navtype=" + typeof(navigator));
navigator.splashscreen.hide();
}
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
1. Just now, I changed to <gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />, but still doesn't work. The status bar is still displayed (translucent) behind the app screen.

2. Here are the alerts:
Hidetype=function
Splashscreentype=object
Navigatortype=object

Here is my current config.xml:


Project X

SP App

ME

Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
config.xml


<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
version="2.0.0"
versionCode="1"
id="xx.xx.xx">
<name>Project X</name>

<description>
SP App
</description>

<author href="http://cordova.io" email="dev@cordova.apache.org">
ME
</author>

<access origin="*"/>

<content src="index.html" />

<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="auto-hide-splash-screen" value="false" />

<gap:plugin name="org.apache.cordova.splashscreen">

<preference name="fullscreen" value="false" />
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

</widget>

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I see. Have you validated your XML using the W3C validator?
Photo of Mark Lauw

Mark Lauw

  • 17 Posts
  • 0 Reply Likes
It showed 1 error. No closing "/" in <gap:plugin name="org.apache.cordova.splashscreen">.
Just now I fixed it and rebuilt and tested again, but there are no changes.
Status bar is still overlaid and default splash screen is still displayed.

The validator still shows 2 warnings:
1. No DOCTYPE found! Checking XML syntax only.
The DOCTYPE Declaration was not recognized or is missing. This probably means that the Formal Public Identifier contains a spelling error, or that the Declaration is not using correct syntax, or that your XML document is not using a DOCTYPE Declaration.

Validation of the document has been skipped, and a simple check of the well-formedness of the XML syntax has been performed instead.

2. Info Using Direct Input mode: UTF-8 character encoding assumed
Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

Not sure whether both warnings need to be resolved. The sample config.xml also has both warnings if validated.
https://github.com/phonegap/phonegap-start/blob/master/www/config.xml