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.
Related
I made a cordova plugin for Android applications, but unlike other plugins, this one only uses an Application (App.java) and not a CordovaPlugin class.
When I try to install it for the first time using cordova plugin add, it works fine. When I try to remove it using cordova plugin rm, it doesn't remove the folder from node_modules and keeps the plugin dependency name in the package.json. Besides, it removes some code from the manifest that belongs to another plugin (I've seen this is a consecuence of the edit-file in the plugin.xml, I need to add the Application name to the manifest) and if I try to install it again I will get an error (because it's still holding the node_modules dependency) unless I update the version of the plugin.
Here's my plugin.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="com.test.plugin.applicationTest" version="1.0.0" platform = "Android">
<name>codova-app-plugin</name>
<description>Test</description>
<author>test</author>
<license>Apache 2.0</license>
<keywords>cordova, application</keywords>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="applicationTest">
<param name="android-package" value="com.test.plugin.applicationTest" />
</feature>
</config-file>
<source-file src="src/android/App.java" target-dir="src/com/test/plugin/applicationTest" />
<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</config-file>
<edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
<application android:name="com.test.plugin.applicationTest.App"/>
</edit-config>
</platform>
</plugin>
Why it isn't removing the node_modules? and what can I do to avoid the deletion of the AndroidManifest tags ?
Edit:
If I remove the edit-config and instead use a hook, I won't delete the AndroidManifest tags, but they won't get executed or throw EACCESS error. Besides, it keeps the node_modules dependencies.
<hook type="after_plugin_install" src="scripts/nameManifest.js" /> -- won't execcute
<hook type="before_plugin_uninstall" src="scripts/uninstallPackage.sh" /> -- EACCESS error
For now, the best I can do is to remove that edit-config and create hooks for the edition of the application name and the execution of npm uninstall
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
In Cordova/Android, what's the difference between:
/appname/config.xml
/appname/platforms/android/AndroidManifest.xml
Which one do I edit, or do I edit them both?
I'm looking to do things such as:
force portrait mode (I found this setting in config.xml)
specify minimum sdk supported for android. (I found this setting in AndroidManifest.xml)
You support to modify at /appname/config.xml
When you add a platform, ionic will regenerate /appname/platforms/android/AndroidManifest.xml file for you to build android app. So, it will collect the permission from your plugin and config.xml to build AndroidManifest.xml
Only update config.xml (not AndroidManifest.xml as it gets generated whenever you do a build)
For example to do portait add in config.xml:
<preference name="orientation" value="portrait" />
And to set minimum sdk add in config.xml:
<platform name="android">
<preference name="android-minSdkVersion" value="19" />
</platform>
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 am working on an Android App with Phonegap Cordova-3.0.0 and when I call InAppBrowser I got MotionEvent mTouchMode = 4 error. And InAppBrowser function is not working. So how can I fix this? Do I need do some setting on AndroidManifest.xml or config.xml?
And I got this on my AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
And I got this on my config.xml
<plugins>
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
</plugins>
In Phonegap Cordova-3.0.0 version, for the app to communicate closely with various device-level features, we need to add plugins that provide access to core Cordova APIs.
The cordova plugin add command requires you to specify the repository for the plugin code.
For example, In-app browser:
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
we need run this in command line. Don't need worries about AndroidManifest.xml or config.xml files. After you run $ cordova build, it will auto write for you.
You could get more idea about it in doc.phonegap
Add following code in config.xml this works fine for mi.
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
<access origin="*" browserOnly="true"/>
You have to mention the below code line in config.xml
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
try to add this to your manifest, it helps me with a f*king plugin to work
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
try also not use 'plugin' tag in config.xml, but:
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
it will help for future updates of phonegap
To open a link in browser inside the app without opening external browser
HTML
<input type="button" id="button1" value = "click here"
onclick="window.open('https://example.com','_blank','location=yes','closebuttoncaption = Return');">
Now go into your project folder and open Terminal or Command Prompt (Windows) and type the following command:
cordova plugin add cordova-plugin-inappbrowser --save
It will configure the required files and also add the plugin into your config.xml file.
Open your HTML page where you're trying to open the link, and put this JavaScript.
<script src="cordova.js"></script>
<script type = "text/javascript" charset = "utf-8">
function onLoad(){
document.addEventlistner("deviceready", OnDeviceReady, false);
}
function onDeviceReady(){
}
</script>