'Phonegap - add a splash screen for Android app
Could anybody please advise how I can add a splash screen to my HTML5 Phonegap based Android App. I just want it to display for 5 seconds on load. Also - can anybody advise what dimensions the splash screen should be.
Solution 1:[1]
Phonegap (Apache Cordova) documentation has enough details about the splash screen and different resolutions for both Android and iOS at one place.
http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html
Solution 2:[2]
In my Phonegap app, Android version, Eclipse debugger throws tantrums if you set the splash screen or even the 'loading' dialog before calling loadUrl.
Both will work in the actual app installed on a device, but they will break your debugging. So I've put them behind loadUrl, where they can do no harm and still show well before the app itself.
public class App extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html",5000);
super.setStringProperty("loadingDialog", "Starting your app...");
super.setIntegerProperty("splashscreen", R.drawable.splash);
...
}...
Solution 3:[3]
I have also face this issue in Phonegap Android, but now I got solution.
super.setIntegerProperty("splashscreen", R.drawable.splash);(find image under drawable folder named splash,so put splash.png under drawable folder)
super.loadUrl("file:///android_asset/www/index.html",15000);(splash screen will show 15 sec.
Please edit your main Java file under src folder in your project directory:
public class radiobiafra extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html",15000);
}
}
Solution 4:[4]
Using Cordova >= 3.6, and building your app with the Cordova Command-Line Interface, it's possible to configure the splash screen from the config.xml file. This is an example for Android:
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />
There is also a dedicated plugin to show/hide the splash screen programmatically.
See the Cordova documentation for more information.
Solution 5:[5]
This will probably meet your needs. It lets you customise and add all the relevant config.xml setting, images and splashscreens in a nice intuitive interface.
I recommend downloading the file and installing manually. The web based air installer doesn't seem to work.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Rajiv |
| Solution 2 | Wytze |
| Solution 3 | halfer |
| Solution 4 | lifeisfoo |
| Solution 5 | halfer |
