Implementing horizontal/vertical finger swipe scrolling in android honeycomb webview/webkit?

Question

I am planning to implement Honeycomb tablet application based on WebView (so, basically it'll be a HTML5 web based application made only for tablet).

I am looking to implement horizontal and vertical scrolling by swiping finger. For better understanding I created sample outline.

---

This image shows something similar to Honeycomb's native setting activity with left and right page vertically scrollable

Any kind of guides or resources are welcome. Thanks

Solution 1

Take a look at iScroll:

iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.

While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs...

Solution 2

Hammer JS has been useful for me:

http://eightmedia.github.io/hammer.js/

Solution 3

Here is what I have found so far:

It depends on how you want to implement scrolling. If you want to attached swiping event, thats the easiest way to implement using well known libraries:

• jqTouch - It has swipe left and right event which can be hooked to scroll left or right (it seems all the webkit based animations work only on iOS devices). Please note that project is still in beta and not highly active. EDIT: this is also part of Sencha Labs - who actively maintains Sencha Touch.
• Sencha Touch - They have better support for almost everything in mobile and tablet. (Note: It's free for opensource apps but not for commercial apps - EDIT: they actually have commercial license. see their site for more info on licensing)
• jQueryMobile - They are very stable (in RC1 as of now), and has swipe left and right event, but I could not find swipe up or down. If you just need swipe left right, tap, tap hold, then go with jQM. They have the best community support.
• RAW JS - Finally, if you want something raw javascript, visit HTML5Rocks article to have better in-depth idea about how touch event works.

I hope it helps. I'm still struggling to implement scroll up down, since I don't want to wait for swipe to end, instead I am trying to implement instant scroll feedback, getting very close using RAW JS coordinates, but not satisfactory.

Solution 4

From the creators of iScroll, SwipeView seems a nice dedicated alternative. Have a look at demo 1 and demo 2.

I have not tested yet, but I will surely. Since demos behave well on my iPad.

View more solutions

Comments

[Hossain Khan]

Thanks, I took a look at it which is for vertical scrolling. I'm considering to use that.

[Hossain Khan]

Just wanted to update on this issue - we've used iScroll for relatively large app for iOS and Android. In the end, it produced lot more headaches than it solved. Don't get me wrong, iScroll is a nice library, it works well, but it has shortcomings. So, you should examine this thoroughly before choosing such library. Just take it as a warning. Thanks

[shaunix]

Yeah, After using it in a larger application, I too found it to be more problematic, if you are building something of reasonable size, avoid iScroll.

[Ursula]

so what did you use instead?

[shaunix]

I used jQuery mobiles implementation for the supported devices and fell back to static header and footer for all other devices.

[Hossain Khan]

JS libs has come a long way since I encountered the issue. Thanks for sharing Ian.

[Ian Jamieson]

No worries, just thought I would add just in case other people come across this thread.