Android Basic Training Course: WebView in Android

    Android is like other platforms, in which you can embed a Web browser in application Activity - to display HTML or full-featured web browser by a widget named WebView. This is a Web browser based on WebKit Android - as a means to create Apple's Safari Web browser.

Loading HTML text

    Basically, WebView can display the text in HTML format. Usually, in order to easily to management, we put an WebView instance in xml layout file like another widget:
    In programmatically code, we locate it from layout, declaring a sample html string and load it to the WebView by calling loadData():
    After running, this screen will be:

Loading Online Website

    Of course, the main mission of a Webkit browser is loading websites. It's similar to loading offline html text, with WebView, if you want to loading and URL site, firstly, creating a subclass of WebViewClient and override shouldOverrideUrlLoading() method:

private class CustomWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

    Set it to WebView by calling setWebViewClient(), so our Activity code will become:

package devexchanges.info.webviewexample;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView)findViewById(R.id.web_view);

        webView.setWebViewClient(new CustomWebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://www.devexchanges.info/");
    }

    private class CustomWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

    Running app again, we have this output screen:

 
    Common Error:

• URL String don't contains "http://" prefix usually cause crashed or cannot load data!
• Remember adding INTERNET permission if you want your app connect with online resource, please add this line above <application> tag:

Declaring more options to support Web browsing

     Like any widgets, WebView also has some attributes/method to make it more flexible:

• reload(): reload the web page you're viewing.
• goBack(): go back one step in the browsing history
• canGoBack(): determine whether there is history to be back or not.
• goForward(): a step forward in the browser history.
• canGoForward(): determine whether to proceed to history or not.
• goBackOrForward(): go back or go forward in the browser history, in which a negative number as a parameter representation is behind many steps, a positive number indicating a need to move beyond How many steps before.
• canGoBackOrForward(): determine if the browser can forward or backward with the step is passed on or not (value passed into positive / negative has been explained above).
• clearCache(): delete the browser cache resources.
• clearHistory(): delete the browser history.

    Moreover, in WebView, getSetting() method return a WebSetting instance, there are plenty of options on that you can use, some methods you will find useful:

• Control the font size through setDefaultFontSize() (to use a exactly size) or setTextSize() (to use the constants specified relative sizes like LARGER or SMALLEST).
• Control JavaScript through setJavaScriptEnabled() (true or false) (I used in example above).
• Control web content creation through methods setUserAgent(), so that you can know which web host you're using any device (desktop, mobile phone or whatever ).

    Note: The settings you change is not permanent, so you should save them in somewhere (through tools such as Preferences) if you are allowing your users to decide what custom settings instead of having to follow the set is available in your application.

Conclusions

    Through this post, I hope that you can learn some basic knowledge about WebView, which display as a Web browser in Android. In next post, we will discuss about Popup messages - the notification system in our app!
    References to official docs page:
- WebView: http://developer.android.com/reference/android/webkit/WebView.html
- WebSettings: http://developer.android.com/reference/android/webkit/WebSettings.html
- Webkit package: http://developer.android.com/reference/android/webkit/package-summary.html

Previous Chapter

Table Of  Contents

Next Chapter

Author : Hong Thai

Share