Develop Reference

Android webview doesn't finish rendering text

I'm developing an application that requires somewhat complex html rendering (basically text and images, but the text may have some advanced features like custom font and path) and I'm using webviews to render the content.
The problem is that some of the pages doesn't render text in some devices.
I'm using all three callbacks:
onPageFinished;
onProgressChanged;
onNewPicture (deprecated, but some users related that it works)
but even if they're triggered I get a WebView that is missing the text in most of the pages. On some devices when I touch the webview the text appears, but it's an erratic behaviour that can't be trusted.
I also tried called invalidate() constantly but it doesn't force the text to draw. I'm logging the webview console and apparently it's not throwing any error (notice that sometimes the text is rendered perfectly and the problem occurs for pages that rendered correctly before). I'm configuring my webview like (I know that some methods are deprecated, but some other solutions related that it worked for then):
offScreenWebView.layout(0, 0, viewPortWidth, viewPortHeight);
offScreenWebView.getSettings().setUseWideViewPort(true);
offScreenWebView.getSettings().setLoadWithOverviewMode(true);
offScreenWebView.getSettings().setTextZoom(100);
offScreenWebView.setDrawingCacheEnabled(true);
offScreenWebView.getSettings().setJavaScriptEnabled(true);
offScreenWebView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
offScreenWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
if(Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
offScreenWebView.enableSlowWholeDocumentDraw();
}
I'm at loose now, because I've no clue why the text doesn't render and it seems I can't force it to render.

I've managed to somewhat solve my problem. The main issue I was having was due to the webviews were being loaded simultaneously (they're used at a viewpager) and probably this incurred in some concurrency problem when the webviews were loading the font. I encapsulated the URL loading and ensured that the webviews were loaded one page at a time.
Also, when destroying the webviews I couldn't call any method like cancelTimer, this resulted in problems when rendering other pages with similar font. The only thing I did was to point the references to null.
It's somewhat slow but at least it was the only way to get consistent rendering results using the webviews.

This is probably due to the latest update to Android System Web View, that comes automatically from Google Play. If you uninstall the update, it helps. It is of course not a really good solution((((
Another workaround is disable HW accelleration in the webview

Android webview: wait with drawing of page until it's completely loaded

I'm working on an android app (just a ChromeWebView that connects to a specific website), and it all works fine, except for the fact that you see the page loading just like on your computer.
Is it possible to, if I click a link for example, wait with the redrawing of the page until it's completely loaded and then pops up at once?

First make your layout background color white then make the WebView invisible.
after this use AsyncTask then put your webview loading in doInBackground and when it's finished in onPostExecute make your webview visible.
so the user will see the white layout first then the visible webview after fully loaded in postexcute
you could use onpagefinished instead of AsyncTask like this :
mWebView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
// your code }
});
sorry if my english not good

Android: Improve WebView speed loading local HTML files?

I'm embedding some HTML content (stored locally) in my android application and using a WebView to render it. I'm finding that I always "see" the HTML content being loaded (ie. white bg before the page is rendered), even though it's located as an "asset" inside the app.
To mask this "issue", I'm currently hiding the WebView, sub-classing the onPageFinished() method and showing a ProgressDialog until I the page completes. Which is annoying coz we're only talking seconds here.
I've seen suggestion of using the following:
webview.getSettings().setRenderPriority(RenderPriority.HIGH);
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
...but this doesn't seem to help.
Has anyone managed to overcome this?
(If I could change the WebView's initial bg colour, it might be an improvement, but not ideal)
Many thanks.

White space at the bottom of WebView in Android

I'm developing an Android application and I'm loading one google maps iframe in a WebView, just like this one:
http://maps.google.es/maps/empw?url=http:%2F%2Fmaps.google.es%2Fmaps%3Ff%3Dq%26source%3Ds_q%26hl%3Des%26geocode%3D%26q%3Dmadrid%26aq%3D%26sll%3D40.396764,-3.713379%26sspn%3D11.856886,23.269043%26vpsrc%3D0%26ie%3DUTF8%26hq%3D%26hnear%3DMadrid,%2BComunidad%2Bde%2BMadrid%26t%3Dm%26z%3D10%26ll%3D40.416691,-3.700345%26output%3Dembed&hl=es&gl=es
It is showing correctly in Android emulator, but when I try in a real device a white space quite big appears at the bottom of the screen, so you can't see the whole iframe. I tried with two mobiles, one with android 2.2 and another one with android 2.3
I had a look to this one which sounds the same thing:
Problem with extra space at the bottom of android Webview
but it didn't work for me. Also tried some other things I read about like:
webView.getSettings().setUseWideViewPort(true);
webView.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading (WebView view, String url) {
view.loadUrl(url);
return false;
}
});
but nothing worked. Any idea?
Thanks in advance.

I can see the <body> element at the link you posted has bottom margin of 14px - maybe that's it? You can eliminate it using a JavaScript snippet in your WebView after you have loaded the page, like this:
myWebView.loadUrl("javascript:document.getElementsByTagName('body')[0].style.marginBottom = '0px'");
also, there is a 44px margin on the right, if you wanna get rid of that one also, should be something like this:
myWebView.loadUrl("javascript:document.getElementsByTagName('body')[0].style.marginBottom = '0px';document.getElementsByTagName('body')[0].style.marginRight = '0px';");
Also, to future-proof your app, you may want to set all four margins to 0, just in case.

Set the bottom and right margins to 0:
webView.loadUrl("javascript:document.body.style.marginBottom=document.body.style.marginBottom= '0px'");

It could be the problem with your XML.
Can you check that your WebView is not inside the ScrollView or anything which is having its inbuilt scroll. It might result in extra white spaces.

The other answers didn't work for me but this did:
webView.loadUrl("javascript:(function () {document.getElementsByTagName('body')[0].style.marginBottom = '0'})()");

JQTouch android webView configuration

I'm developing an application which is mainly a webview and will display a JQTouch UI. Two of the 3 views work just fine, however, I have a view which loads another page with a form which does not work at all. This view loads up just fine but when I click the link to go to the form the link just stays highlighted and nothing happens. I have overriden all of the methods in webviewclient and webchromeclient and placed breakpoints within with no luck. None of the hooks catch when I click the links.
The part that truly confounds me is that it works in the phones browser but not in my webview. Is there a setting on webview that I may be missing which would make it act like the phones browser?
Any help or suggestions would be appreciated.

The fix for this was to override onLoadResource as the link was being treated as a resource and not a new page load. I tried calling webView.loadUrl right in the override of loadREsource but that caused an endless loop so I had to write some logic to load the url properly into my webView. This seems a bit hacked but it works.