Question

The browsers in Android 2.3+ do a good job at maintaining the scrolled position of content on an orientation changed.

I’m trying to achieve the same thing for a WebView which I display within an activity but without success.

I’ve tested the manifest change (android:configChanges=”orientation|keyboardHidden”) to avoid activity recreation on a rotation however because of the different aspect ratios the scroll position does not get set to where I want. Furthermore this is not a solution for me as I need to have different layouts in portrait and landscape.

I’ve tried saving the WebView state and restoring it but this resuls in the content being displayed at the top again.

Furthermore attempting to scroll in onPageFinished using scrollTo doesn’t work even though the height of the WebView is non-zero at this point.

Any ideas? Thanks in advance. Peter.

Partial Solution:

My colleague managed to get scrolling working via a javascript solution. For simple scrolling to the same vertical position, the WebView’s ‘Y’ scroll position is saved in onSaveInstanceState state. The following is then added to onPageFinished:

public void onPageFinished(final WebView view, final String url) {
    if (mScrollY > 0) {
        final StringBuilder sb = new StringBuilder("javascript:window.scrollTo(0, ");
        sb.append(mScrollY);
        sb.append("/ window.devicePixelRatio);");
        view.loadUrl(sb.toString());
    }
    super.onPageFinished(view, url);
}

You do get the slight flicker as the content jumps from the beginning to the new scroll position but it is barely noticeable. The next step is try a percentage based method (based on differences in height) and also investigate having the WebView save and restore its state.

Answer 1

To restore the current position of a WebView during orientation change I’m afraid you will have to do it manually.

I used this method:

1. Calculate actual percent of scroll in the WebView
2. Save it in the onRetainNonConfigurationInstance
3. Restore the position of the WebView when it’s recreated

Because the width and height of the WebView is not the same in portrait and landscape mode, I use a percent to represent the user scroll position.

Step by step:

1) Calculate actual percent of scroll in the WebView

// Calculate the % of scroll progress in the actual web page content
private float calculateProgression(WebView content) {
    float positionTopView = content.getTop();
    float contentHeight = content.getContentHeight();
    float currentScrollPosition = content.getScrollY();
    float percentWebview = (currentScrollPosition - positionTopView) / contentHeight;
    return percentWebview;
}

2) Save it in the onRetainNonConfigurationInstance

Save the progress just before the orientation change

@Override
public Object onRetainNonConfigurationInstance() {
    OrientationChangeData objectToSave = new OrientationChangeData();
    objectToSave.mProgress = calculateProgression(mWebView);
    return objectToSave;
}

// Container class used to save data during the orientation change
private final static class OrientationChangeData {
    public float mProgress;
}

3) Restore the position of the WebView when it’s recreated

Get the progress from the orientation change data

private boolean mHasToRestoreState = false;
private float mProgressToRestore;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    mWebView = (WebView) findViewById(R.id.WebView);
    mWebView.setWebViewClient(new MyWebViewClient());
    mWebView.loadUrl("http://stackoverflow.com/");

    OrientationChangeData data = (OrientationChangeData) getLastNonConfigurationInstance();
    if (data != null) {
        mHasToRestoreState = true;
        mProgressToRestore = data.mProgress;
    }
}

To restore the current position you will have to wait the page to be reloaded (
this method can be problematic if your page takes a long time to load)

private class MyWebViewClient extends WebViewClient {
    @Override
    public void onPageFinished(WebView view, String url) {
        if (mHasToRestoreState) {
            mHasToRestoreState = false;
            view.postDelayed(new Runnable() {
                @Override
                public void run() {
                    float webviewsize = mWebView.getContentHeight() - mWebView.getTop();
                    float positionInWV = webviewsize * mProgressToRestore;
                    int positionY = Math.round(mWebView.getTop() + positionInWV);
                    mWebView.scrollTo(0, positionY);
                }
            // Delay the scrollTo to make it work
            }, 300);
        }
        super.onPageFinished(view, url);
    }
}

During my test I encounter that you need to wait a little after the onPageFinished method is called to make the scroll working. 300ms should be ok. This delay make the display to flick (first display at scroll 0 then go to the correct position).

Maybe there is an other better way to do it but I’m not aware of.