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();
});
}
Related
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>
I used Cordova 4.0 to create a phonegap app (that has worked fine via cli on iOS), but I also want to use build.phonegap.com particularly for Android.
The main issue is that upon installing the APK on Android, the security warning lists all features, when I do not actually need any.
I have read that you can remove all permissions with <preference name="permissions" value="none" />and then selectively add back the ones you want.
However, this is not working; I still get all the permissions requested upon install. I must be missing something, or something has changed. (Did I make a mistake using Cordova instead of Phonegap? That's reasonably easy to correct..)
My config.xml is below:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.test" version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
xmlns:gap="phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android">
<name>Test</name>
<description>
Test.
</description>
<author email="test#test.com" href="http://test.com">
Test
</author>
<content src="index.html" />
<access origin="*" />
<gap:plugin name="org.apache.cordova.statusbar" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
</widget>
Edit: To remove ambiguity, I want to remove the Android security warnings saying this app needs full access to contacts, camera, internet access, etc. I do not need any of these.
config.xml , is just a bunch of information. It is not executed sequentially. so if you mention you require DisallowOverscroll permission and then mention you dont require any permission, it means ,
<preference name="permissions" value="none" />
will not overWrite
<preference name="DisallowOverscroll" value="true" />
for example:
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
and
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
both are same.
i have really searched about the problem but didn't find the correct solution that's why again here..
i have a Ionic+ Cordova project i want to show Splash Screen on android. project include a
res folder and inside that a drawable folder where i have placed my screen.png which i want to show.
but the problem is the file is not showing .
what is the problem how to show
i have include below line of code in config.xml which is inside of root folder
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="20000" />
<preference name="auto-hide-splash-screen" value="false" />
and my splash screen is here
platforms/android/res/drawable/screen.png
before app load a black than white backgound shows..
You need to install the splashscreen plugin in order to use it.
You can write the preferences in the config.xml, but I would recommand to do use the platform tag. Also make sure that you provide a splashscreen for each resolution in the drawables folder
<platform name="android">
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1500" />
</platform>
Did you add the SplashScreen to AndroidManifest.xml ?
trying an application using Phonegap. I used the InAppBrowser on an android tablet:
var win = window.open(sampleURL, "_blank", "location=no");
But I'm having trouble on making it fullscreen (the title bar the top should not show at all) even if the config.xml has been set up with this line:
<preference name="Fullscreen" value="true" />
In the AndroidManifest.xml change/add the theme:
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
for the application and the activity tags.
In config.xml add to <platform name="android"> <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<activity android:theme="#android:style/Theme.NoTitleBar.Fullscreen"/>
</edit-config>
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