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>
Related
I have a Cordova application build for Android, iOS and Windows platforms. As per latest google play store guidelines, I am generating my Cordova Android application by targeting API level 30. When I set API 30 , the rest calls(jquery Ajax calls) in my app are not working and giving ERR_PROXY_CONNECTION_FAILED in the console.
When VPN is off it is giving ERR_TIMEOUT. the same app with working fine in Android 10 and below devices without any issue. Rest Calls are accessible with https and VPN on.
To support Android 11 and Above, I have followed all the required steps to be included in Config.xml file with permissions. I have already added below changes in config file to support Android 11 and above, but facing PROXY_CONNECTION_FAILED error.
Cordova : 11.0.0
Cordova-android:9.1.0
Installed whitelist plugin
Config.xml changes
<access origin="*" subdomains="true"/>
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<preference name="android-targetSdkVersion" value="30" />
<preference name="android-compileSdkVersion" value="30" />
<preference name="android-minSdkVersion" value="22" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge"
target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
<config-file target="AndroidManifest.xml" parent="/manifest/application">
<uses-library
android:name="org.apache.http.legacy"
android:required="false"/>
</config-file>
</platform>
Also tried with network_security_config.xml file as well but that is also not working.
What else i am missing here. Does any one face same issue or any suggestions to fix this problem appreciated .
Thanks in advance
Android 7.0 intorduced Network Security Config to support use custom CAs, but how Cordova support that? I can not find any hint from docs of Cordova.
You can achieve this by adding the edit-config tag to the Android platform in your config.xml, this is supported by Cordova Android Plugin v7.0.
You will need to create the Network Security Config file that you would create for a native Android application using the examples from Google.
Next in the Cordova config.xml you can use the edit-config tag to add the networkSecurityConfig attribute to the Application tag. Then you just need to copy the Network Security Config file as a resource for your application to the res/xml directory.
Here is an example of how this might look in your applications config.xml
...
<platform name="android">
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:networkSecurityConfig="#xml/network_security_config" />
</edit-config>
<resource-file src="network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
</platform>
...
What James answered works but if you have an application where you can't specify a domain or wants to allow clear text traffic for all domains, we need to set android:usesCleartextTraffic="true" in platforms/android/app/src/main/AndroidManifest.xml in <application> tag.
Because, in Android P (version 9, API level 28), cleartext support is by default disabled. To achieve this, just add the following in your config.xml inside <platform name="android">:
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
I am using Cordova 11 with android sdk 30. Just using the
<application android:usesCleartextTraffic="true" /> didn't
work for me. XHR Requests to non https urls just reported 'Error'.
I got it working with the following:
In config.xml I added:
<platform name="android">
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:networkSecurityConfig="#xml/network_security_config" />
</edit-config>
<resource-file src="res/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
</platform>
Contents of res/xml/network_security_config.xml :
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain>10.1.36.67</domain>
</domain-config>
</network-security-config>
Note the use of the local res/xml folder for the network_security_config.xml file. Placing it in the main platform/app directory won't work and will result in the file being overwritten anyway.
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 v3.7.0 and I want to change the AndroidManifest.xml when I build my app. Currently I have tried changing the my-project-path/config.xml file adding the the following lines:
Option a.
<widget>
<preference name="android-manifest/application/activity/#android:windowSoftInputMode" value="adjustPan" />
</widget>
Option b.
<widget>
<preference name="android-windowSoftInputMode" value="adjustPan" />
</widget>
Then I do:
$ ionic cordova build android
And I was expecting the following change on my-project-path/platform/android/AndroidManifest.xml:
<manifest>
<application>
<activity android:windowSoftInputMode="adjustPan">
</activity>
</application>
</manifest>
But I get the same result as without adding the preference settings:
<manifest>
<application>
<activity android:windowSoftInputMode="adjustResize">
</activity>
</application>
</manifest>
How can I apply the desired effect to the AndroidManifest.xml?
Thanks!
I found how to do it. If your Cordova version is above 6.4.0 you can use the tag <edit-config> (http://cordova.apache.org/docs/en/7.x/plugin_ref/spec.html#edit-config) and I think that if you are using the latest version of Ionic probably you'll have a Cordova version above 6.4.0 (I have 7.1).
So the way to make the desired change that I wanted I had to set the my-project-path/config.xml file as follows:
<widget xmlns:android="http://schemas.android.com/apk/res/android">
<platform name="android">
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
<activity android:windowSoftInputMode="adjustPan" />
</edit-config>
</platform>
</widget>
Check that the widget has a new attribute.
With this change when I build the Android version the manifest my-project-path/platform/android/AndroidManifest.xml looks like this:
<manifest>
<application>
<activity android:windowSoftInputMode="adjustPan">
</activity>
</application>
</manifest>
It looks like AndroidManifest.xml is something that's get derived from config.xml and not something you would want to directly edit.
I would edit config.xml and sections of it are reflected into the various AndroidManifest.xml used for building Android APKs
I'm using Cordova 5.4.0 and I have this in my config.xml:
<preference name="fullscreen" value="false" />
<preference name="android-windowSoftInputMode" value="adjustPan" />
but after building, in my AndroidManifest.xml there still is
android:windowSoftInputMode="adjustResize"
Why is it not working? And how can I solve it?
The android-windowSoftInputMode preference seems to be supported by Phonegap only, not Cordova.
Workaround 1 (Cordova 6.4+): use edit-config
Make sure the xmlns:android="http://schemas.android.com/apk/res/android" namespace attribute is included in the widget element and add an edit-config element:
<widget xmlns:android="http://schemas.android.com/apk/res/android" ...>
...
<edit-config file="AndroidManifest.xml" target="/manifest/application/activity[#android:name='MainActivity']" mode="merge">
<activity android:windowSoftInputMode="adjustPan" />
</edit-config>
...
</widget>
Workaround 2 (prior to Cordova 6.4): use a plugin
Add the cordova-custom-config plugin:
cordova plugin add cordova-custom-config
Add the following preference:
<platform name="android">
<preference name="android-manifest/application/activity/#android:windowSoftInputMode" value="adjustPan" />
...
</platform>
Workaround 3: add a before_build hook
Add the following hook to config.xml:
<hook type="before_build" src="scripts/appBeforeBuild.js" />
Add a file appBeforeBuild.js to the scripts directory with the following content:
#!/usr/bin/env node
var fs = require('fs');
var path = require('path');
var pathToManifest = path.join(__dirname, '../platforms/android', 'AndroidManifest.xml');
if(fs.existsSync(pathToManifest)) {
var config = fs.readFileSync(pathToManifest, 'utf8');
var result = config.replace(/(android:windowSoftInputMode=").*?(")/, '$1adjustPan$2');
fs.writeFileSync(pathToManifest, result, 'utf8');
console.log('Set android:windowSoftInputMode to adjustPan');
}
else {
console.log('Could not find AndroidManifest to set android:windowSoftInputMode');
}
This script will use Node to lookup the AndroidManifest and do a regex replace on the android:windowSoftInputMode attribute (first occurrence only).
I found a simple solution using the edit-config tag which is built into cordova since v6.4.0. My config.xml now looks like this and the keyboard no longer resizes the viewport!
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloWorld</name>
<!-- ... -->
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity[#android:name='MainActivity']">
<activity android:name="MainActivity" android:windowSoftInputMode="adjustPan" />
</edit-config>
<!-- ... -->
</widget>
Hint: When experimenting to get this working, I made some accidental changes to my AndroidManifest.xml. You can reset this easily be removing and re-adding the android platform to your cordova project like so: cordova platform rm android && cordova platform add android.
Try this one
Index.html
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
config.xml
<preference name="android-windowSoftInputMode" value="adjustResize|adjustPan" />
It looks like you are changing the wrong AndroidManifest.xml.
In your application, under \platform\android... you will find the .xml file, you have to change that one.
You can also use the cordova-custom-config
cordova plugin add cordova-custom-config
and add this to your config.xml
<platform name="android">
<preference name="android-manifest/application/activity/#android:windowSoftInputMode" value="adjustPan" />
</platform>
I had the same problem and it turned out to be a problem with using display: flex for the container of the inputs. Changing the CSS so the container was not flexbox based solved the keyboard / input / scroll interaction problem on Android for me.