Wednesday, July 28, 2010

Create your own Browser using WebView

Using a WebView activity, you can display webpages over the Internet or display webpages or any other content from your device's drive. You might use this webview as a Webkit in your applications to display web contents, which can even have integrated Javascripts.


WebView activity will use the Internet, so you must add the Internet usage permission in your AndroidManifest.xml file.


 <uses-permission android:name = "android.permission.INTERNET"/>
In order to create a WebView, firstly you must create your layout including a WebView content. You can put a WebView into your layout xml file and in set its width and height as "fill_parent" to reach a fullscreen view.


Then in your main Activity, define a WebView and associate it with your layout.

 mWebView = (WebView) findViewById(R.id.web_view);
For a WebView you have a few choices about displaying contents. You can open a URL, you can create your HTML code inside your Activity and display it, you can open HTML files from your device's drive and also you can display other contents from your device's drive.


 // Loading a URL
 mWebView.loadUrl("http://www.androtips.com");

 // Loading HTML code created in the Activity
 String data = "<html><body><h2>Hello WebView</h2></body></html>";
 String mimeType = "text/html";
 String encoding = "utf-8";
 mWebView.loadData(data , mimeType , encoding);
 // Loading an HTML file or any content from sd card
 String filePath = "file:///data/data/com.webkitdemo/test.html";
 mWebView.loadUrl(filePath);

Now you have a basic WebView to display your contents. The problem with this default WebView is, when you click to a link in the webpage, Android will attempt to open its default Browser. Of course we want to open any links from our WebView open in our own WebView. To do this, we must add this small inner-class to our Activity.

 private class mWebViewClient extends WebViewClient {
    
     /** Opens new links in the same WebView instead of opening it in Browser Application.
* 
      */
     @Override
        public boolean shouldOverrideUrlLoading(WebView view , String url) {
view.loadUrl(url);
            return true;
        }
    }

Another good feature to add to our activity is setting the behavior of the Back button of device. So that we can go back from a link we went from our WebView.

 @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

Because we have small display sizes on mobile devices, we might need to add zoom controls to our WebView to enhance readability. In order to add zoom controls, you must add this controls into your onCreate method.

 @Override
    public void onCreate(Bundle savedInstanceState) {
        ...
        ...
// Zoom controls
        FrameLayout mContentView = (FrameLayout) getWindow().getDecorView().findViewById(android.R.id.content);
        final View zoom = this.mWebView.getZoomControls();
        mContentView.addView(zoom, ZOOM_PARAMS);
        zoom.setVisibility(View.GONE);
...
...
}

Your WebView is ready to use now. You can display any content in this WebView and integrate it into your Applications.


Enjoy!

No comments:

Post a Comment