Apache Cordova splash screens not showing in Android
Solution 1
Just had this problem myself. Change this
<preference name="SplashScreen" value="splash"/>
to
<preference name="SplashScreen" value="screen"/>
This fixed it.
Solution 2
I had to install the splash screen plugin to make it work
cordova plugin add cordova-plugin-splashscreen
as well as adding
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="2000" />
Solution 3
For new comers and those who are still facing this issue
1) Add Splash screen preference in config.xml
<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 in config.xml
<!-- 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) Finally Add this class into your android project structure under org.apache.cordova.splashscreen package
or
install it as Cordova plugin.
Solution 4
I had a similar issue on android, I put the Splash Screen Directly into res/drawable-hdpi
and got the following error during cordova build.
res/drawable-hdpi-v4/DocBackground.png: Invalid file name: must contain only [a-z0-9_.]
When I de-capitalised the file name, in ~project/icons
, cordova build copied them to the res/drawable
folder & splash screen worked.
Solution 5
I'd faced same issue and I've fixed it by using following configuration :-
install splash screen plugin
cordova plugin add cordova-plugin-splashscreen
Next we need to add following preference in config.xml,
<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true" />
Add the Splashscreen images to folders like below
<platform name="android">
<splash qualifier="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />
<splash qualifier="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />
<splash qualifier="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />
<splash qualifier="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />
<splash qualifier="land-xxhdpi" src="res/screen/android/splash-land-xxhdpi.png" />
<splash qualifier="land-xxxhdpi" src="res/screen/android/splash-land-xxxhdpi.png" />
<splash qualifier="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
<splash qualifier="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
<splash qualifier="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
<splash qualifier="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
<splash qualifier="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png" />
<splash qualifier="port-xxxhdpi" src="res/screen/android/splash-port-xxxhdpi.png" />
</platform>
land-ldpi is not a density but a qualifier
Therefore the correct each splash tag as below:
<splash qualifier="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />
After above configuration, below step is very important,
<platform name="android">
<preference name="SplashScreen" value="screen" />
</platform>
Related videos on Youtube
Mark Veenstra
I love to work with XML, XSLT and ofcourse XPath. Also interested in bash (scripting) and some of it tools like awk, sed, find and grep. Currently working on a project with Laravel, AngularJS, Ionic & Apache Cordova.
Updated on February 28, 2020Comments
-
Mark Veenstra about 4 years
I am running Apache Cordova 3.6.3-0.2.13. And I try to get the splash screens working. I have followed the documentation on http://cordova.apache.org/docs/en/3.6.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens. And the icons are working, but no success for the splash screens. We are also using the Ionic framework (version 1.2.8) on top of Cordova.
What I have done:
Added icons and splash screens to config.xml from the project root:
<preference name="SplashScreen" value="splash"/> <preference name="SplashScreenDelay" value="10000"/> <platform name="android"> <icon src="icons/icon.png"/> <!-- you can use any density that exists in the Android project --> <splash src="icons/android-splash-land-hdpi.png" density="land-hdpi"/> <splash src="icons/android-splash-land-ldpi.png" density="land-ldpi"/> <splash src="icons/android-splash-land-mdpi.png" density="land-mdpi"/> <splash src="icons/android-splash-land-xhdpi.png" density="land-xhdpi"/> <splash src="icons/android-splash-port-hdpi.png" density="port-hdpi"/> <splash src="icons/android-splash-port-ldpi.png" density="port-ldpi"/> <splash src="icons/android-splash-port-mdpi.png" density="port-mdpi"/> <splash src="icons/android-splash-port-xhdpi.png" density="port-xhdpi"/> </platform>
Ofcourse the
icons
directory exists and also the files are in place. When I build the project withionic run android
orcordova run android
. The build process also creates the icons and splash screens into theplatforms/android/res/drawable
directory!Also the config file located at
platforms/android/res/xml/config.xml
is correctly updated and the<preference>
and<icon>
and<splash>
elements are in place.I also tried with the
org.apache.cordova.splashscreen
plugin and also no success. I have added the plugin withionic plugin add org.apache.cordova.splashscreen
and also addedonDeviceReady
the codenavigator.splashscreen.show();
. But this also shows nothing.What am I missing here?
-
Mark Veenstra over 9 yearsAlso note if you use Ionic also, recently they added creating icons and splashscreens from the CLI: ionicframework.com/blog/automating-icons-and-splash-screens
-
Ian Pinto almost 8 yearscordova plugin add cordova-plugin-splashscreen
-
-
flyingace about 9 yearsThat did it for me. It's a pity that not notification is given for having the files named improperly in the folder listed in config.xml.
-
Mark Veenstra over 8 yearsPhoneGap != Apache Cordova
-
ajaristi over 8 yearsThis works for me, but i had to install cordova-plugin-splashscreen
-
Shai UI over 8 yearsI can attest that you need to rename it from "splash" to "screen" in config.xml AND make sure you 'cordova plugin add cordova-plugin-splashscreen'
-
Al-Mothafar about 8 yearsI love full answers, my issue just was missing ` <feature name="SplashScreen" > <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" /> <param name="onload" value="true" /> </feature>`
-
Atif Hussain over 7 yearsThis works, but Cordova splash screen provides 5 to 6 different style of animation on splash screens. however, only 1 type "screen" is working correctly. and it also has different animation behavior on Android and IOS platforms.
-
Adam Szmyd over 7 yearsthis works but bare in mind that some people had also browser platform installation. The browser will try to reach a
hostname/screen
file. My solution was to make a specific configuration inconfig.xml
for browser:<platform name="browser">...<preference name="SplashScreen" value="assets/some-real-image.png"/>...
and leave<preference name="SplashScreen" value="screen"/>
in root widget. -
Nimesh khatri almost 6 yearsThis solution doesn't works for me, even I've tried everything nothing works..ios shows splash screen but android does not :(