Need to show HTML page (with CSS) as a book with page flipping

Question

So I have a local HTML file with CSS and I need to display this file in the form of a book (scroll left/right to view previous/next content, not up and down). I've thought of a really complicated ways to achieve this:

• A Gallery of WebViews
• Disable scrolling in the WebView
• On swipe, scroll the WebView down the height of the WebView

There's a couple of problems with this approach:

• I'd have to have the HTML content loaded for each WebView (extremely inefficient)
• There exists the possibility that at the bottom of the page, there would be some content partially hidden

I'm looking for some suggestions on how to approach this problem, as the only thing I've came up with sounds dreadful. Thanks!

Answer 1

You could use two frames or iframes side by side and load odd page numbers in the left frame and even page numbers in the right frame. Put some fancy control buttons on each page, or a javascript scrollbar under the frames, and a div with a page-flipping animation that you can turn on or off when pages are loaded into the frames. I think it's totally doable, and could actually be pretty slick.

Answer 2

I can't help you totally, but here is a good example for page curl animation with custom view.

https://github.com/harism/android_page_curl/tree/master/src/fi