I need to be able to turn pinch-zoom on and off using the viewport setting on my Android PhoneGap app.
But I'm unable to get viewport to affect pinch-zooming at all when using PhoneGap. I cannot turn on Pinch-zoom in PhoneGap, but when browsing with the Android Native browser to the webpage everything works fine.
I have spent a lot of time searching for a solution, without any result.
I created a very simple index.html for testing, having viewport setting like:
<meta name="viewport" content="user-scalable=yes" />
As some has suggested I have also tried the viewport:
<meta name="viewport" content="user-scalable=1" />
Other solutions for Android PhoneGap would be to enable Android Native Pinch-Zoom which have been suggested here:
zoom in phonegap for android
But this will not work for me, since I need to be able to control the pinch-zoom from javascript. I.e. I need to be able to use javascript to change the viewport setting, to control when pinch-zoom is available (user-scalable=yes / user-scalable=no)
Please observe that other viewport settings like "initial-scale" and "target-densitydpi" seems to work fine. For example setting initial-scale=2 starts the app zoomed.
(I'm currently testing pinch-zoom on PhoneGap 1.4.1 and HTC Desire HD Android 2.3.3)
I'm beginning to think I have missed something obvious, since I find so little information about similar problems...
The minimal index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Minimal AppLaud App</h2>
<p> LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE </p>
<p><span id="devready">onDeviceReady not fired.</span></p>
</body>
</html>
Appreciate any ideas that you might have!
Are you using PhoneGap Build? It is not possible with PhoneGap Build.
With Desktop PhoneGap, if you haven't already, follow the PhoneGap Getting Started with Android Guide and set your code up in an Eclipse Project.
Once set up, edit your Main Java file, as in the getting started guide:
Add the following imports:
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;
Below the 'super.loadUrl("file:///android_asset/www/index.html");' line that you put in, as part of the start up guide, add:
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
Clean and build your project - zooming should now be allowed.
To restrict how far users can zoom in, add a meta tag, like the one below to every HTML page:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
Just confirmed Pinch Zoom as working on the following Android Phones:
Samsung Galaxy S820L Android 4.4
LG Sunset L33L Android 5.0
With PhoneGap CLI (not the service), on Windows:
C:\>phonegap --version
5.4.1
Android SDK Tools Verion:
24.4.1 (from the SDK Manager)
Here is the code for MainActivity.java (platforms\android\src\com\phonegap\helloworld):
package com.phonegap.helloworld;
import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebView;
import android.webkit.WebSettings;
public class MainActivity extends CordovaActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
}
}
And this is in index.html:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=3, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
One additional note - with this call:
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
got this when building:
uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details
Commented it out, and Zoom was not affected.
Thank you guys!!!
Whoever even after this didn't find a solution, I found an answer in Github:
https://github.com/LouisT/cordova-useragent/issues/1
Basically you have to:
import android.webkit.WebView;
And then:
// super.appView.getSettings().setBuiltInZoomControls(true);
// super.appView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
// super.appView.getSettings().setSupportZoom(true);
// Instead use this
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
For cordova 5.x.x you need to use the solution from https://github.com/LouisT/cordova-useragent/issues/1
import android.webkit.WebView;
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
For me, it was required to change ZoomDensity.MEDIUM to WebSettings.ZoomDensity.MEDIUM
I have exactly the same issue and besides testing different viewport settings, I have tried the suggestions from this: Pinch Zoom in Android with Phonegap and jQUERY Mobile but I can't make it work (testing on Samsung Galaxy SII, Android 4.0.3). However, others have reported successful pinch-zooming using the tips from the link. Hope it helps you too!
The html5 document should begin with:
<!DOCTYPE html>
Without this line did not work the viewport AppBrowser in Phonegap Android
Related
I have a webpage which have a "viewport" tag with the following value:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I want to allow zooming on that page which is displayed in a WebView
so I inject some javascript on onPageFinished() as follow:
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes');");
but it doesn't work.
* I also tried rearranging properties like this
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'user-scalable=yes, width=device-width, minimum-scale=1.0, maximum-scale=1.0');");
or removing the property like this
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0');");
with the same result.
after some trials I found out that I can override maximum-scale only if there was no "user-scalable=no" defined at all in the page.
for example if the Viewport metadata was like this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
everything would work just fine.
I checked the value of the "viewport" tag after injection using javascript:alert(...), and it was modified by the injection, yet with no actual result.
I tried setting UseWideViewPort with true or false, and it didn't help neither:
webView.getSettings().setUseWideViewPort(true);
//or
webView.getSettings().setUseWideViewPort(true);
the samething with setLoadWithOverviewMode()
zooming doesn't work even programmatically using zoomIn() or zoomOut().
I've tested using android 2.3 and android 4.4.2 with the same results.
note: I did read almost all the questions on this site related to zooming and viewport, but nothing was useful in my case.
my webView settings are defined as follow:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
So is there any other ways to allow zooming and override the metadata?
a solution which is compatible with API 10 would be very appreciated.
Very nicely asked. This code worked for me, despite being essentially what you stated didn't work, can't say why we are getting different results. You have to change the document's properties since the WebView respects those.
public void onPageFinished(WebView view, String url)
{
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');");
}
I didn't seem to find any related answers, SL4A version is R6, Py4A is R5. It's really simple, the app calls webViewShow with a HTML page, it displays properly, the script terminates, but the page does not want to disappear. Can't reach menu, back button doesn't work, only home button, then you need to kill sl4a from app manager if script is running through adb, or kill the script if run from the on-device interpreter. I also tried with http://www.google.com, same happening. The webViewShow returns a NoneType, but still, the page is displayed.
Example:
import android
droid = android.Android()
droid.webViewShow('/sdcard/sl4a/scripts/main_view.html'
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" id="viewport"
content="width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
</head>
<body >
<h1 style="text-align:center">Supervisor</h1>
</body>
</html>
Thanks in advance!
Maybe this could help:
<script>
var droid = new Android();
</script>
<input type="button" value="Exit" onclick="droid.dismiss();" />
I also ran into this problem, and could not find a proper answer. In my case I suspect the script cannot fully 'terminate' until the WebView closes...catch-22. To work around it I added an explicit 'Quit' option to the phone's menu button before spawning the WebView:
# give us a way to escape from the webview
droid.addOptionsMenuItem('Quit','menu-quit',None,"ic_lock_power_off")
Not ideal (the user still has to hunt for the Quit option or know about it in advance), but seems to work taking down both the script and WebView, at least on my phone (SL4A r6, Android 2.3.7).
i agree with pedro. this is the only way to exit a webview from sl4a, confirmed by damon kolher, the last maintainer of the project before it was finally forked.
once you deployed a webview, there is no way to kill it besides from within itself using js.
<script> var droid = new Android(); </script>
Then attach this to an element.
onclick="droid.eventPost('kill', ''); droid.dismiss();
For me I use an eventPost call back to my main script via eventWait.
while True:
event = droid.eventWait().result
if event['name'] == 'kill':
pipe.send('kill')
pipe.close()
i find this to work exceptionally well as i am using bottle to serve up my webview as two seperate processes and needed a way to shutdown my script as soon as the webview was exited.
We are currently developing a "hybrid" app using Intel's App Framework (formerly jqMobi/appMobi), but we have run into a problem.
The actual problem is that when running inside an Android WebView (on an actual Android device), the webpage shows a rather big scrollbar. Even if there is no content on the webpage, it still gives us the opportunity to scroll way down!
When using the browser on the Android device and visit the webpage, it is not scrollable, just like we want it.
Our html looks like this (see below)....as you can see there's nothing actual on the page!
I really hope someone can help us out here...
<!DOCTYPE html>
<html>
<head>
<title>Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="js/appframework.min.js"></script>
<script type="text/javascript" src="js/appframework.ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/af.ui.min.css" />
</head>
<body>
</body>
</html>
The WebView is configured like this:
mWebView = (WebView) findViewById(R.id.activity_main_webview);
mWebView.setClickable(true);
mWebView.setFocusableInTouchMode(true);
mWebView.addJavascriptInterface(new WebAppInterface(MainActivity.this), "Android");
mWebView.setWebViewClient(new WebClientClass());
mWebView.setWebChromeClient(new WebChromeClass());
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
Here is a link to a screenshot:
Screenshot
I think you have an old version of Intel AppFramework, try with the latest.
I do not see the issues on Android 4.4, Nexus5. I just replaced the AppFramework scripts with the link to latest CDN and tested the code:
<!DOCTYPE html>
<html>
<head>
<title>Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.1/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
</head>
<body>
</body>
</html>
Okay, I just seem to have solved the problem I was having...
The problem was in the Android App and not in the Intel's App Framework.
In the manifest file, I wanted to change the theme for an activity, so I had the following code:
<activity
android:name="nl.deburen.boodschappertje.MainActivity"
android:label="#string/app_name"
android:theme="#android:style/Theme.NoTitleBar" > <!-- THIS LINE GENERATES THE PROBLEM -->
</activity>
Strange behavior, but nonetheless a solution for me... :)
Thanks for the help!
I made a simple application in Intel XDK.
When I was testing the application I noticed that they enabled the accelerometer.
For this application it's needed to have only 1 position.
How can I disable the accelerometer?
Thanks in advance.
Its not accelerometer that is causing, its the device orientation that needs to fixed.
Call this API to fix the orientation: intel.xdk.device.setRotateOrientation(ORIENTATION); after intel.xdk.device.ready has fired.
Full documentation is here
Portrait: intel.xdk.device.setRotateOrientation("portrait");
Landscape: intel.xdk.device.setRotateOrientation("landscape");
Both: intel.xdk.device.setRotateOrientation("any");
Below is sample code:
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
// set orientation
intel.xdk.device.setRotateOrientation('landscape');
// intel.xdk.device.setRotateOrientation('portrait');
// intel.xdk.device.setRotateOrientation('any');
intel.xdk.device.hideSplashScreen();
}
</script>
<style>
body {font-family:arial;background-color:white}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Locked to Landscape</p>
</body>
</html>
That is possible do it the way next:
Go the project properties.
Build Settings
Orientation
You select, landscape or portrait.
If you emule the project, you see the changes.
use the setRotateOrientation-Method:
To lock the device in portrait mode, use:
intel.xdk.device.setRotateOrientation("portrait");
Works on Android as well as iOS.
See: Documentation
Easier is to go to Build Settings -> Your Platform -> Orientation. That very fast and simple.
I wanted to use FusionCharts with android 2.2 (may be on emulator).
I tried using Javascript and the HTML but did not get the expected result.
Any help??
My code is as follows :
WebView web;
/** Called when the activity is first created. */
#Override
public void on Create(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
web=(WebView)findViewById(R.id.webView1);
web.loadUrl("file:///android_asset/Fusioncharts/myChart.html");
}
}
Also my html,xml files :
<html>
<head>
<title>My First chart using FusionCharts
</title>
<script type="text/javascript" src="JavaScripts/FusionCharts.js">
</script>
</head>
<body>
<div id="chartContainer">FusionCharts will load here!
</div>
<script type="text/javascript">
<!--
var myChart = new FusionCharts("Pie2D.swf? dataURL=Data.xml","myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
and Data.xml :
The above code just displays me : FusionCharts will load here!
Thanks
Sneha
EDIT> NEW CONTENT:
You might need to enable JavaScript and plugins for the WebView:
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setPluginsEnabled(true);
http://developer.android.com/reference/android/webkit/WebView.html
What does "install Flash plugin" in WebView mean?
How to Enable Flash Plugin in Webview?
Also you might need to set proper path to the SWF and JS files. Please debug or attach code here.
OLD CONTENT:
There seems to be a JavaScript error or FusionCharts not getting loaded to do the rendering as stated by Duniyadnd.
Please check the Android debug (using adb logcat or other processes) if it traces any error.
Moreover, I did an implementation using PhoneGap which you can check-out from:
PhoneGap API to query call-logs
This is a small PhoneGap Android application which has FusionCharts to show call logs from the device. The post though showcases creation of plugin to get the calllog, you might derive the other elements which you require. Hope this might help.