Android: WebView tips & tricks

Android: WebView tips & tricks | Mr.Stablex blog

Android: WebView tips & tricks
WebView is one of the most useful view component in Android SDK.
In fact, if you want to display complex HTML content (for simple HTML formatting TextView is enough), add JavaScript support to it, etc., the only choice you have is to use WebView component to handle all that stuff. Moreover, WebView can be configured to support pinch-to-zoom, custom URL handling, etc.
As you can see it is a really powerful component in Android components toolbox!

In this post I want to highlight several aspects of WebView usage, as long as some of them can cause confusion if you haven't met them before.

1. Display HTML data with special characters (ö, ü, ä, etc.)
It's better to set UTF-8 encoding explicitly, because some Android versions (e.g. 4.0)apparently ignore encoding inside the HTML.

Solution:
myWebView.loadData(myHtmlString, "text/html; charset=UTF-8", null);
2. Show/hide progress indicator during web page loading
No surprises here, just a tip for a common task! :-)

Solution:set custom WebViewClientwith overriden onPageStarted, onPageFinished methods
mWebView.setWebViewClient(new WebViewClient() {    @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        super.onPageStarted(view, url, favicon);        mProgressView.setVisibility(View.VISIBLE);    }    @Override    public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        mProgressView.setVisibility(View.INVISIBLE);    }});
3. Open some URLs with WebView, open other URLs by the default web browser
By default WebView opens all URLs in an external web browser. But if you set custom web client to the WebView (e.g. see 2nd section before), then it will open all URLs within itself. So, you need to override shouldOverrideUrlLoadingand implement your custom way to decide how to proceed (open within or external browser).

Solution: set custom WebViewClient and override shouldOverrideUrlLoading
mWebView.setWebViewClient(new WebViewClient() {    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        // open URL in the web view itself        if (url.contains("sample.com"))            return super.shouldOverrideUrlLoading(view, url);        // open URL in an external web browser        else {            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));            return true;        }    }});
4. Adjust WebView height when content changes
If you create application like Pocket, Readability or any other HTML content related application - you probably will end up with the need to change WebView content dynamically. It can be loading of the next article, or changing font size to improve users eyes comfort, etc.
And the tricky part here is that WebView (with layout_height="wrap_content") doesn't shrink down to wrap the new content with smaller height. It grows up correctly (e.g. if you increased font size or loaded an article that is bigger than the previous one). But if you load a tiny article, or set smaller font size - you will see WebView with height as if the previous longer data is still displaying. So there will be white blank space below the content. Why? Seems like a WebView bug. You can google to find that many people complain about it. For example:
http://stackoverflow.com/questions/1973565/how-to-resize-a-android-webview-after-adding-data-in-it
http://stackoverflow.com/questions/10845701/webview-size-is-expanding-but-not-contracting-as-per-the-text-in-it?lq=1

Solution:
There are lots of suggestions such as: hide and show WebView, check that layout_widthwas set to "wrap_content", use FrameLayout, and more. And none of them work. So I needed a solution.
The first solution I found is to create a new WebView instance and load required data into it. A fresh WebView instance has a zero height so any data will be taller and all works fine. But, it's quite ineffective to instantiate WebView all the time, also there is a blinking when an theWebView instance is replaced with a new one.
Now I needed a better solution! :-) And I've found it!
My solution is to load empty data to the WebView , before smaller content can be/should be loaded. And immediately after it proceed to the required action (e.g. load a new article, decrease font size).
// load empty data to shrink the WebView instancemArticleWebView.loadUrl(Constants.ASSETS_EMPTY);// load real datamArticleWebView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
Where Constants.ASSETS_EMPTY is just a string constant pointing to the static empty HTML page in the assets folder. So Constants.ASSETS_EMPTY value is " file:///android_asset/Empty.html ".

With this workaround I am able to implement seamless articles switching and font size changing in my application ! :-)

Android: WebView tips & tricks

更多相关文章

随机推荐