Splash screen not showing up on android device


#1

@mhartington The problem is that, when I open the app on android phone, Only a white screen is displayed for 2 seconds, after which the app is started.

  1. I have installed the cordova-plugin-splashscreen Plugin.
  2. I am not using crosswalk browser in the probject
  3. Below are the preferences in config.xml file
  4. The Screen.png file is present in \resources folder as well as platforms\android\res folder

I have followed every topic available on internet, stuck in this issue for about a week, very frustrating, somebody please help.!


#2

Have you generated your resources from screen.png using ionic resources?


#3

Hi @gmarziou,

Thanks for replying, I have got this working.

But when I minimize the app and when the app is resumed, a white screen shows up. When I click on the screen it goes away and app is displayed. :frowning:


#4

Hmm, let’s try this. Can you remove/add the platform? There may have bee an issue with the platform.


#5

Hi @mhartington, I have removed and then added the platform but the behaviour is same.

When I minimize the app and resume again, it shows a white blank screen. The white screen disappears when I touch it and then app is displayed as normal.

I found a similar question on StackOverflow: http://stackoverflow.com/questions/11170592/phonegap-cordova-blank-screen-on-pause-resume

One more thing, Nested custom directives are not working when I build and run on android device. The weird thing is that, when I run same code on Chrome browser on desktop, it works fine.

Can you please help me with these issues, many thanks.


#6

Is there any errors in the directives that you can see from the devs tools?

I’ll put together a blank project and see what happens. If I don’t post it today, just ping me again.


#8

I’m having an issue with the android splashscreen. Can you explain how you got it working?


#9

I am also facing issues with Splash screen. It is not working.
Here is my environment state:
> cordova plugin list
> com.ionic.keyboard 1.0.3 “Keyboard”
> cordova-plugin-contacts 1.1.0 “Contacts”
> cordova-plugin-splashscreen 3.1.1-dev “Splashscreen”
> cordova-plugin-whitelist 1.2.1 “Whitelist”
> nl.x-services.plugins.socialsharing 4.3.18 “SocialSharing”
> org.apache.cordova.device 0.2.13 “Device”
> org.apache.cordova.inappbrowser 0.6.0 “InAppBrowser”
> phonegap-facebook-plugin 0.12.0 “Facebook Connect”

cordova -v
5.4.1

ionic -v
1.7.10

Config.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.atvpmobile663442" version="0.0.1030"
	xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
	<name>ATVPMobile</name>
	<description>
		Association of Tenis Virtual Players
	</description>
	<author email="rafael.coutinho@gmail.com" href="http://tenis-virtual-players.appspot.com">
		Coutinho's
	</author>
	<content src="index.html" />
	<access origin="*" />
	<allow-navigation href="*" />
	<preference name="webviewbounce" value="false" />
	<preference name="UIWebViewBounce" value="false" />
	<preference name="DisallowOverscroll" value="true" />
	<preference name="BackupWebStorage" value="none" />

	<preference name="SplashScreenDelay" value="3000" />
	<preference name="SplashScreen" value="screen" />
	<feature name="StatusBar">
		<param name="ios-package" onload="true" value="CDVStatusBar" />
	</feature>
	<icon src="resources/android/icon/drawable-xhdpi-icon.png" />
	<splash src="res/splash.png" />
	<platform name="android">
		<icon src="resources/android/icon/drawable-ldpi-icon.png"
			density="ldpi" />
		<icon src="resources/android/icon/drawable-mdpi-icon.png"
			density="mdpi" />
		<icon src="resources/android/icon/drawable-hdpi-icon.png"
			density="hdpi" />
		<icon src="resources/android/icon/drawable-xhdpi-icon.png"
			density="xhdpi" />
		<icon src="resources/android/icon/drawable-xxhdpi-icon.png"
			density="xxhdpi" />
		<icon src="resources/android/icon/drawable-xxxhdpi-icon.png"
			density="xxxhdpi" />
		<splash src="resources/android/splash/drawable-land-ldpi-screen.png"
			density="land-ldpi" />
		<splash src="resources/android/splash/drawable-land-mdpi-screen.png"
			density="land-mdpi" />
		<splash src="resources/android/splash/drawable-land-hdpi-screen.png"
			density="land-hdpi" />
		<splash src="resources/android/splash/drawable-port-ldpi-screen.png"
			density="port-ldpi" />
		<splash src="resources/android/splash/drawable-port-mdpi-screen.png"
			density="port-mdpi" />
		<splash src="resources/android/splash/drawable-port-hdpi-screen.png"
			density="port-hdpi" />
		<splash src="resources/android/splash/drawable-port-xhdpi-screen.png"
			density="port-xhdpi" />
		<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png"
			density="port-xxhdpi" />
	</platform>
</widget>

Any ideas why?


#10

I have created a simple app to check of any other plugins were conflicting, and even this simple app does not work.
I have uploaded it here: https://dl.dropboxusercontent.com/u/110006325/myapp.tar.gz


#11

I have the same problem after updating Ionic CLI to 1.7.13. I tried to drowngrade to 1.7.12 but nothing changed.

â–¶ cordova plugin list cordova-plugin-console 1.0.2 "Console" cordova-plugin-crosswalk-webview 1.5.0 "Crosswalk WebView Engine" cordova-plugin-device 1.1.0 "Device" cordova-plugin-splashscreen 3.1.0 "Splashscreen" cordova-plugin-statusbar 2.0.0 "StatusBar" cordova-plugin-whitelist 1.2.1 "Whitelist" ionic-plugin-keyboard 1.0.8 "Keyboard"

`â–¶ ionic info

Your system information:

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.4.0
Xcode version: Xcode 7.2 Build version 7C68`


#12

If I increases the SplashScreenDelay value in config.xml it actually appears…
So I decided to put a huge value (eg. 30000) and hide the splash manually using navigator.splashscreen.hide();


#13

wow!!! true!.. Very odd.
Anyway it must be fixed
It’s odd that even to display it for 2 seconds we need that.


#14

In fact, I thinks it’s a bug of cordova-plugin-splashscreen in is version 3.x because it works well on a friend’s computer with the plugin in version 2.1.0.
I can’t investigate more for now, because a lack of time, but you should look in this direction.


#15

I had problem with splash screen in android too and finally I fixed that.

after running [ionic resources]

I add

<feature name="SplashScreen">
  <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>

to config file and set other properties like this:

  <preference name="ShowSplashScreen" value="true" />
  <preference name="SplashScreen" value="screen"/>  /*my original file name is screen.png */
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
   <preference name="FadeSplashScreen" value="false"/>

so problem solved after a whole day.


#16

Karwan, I had the same problem and your settings fixed it.

Thank you for posting the solution. I was going crazy myself. I had removed and added all the platforms. I had googled extensively, and tried all the solutions I could find but nothing worked. I don’t know how you figured it out, but thank you!


#17

It works. Thanks karwan.


#18

I was pulling my hair out over this one for days and was finally able to get the splash screen to show up on Android by reverting to cordova-plugin-splashscreen@2.1.0


#19

THIS solves the problem. Thank you.


#20

Hi Karwan,
i made a simple ionic app
but splash screen & icon not showing in my apk file.

i using ionic resources cli
and in my config.xml it showing like this

<platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>

my icons & splash png i put on --> resources\android\icon\icon.png &
Splash–> resources\android\splash\splash.png

what is wrong please help


#21

Probably you need cordova plugin add cordova-plugin-splashscreen. More info at Cordova Splashscreen Plugin