I want to customize splash screen of my cordova project.
Here is my inserted code in config.xml file to change splash screen
<preference name = "SplashScreen" value = "screen" />
<preference name = "SplashScreenDelay" value = "3000" />
<preference name = "SplashMaintainAspectRatio" value = "true" />
<splash src="/HelloworldProject/splashimages/splash.png"platform="android" width="720" height="1280" />
I can't see any changes when i run my app.Any help here?
Try these suggestions out:
Looks like there should be a space before platform.
The SplashScreen preference should have the value of that src file; not screen
Try this out specifically (modelled after cordova apache docs):
<preference name="SplashScreen" value="/HelloworldProject/splashimages/splash.png" /> <!-- defaults to "/img/logo.png" -->
<preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
<preference name = "SplashMaintainAspectRatio" value = "true" />
<splash src="/HelloworldProject/splashimages/splash.png" width="720" height="1280" />
If you want, you could put the splash tag within a platform tag with name="android":
<platform name="android">
<splash density="land-ldpi" src="/HelloworldProject/splashimages/splash.png" />
</platform>
Related
I already used all the features I found here, but I could not change the black color of the status bar of my application in Phonegap.
I was able to change the color of the application's bar status using the plugin:
<gap:plugin name="cordova-plugin-statusbar" source="npm" />
<preference name="fullscreen" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#9d0101" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="StatusBarDefaultScrollToTop" value="false" />
The application status bar changes the color as I want, however the Splashscreen keeps the color black and does not change, when I put "fullscreen" it adds, but I do not want my application in fullscreen, I would like to hide the status bar only on the Splash Screen. My app is compiled in Phonegap, how do I HIDE the Status Bar on SplashScreen only?
I've tried using the code below, but it leaves the whole app on fullscreen:
<?xml version='1.0' encoding='utf-8'?>
<widget ... xmlns:android="http://schemas.android.com/apk/res/android">
...
<edit-config file="AndroidManifest.xml" mode="merge"
target="/manifest/application/activity">
<activity android:theme="#android:style/Theme.NoTitleBar.Fullscreen" />
</edit-config>
...
</widget>
What I want is to hide the status bar only on the application launch screen, after that, it reappears according to the color I used.
You need to add Android Fullscreen, and then the following configuration
config.xml
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
<activity android:theme="#android:style/Theme.DeviceDefault.NoActionBar.Fullscreen" />
</edit-config>
app.component.ts
constructor(
platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen
androidFullScreen: AndroidFullScreen
) {
platform.ready().then(() => {
splashScreen.hide();
if (platform.is('android')) {
androidFullScreen.showSystemUI();
}
statusBar.styleDefault();
});
}
I'm using Cordova to build an app running on both iOS and Android.
Cordova version 7.0.1 - Platform Android version 6.2.3
I have a problem on Android about the splashscreen size. I have 6 different PNG size for each density as you can see in the config.xml below.
<!-- ANDROID SPLASH PREF -->
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="4000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<!-- ANDROID SPLASH PNG -->
<splash src="www/splashs/android/splash-land-hdpi.png" density="hdpi" />
<splash src="www/splashs/android/splash-land-ldpi.png" density="ldpi" />
<splash src="www/splashs/android/splash-land-mdpi.png" density="mdpi" />
<splash src="www/splashs/android/splash-land-xhdpi.png" density="xhdpi" />
<splash src="www/splashs/android/splash-land-xxhdpi.png" density="xxhdpi" />
<splash src="www/splashs/android/splash-land-xxxhdpi.png" density="xxxhdpi" />
Well, when I launch the app on my Lenovo tablet, which has a 800x1280 resolution, it display the wrong PNG file. The app decide to show the LDPI one, with a resolution of 400x240.
The result is of course really bad and very pixelated, I can't release my app like that.
I tried on a smartphone Galaxy J, everything works fine, the good PNG size is selected during the splashscreen.
I tried to remove all PNG file except the higher one (1920x1280 xxxhdpi). The app display it but the result is even worst. The image is really even more pixelated... really weird problem.
I didn't find any solution yet on the web. Any ideas?
Excerpts from my root config.xml look like this:
<platform name="android">
<allow-intent href="market:*" />
<splash src="www\web\splashscreen\drawable-hdpi\screen.png" density="hdpi"/>
<splash src="www\web\splashscreen\drawable-ldpi\screen.png" density="ldpi"/>
<splash src="www\web\splashscreen\drawable-mdpi\screen.png" density="mdpi"/>
<splash src="www\web\splashscreen\drawable-hdpi\screen.png" density="port-hdpi"/>
<splash src="www\web\splashscreen\drawable-ldpi\screen.png" density="port-ldpi"/>
<splash src="www\web\splashscreen\drawable-mdpi\screen.png" density="port-mdpi"/>
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="750"/>
<preference name="ShowSplashScreenSpinner" value="true" />
<plugin name="org.apache.cordova.splashscreen" spec="~3.2.2" />
So I think it's setup okay. I've tried various other paths to the screen files, but it's not made any difference. I have verified that the images are in the specified paths prior to cordova build android. No matter what I try, though, I get a blank white screen until my app loads, and no sort of error message or debug output from the splashscreen.
Any ideas?
The ideal way to add splash screen images is by placing it in res/screen/android inside your cordova project then running the build command.
By doing this all the images gets copied to platforms/android/res/drawable-* folder.
As your splash images are not showing, make sure:
They have copied to platforms/android/res/drawable-* folder
successfully
Images are in correct size for all screen resolutions
Today I wanted to update my app in google play store but got the following error:
My config.xml looks like:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget
id="com.bla.blabla.bla"
version="1.3.8"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
xmlns:gap="http://phonegap.com/ns/1.0">
<name>MyApp</name>
<author>MyName</author>
<preference name="AutoHideSplashScreen" value="false" />
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="*" />
<!-- START: Android and iOS Quirks -->
<preference name="FadeSplashScreen" value="false"/>
<!-- START: Android section -->
<preference name="android-minSdkVersion" value="17" />
<!-- android quirks -->
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-hdpi"/>
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-ldpi"/>
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-mdpi"/>
<splash src="www/resources/device/android/splash/land/hdpi.png" density="land-xhdpi"/>
<splash src="www/resources/device/android/splash/port/hdpi.png" density="port-hdpi"/>
<splash src="www/resources/device/android/splash/port/ldpi.png" density="port-ldpi"/>
<splash src="www/resources/device/android/splash/port/mdpi.png" density="port-mdpi"/>
<splash src="www/resources/device/android/splash/port/xhdpi.png" density="port-xhdpi"/>
<icon src="www/resources/device/android/ldpi.png" density="ldpi" />
<icon src="www/resources/device/android/mdpi.png" density="mdpi" />
<icon src="www/resources/device/android/hdpi.png" density="hdpi" />
<icon src="www/resources/device/android/xhdpi.png" density="xhdpi" />
</platform>
<!-- END: Android section -->
</widget>
My build script looks like:
call cordova platform add android
call cordova plugin add cordova-plugin-device
call cordova plugin add cordova-plugin-file
call cordova plugin add cordova-plugin-file-transfer
call cordova plugin add cordova-plugin-network-information
call cordova plugin add cordova-plugin-splashscreen
call cordova plugin add cordova-plugin-inappbrowser
call cordova plugin add cordova-plugin-whitelist
call cordova plugin add cordova-plugin-file-opener2
call cordova build android
What could be the problem? Some months ago this script worked. I searched a lot in the web but did not find the solution. Mostly I read that the solution is to edit the AndroidManifest.xml but I am in cordova and not in a native android app development so I cannot edit the AndroidManifest.xml.
Ok now I resolved it by installing specific version of cordova:
npm install -g cordova#5.4.0
Before there was cordova 6.0.0 installed. I have no idea what changed from 5.4.0 to 6.0.0.
I have followed the very clear instructions on this page:
https://build.phonegap.com/docs/config-xml
I have included the following line in my config.xml file (which is indeed located at the top level of my app):
<preference name="fullscreen" value="true" />
And yet the status bar at the top of the screen remains.
Here is my full config.xml file if it helps..
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.universeprojects.voidspace"
versionCode="10"
version = "0.1.2b">
<!-- versionCode is optional and Android only -->
<name>VoidSpace - DevServer</name>
<description>
This is a special version of VoidSpace that connects to the development server.
</description>
<author href="https://voidspace.ca" email="support#universeprojects.com">
Nikolas Gauvreau
</author>
<preference name="EnableViewportScale" value="true" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<icon src="icon.png" />
<gap:splash src="splash.png" />
</widget>
Any help is appreciated, thanks!
Just place your config.xml file, modified as you need, at the same directory, as the index.html file:
Note: in this case, we have our application built in the public/ dir. So all the stylesheets and javascripts are already compiled and placed within one.
And now just observe the magic!
Add <preference name="fullscreen" value="true" /> in this path:
res/xml/config.xml.
It really worked for me