Utilizing WebView in my application to display html content for reading ebooks presented a challenge during development. After parsing the ebook and converting it into an html string, I load this string into the WebView component.
myView.setVerticalScrollBarEnabled(false);
myView.setHorizontalScrollBarEnabled(false);
myView.getSettings().setDisplayZoomControls(false);
myView.getSettings().setJavaScriptEnabled(true);
if (Build.VERSION.SDK_INT >= 11) myView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
myView.loadDataWithBaseURL("file:///android_asset/Text/", ebookContent, "text/html", "UTF-8", null);
To navigate horizontally through pages, I use 'myView.scrollTo(width of myView * countPages, 0)'. The formatting and styling of the content is achieved by implementing HTML formatting recommended by Uday Sravan K.
myView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
// implementation details here...
// more code here...
});
The process involves splitting up the content within the WebView into chunks sized based on the width of the webview. While single-column display works well across various emulators and orientations, issues arise when dividing content into two columns due to discrepancies in widths between the page and the WebView.
For instance, on a device like Nexus 7 with specific dimensions, the calculated lengths may not align perfectly when displayed in two columns. This discrepancy can lead to artifacts and visible edges of neighboring pages creeping into the viewing region.
Efforts to dynamically adjust the content size or zoom level to rectify this issue have proven challenging as they affect the overall layout and readability of the content.
Seeking advice on better strategies to handle two-column display within WebView while maintaining precise positioning and preventing visual artifacts.