Android Web View - zooming the view along just one axis?

Question

I've successfully implemented a web view inside of my application and I'm using the build in zoom controls (setBuiltInZoomControls(true)) to control the scaling of the window using pinch zooming. The thing is that I want to zoom the view only along the y axis, which can be seen in e.g. the Google Calendar application. I want to avoid side-scrolling along the x axis. Is there any way to implement this using Android API toolkit or possibly a mobile supported web framework, like jQuery Mobile?

Answer 1

It looks like you want to alter your UI based on a pinch gesture rather than scale along one axis, right? I mean technically you could just call webview.setScaleY() to change the scale along the Y axis, however that would mean that everything, including text would be stretched vertically, so probably not what you want.

To achieve a similar effect to what Calendar is doing you'd need to handle the pinch zoom gesture in JavaScript - you'd probably want to setBuiltInZoomControls(false) and use your own ScaleGestureDetector (some options outlined in this answer). Then, when you detect a scale change you'd call some JavaScript on your page to update the UI (I don't know what this would actually do - modify the height property of a CSS rule or something).

An alternative would be to detect the pinch gesture entirely in JavaScript using something like Hammer.js.