Use Horizontal Scroll in Android WebView

Question

I am currently using epublib-core to read epubs and display them in Android WebView with the following code -

webView.loadDataWithBaseURL(baseURL, new String(spineReferences.get(chapter/* <- int*/).getResource().getData()), "text/html", "utf-8", null);

But it's using Vertical Scroll whereas I want a HorizontalScroll. After searching the web, I found Monocle, but I don't know how to integrate Monocle with epublib and WebView. Any idea on how to use horizontal scroll?

Answer 1

Atlast, I could enable Horizontal Scroll in the app (without any Page Transitions). Use this code to scroll horizontally -

Create custom WebViewClient -

public class CustomWebClient extends WebViewClient {
private Context mContext;

public CustomWebClient(Context context) {
    this.mContext = context;
}

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);

    final MyWebView myWebView = (MyWebView) view;

    String varMySheet = "var mySheet = document.styleSheets[0];";

    String addCSSRule = "function addCSSRule(selector, newRule) {"
            + "ruleIndex = mySheet.cssRules.length;"
            + "mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);"

            + "}";

    String insertRule1 = "addCSSRule('html', 'padding: 0px; height: "
            + (myWebView.getMeasuredHeight() /  mContext.getResources().getDisplayMetrics().density)
            + "px; -webkit-column-gap: 0px; -webkit-column-width: "
            + myWebView.getMeasuredWidth() + "px;')";

    myWebView.loadUrl("javascript:" + varMySheet);
    myWebView.loadUrl("javascript:" + addCSSRule);
    myWebView.loadUrl("javascript:" + insertRule1);

}
}

Edit -

I integrated epub lib with Monocle for nice effects, and here is the link to the whole source code - https://drive.google.com/drive/folders/0B8UizUpBrF1YX3UxcW5nLUVQMEk