Android: Flip of web view

Question

I am working in android. I want to make an application in which I want to perform flip of webview. I have done Flip operation with Images but i dont know how i can use flip operation in web page.

Suppose I have a web page which is larger in length than my screen then I want to show remaining content of that page when user use right flip. Usually we use vertical scrollbar to view remaining content of page but i dont want to use scroll bar, I want to show remaining content of page into next page and we have to flip for this.

For example :-

enter image description here

I hope you understood what I want, if any query about my question then please feel free to ask me anytime I am here 24 hours.

You can suggest me some web links related to this.

Thank you in advance...

What do you mean by "flip"? It this a touch gesture or a motion of the phone or something else? Could you elaborate? — scorpiodawg, Mar 02 '12 at 20:43
Have you figured this issue out ? Any code that worked for you? — MSaudi, Oct 09 '13 at 08:37

Deadeye · Answer 1 · 2012-03-05T23:24:06.753

2

After your page loads, try that:

View v = getYourWebView();
v.setDrawingCacheEnabled(true);

//cheat to force webview to draw itself
v.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), 
        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight()); 
v.buildDrawingCache(true);
Bitmap b = Bitmap.createBitmap(v.getDrawingCache());
v.setDrawingCacheEnabled(false); // clear drawing cache

Then you can scroll your webview and do it again, so you could have two bitmaps which you can flip. You can also try to put your webview into scrollview and set webview to big height, so you would be able to snap bitmap of whole website at once.

edited Mar 05 '12 at 23:24

answered Mar 05 '12 at 23:06

Deadeye

123
8

This is useful for making screenshot of webpage, great idea! But if he shows just flipping of screenshot images to the user, web page is not interactive anymore, no links, no playing videos.. or I got your idea wrong? – Ewoks Mar 07 '12 at 07:35
Ewoks - you can use screenshot when using is flipping the page, and show pure webview when flipping animation is over. This way the page remains interactive, but i'm not sure if you could lock vertical scrolling inside webview. – Deadeye Mar 07 '12 at 12:39
Hey guys i know how can implement swipe functionality according gestures please help me how can i break or show my web view using horizontal scroll view. – Pushpendra Kuntal Mar 09 '12 at 05:04
I don't get it. How to implement this in my web view to apply flipping effect ? Do you have complete example ? – MSaudi Oct 09 '13 at 08:23

score 0 · Answer 2 · edited May 23 '17 at 12:24

The code here is untested, proof of concept code - but given your question, you still seem to be at the prototyping stage. Let me know how you go!

The method described here will work for flipping pages "atomically" - ie, the user swipes their finger, then the page changes. If you're after an actual page curl, you'll need to combine what I've written here with something like http://code.google.com/p/android-page-curl/.

First, sub-class WebView to attach a GestureListener and GestureDetector, as per Fling Gesture and Webview in Android. I've copied the code here for convenience.

class MyWebView extends WebView {
    Context context;
    GestureDetector gd;

    public MyWebView(Context context) {
        super(context);

        this.context = context;
        gd = new GestureDetector(context, sogl);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return gd.onTouchEvent(event);
    }

    GestureDetector.SimpleOnGestureListener sogl = new GestureDetector.SimpleOnGestureListener() {
        public boolean onDown(MotionEvent event) {
            return true;
        }

        public boolean onFling(MotionEvent event1, MotionEvent event2, float velocityX, float velocityY) {
            if (event1.getRawX() > event2.getRawX()) {
                // Scroll up
            } else {
                // Scroll down
            }
            return true;
        }
    };
}

Then, when the user flings the 'page' one way or the other, do the following;

Render the current contents of the WebView to a Bitmap, as per @Deadeye's answer

Eg:

View v = getYourWebView();
v.setDrawingCacheEnabled(true);

// Cheat to force WebView to draw itself
v.measure(
    MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), 
    MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
);

v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight()); 
v.buildDrawingCache(true);

Bitmap b = Bitmap.createBitmap(v.getDrawingCache());
v.setDrawingCacheEnabled(false);

Scroll the WebView down by exactly one viewport's length

Use jQuery and be done with it:

$(document).scrollTop($(document).scrollTop()+$(window).height());

Render the next page into a second Bitmap

Then flip away using whatever page-flipping logic you've already written :)

Android: Flip of web view

2 Answers2