Android splash screen not working

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
I'm building a iOS and Android app (with ionic framework), but can't seem to get the splashscreen showing up in android here's my config.xml:

<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.
Photo of Michael Falck Wedelgård

Michael Falck Wedelgård

  • 15 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You have plugin name="cordova-plugin-splashscreen" spec="3.0.0"

How did you get to that version number? According to npm, 3.2.0 is the latest version and 3.0.0 was never released.

You could also check the plugins tab of your PGB app's page to see what is and what is not installed and under which version).

=====

Next:

1. You are using 'density=...'
According to the PGB Docs, this should be 'qualifier=...'

2. Just to be sure, check the dimensions and the names of the graphics files. Typing errors are easily made.

3. You have one default splash, referenced as
<splash src="resources/android/splash/splash-port-hdpi.png" />
According to the PGB Docs, the default splash should be named 'splash.png' and should be located at the root.

======
No Luck Petra
In software development, you shouldn't be counting on luck. Rather, read and apply the documentation.
Photo of Munish Kumar

Munish Kumar

  • 7 Posts
  • 0 Reply Likes
running
npm view cordova-plugin-splashscreen versions
lists the versions of plugin and I just degraded it to 3.0.0 (mentioned in a thread).

Thanks Petra.. changing 'density = ' to 'qualifier = ' , everything is working now .

I have placed my default splash screen under root folder with a name 'splash.png'
===================
Thank you not just for resolving the issue rather helping me understand


In software development, you shouldn't be counting on luck. Rather, read and apply the documentation.


I have written down your lines on my desktop and shown it to everyone who surrounds me :) Thanks for being around.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You're welcome. Glad you have it working now.
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
I can't get the Android Splash to work for the life of me. I am following the documentation in:
https://github.com/apache/cordova-plu...

I am using PGB cli-6.0.0
cordova-plugin-splashscreen 3.2.0

I have tried other versions of the plugin... Any ideas?

Here is my config...


<?xml version='1.0' encoding='utf-8'?>
<widget id="<%=Settings.app_name_space%>" version="<%=Settings.app_version%>" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

<preference name="phonegap-version" value="cli-6.0.0" />

<name><%=Settings.app_name%></name>
<description>
Vimify
</description>
<author email="info@vimify.com" href="https://www.vimify.com/">
Vimify
</author>

<!-- Multi-Platform settings -->
<preference name="orientation" value="portrait" />
<preference name="webviewbounce" value="false" />
<preference name="disallowOverscroll" value="true" />
<preference name="DisallowOverscroll" value="true" />

<platform name="android">
<preference name="android-build-tool" value="gradle" />
<!-- <preference name="fullscreen" value="false" /> -->

<icon src="res/icon/android/ldpi_36px.png" qualifier="ldpi" />
<icon src="res/icon/android/mdpi_48px.png" qualifier="mdpi" />
<icon src="res/icon/android/hdpi_72px.png" qualifier="hdpi" />
<icon src="res/icon/android/xhdpi_96px.png" qualifier="xhdpi" />
<icon src="res/icon/android/xxhdpi_144px.png" qualifier="xxhdpi" />
<icon src="res/icon/android/fr-xxhdpi_144px.png" qualifier="fr-xxhdpi" />
<icon src="res/icon/android/xxxhdpi_192px.png" qualifier="xxxhdpi" />

<!-- <splash src="res/screen/android/splash-land-hdpi_320x200px.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi_480x320px.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi_800x480px.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi_1280x720px.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-land-xxhdpi_1600x960px.png" density="land-xxhdpi"/>
<splash src="res/screen/android/splash-land-xxxhdpi_1920x1280px.png" density="land-xxxhdpi"/> -->

<splash src="res/screen/android/splash-port-ldpi_200x320px.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi_320x480px.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-hdpi_480x800px.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-xhdpi_720px1280px.png" density="port-xhdpi"/>
<splash src="res/screen/android/splash-port-xhdpi_720px1280px.png" density="port-xhdpi"/>
<splash src="res/screen/android/splash-port-xxhdpi_960px1600px.png" density="port-xxhdpi"/>
<splash src="res/screen/android/splash-port-xxxhdpi_1280px1920px.png" density="port-xxxhdpi"/>

</platform>

<!--
********************************************
*
* Plugins
*
********************************************
-->

<plugin name="cordova-plugin-vibration" source="npm" version="2.1.0" />
<plugin name="cordova-plugin-device" source="npm" version="1.1.1" />
<plugin name="cordova-plugin-inappbrowser" source="npm" version="1.3.0" />
<plugin name="cordova-plugin-email" source="npm" version="1.1.0" />
<plugin name="cordova-plugin-camera" source="npm" version="2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" version="1.2.0" />
<plugin name="cordova-plugin-dialogs" source="npm" version="1.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" version="1.2.0" />
<plugin name="cordova-plugin-x-socialsharing" source="npm" version="5.0.11" />

<!-- *********************************************************************
**** Keyboard -->
<plugin name="ionic-plugin-keyboard" source="npm" version="2.0.1" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<preference name="android-windowSoftInputMode" value="adjustPan" />

<!-- *********************************************************************
**** Custom Url -->
<plugin name="cordova-plugin-customurlscheme" source="npm" version="4.1.5">
<param name="URL_SCHEME" value="<%= Settings.app_custom_url %>" />
</plugin>

<!-- *********************************************************************
**** Push Plugin -->
<plugin name="phonegap-plugin-push" source="npm" version="1.5.3">
<param name="SENDER_ID" value="<%=Settings.push_notifications.sender_id%>" />
</plugin>

<!-- *********************************************************************
**** File -->
<plugin name="cordova-plugin-file" source="npm" version="4.1.1" />
<preference name="iosPersistentFileLocation" value="Library" />
<preference name="AndroidPersistentFileLocation" value="Internal" />
<preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />

<!-- *********************************************************************
**** Video Thumbnail -->
<plugin name="cordova-plugin-photokandy-video-thumbnail" source="npm" version="2.1.0" />

<!-- *********************************************************************
**** Whitelist -->
<plugin name="cordova-plugin-whitelist" source="npm" version="1.2.1" />

<!-- *********************************************************************
**** Status Bar -->
<plugin name="cordova-plugin-statusbar" source="npm" version="2.1.2" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
<platform name="android">
<preference name="StatusBarBackgroundColor" value="#000000" />
</platform>
<platform name="ios">
<preference name="StatusBarBackgroundColor" value="#FFFFFF" />
</platform>

<!-- *********************************************************************
**** Splash Screen -->
<platform name="ios">
<plugin name="cordova-plugin-splashscreen" source="npm" version="3.2.1" />
</platform>
<platform name="android">
<plugin name="cordova-plugin-splashscreen" source="npm" version="3.2.1" />
<!-- <plugin name="cordova-plugin-splashscreen" spec="2.1.0" source="pgb" /> -->
</platform>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="500" />
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="true" />
<!-- <preference name="SplashScreen" value="screen" /> -->
<preference name="SplashScreenDelay" value="10000" />

<!-- *********************************************************************
**** Facebook -->
<plugin spec="https://github.com/Telerik-Verified-Plugins/Facebook.git#1.0.1.1" source="git">
<param name="APP_ID" value="<%=Settings.facebook.app_id%>" />
<param name="APP_NAME" value="<%=Settings.facebook.app_name%>" />
</plugin>

<platform name="ios">
<!-- *********************************************************************
**** Background Audio -->
<plugin name="nl.kingsquare.cordova.background-audio" source="npm" version="1.0.1" />
</platform>

<platform name="android">
<plugin name="cordova-plugin-crosswalk-webview" source="npm" version="1.5.0" />
<!-- <plugin name='org.crosswalk.engine' version='1.3.0' source='pgb' /> -->
<preference name="CrosswalkAnimatable" value="false" />
</platform>

</widget>

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You are using the 'density' attribute instead of 'qualifier'.
See the Icons and Splashscreens section of th PGB Docs.
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
Yes, I tried switching to qualifier... per the solution above. But, that did nothing. I was hoping I was missing something in the documentation. It seems like this is working for other people using "density".
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What happens if you uncomment the SplashScreen preference?
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
Nothing... I commented it out because in the documentation:

"Note: SplashScreen value should be absolute in order to work in a sub-page. The SplashScreen value is used only for the browser platform. The value will be ignored for other platforms."
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
There's something else in the docs for Android, but it doesn't really make sense, because 1 splashscreenname would be useless for multiple dimensions/quelifiers unless you use one single 9-patch png.

Anyway, is your zip file available online somewhere? If so, please post its url and I'll be happy to have a look.
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
zip file? My .apk?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No, not your apk.
What is it you are uploading to Phonegap Build in order to have your apk generated?
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
Petra! Thank you for the offer!

I use the phonegap cli to remote build. So I have actually never uploaded a zip file. I am assuming it's the www folder zipped up.

https://drive.google.com/file/d/0B8jg...

Let me know when you download so that I can remove from the public space.
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Ben,

1. You appear to be lost here. This is the Phonegap Build forum. PGB requires a zip file or a git repo. You are building with CLI

2. As far as I know, CLI requires the config to be in the project main directory, not in /www. The icon and splashes paths should start with "www/"

3. Since you are only building for portrait orientation, I would remove the "port-" prefix from all splash 'densities'. Should make a difference.

4. You have <splash src="res/screen/android/splash-port-xhdpi_720px1280px.png" density="port-xhdpi"/> twice. Remove one

5. You have one single icon for the french localization. Why? It doesn't make much sense to me.
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
BOOM! That was it! I removed the "port-" from the density attributes!

1. Phonegap CLI does a remote build on PGB with the command:
> phonegap remote build android

2. I don't think so.. that is not the case with the iOS. It works find there. And the android icons are going to the correct places.

3. Money! This solved my problem.

4. Nice catch!

5. Relic from some sample code in the documentation. Thanks.

Thank you so much!