Pr.Pg Next Pg

WebView Tutorials

 

Introduction

 

  • We are now moving towards the internet.

  • A View that displays web pages.

  • This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

  • If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView. The WebViewclass is an extension of Android's View class that allows you to display web pages as a part of your activity layout.

  • It does not include any features of a fully developed web browser, such as navigation controls or an address bar.

  • All that WebView does, by default, is show a web page.

  • Basically in this tutorial we are going to build a Web Browser that will introduce to how to use internet and surf on the net.

 

Application Example

 

  • We first build a normal XML layout so that our screen looks something like this.

  • Below is the XML code of the file webbrowser.xml.

 

 

webbrowser.xml

 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

 

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:weightSum="10">

 

<EditText

android:id="@+id/etUrl"

android:singleLine="true"

android:hint="Enter a url"

android:scrollHorizontally="true"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="2">

 

<requestFocus />

</EditText>

 

<Button

android:id="@+id/bGo"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="8"

android:gravity="center"

android:text="Go" />

</LinearLayout>

 

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:weightSum="100">

 

<Button

android:id="@+id/bForward"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Forward"

android:layout_weight="25" />

 

<Button

android:id="@+id/bBack"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Back"

android:layout_weight="25" />

 

<Button

android:id="@+id/bRefresh"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Refresh"

android:layout_weight="25"/>

 

<Button

android:id="@+id/bClearHistory"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_weight="25"

android:text="Clear" />

</LinearLayout>

<WebView android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/wvBrowser"/>

 

</LinearLayout>

 

 

  • In the Edit Text we will enter the URL of the website.

  • On pressing the Go button we will navigate to the desired webpage.

  • On pressing the Back button we will go to the previous page and on pressing the Forward button we will go to the next page if it exist.

  • We also have a button to refresh the page and a button to Clear the history so that the Back and Forward buttons will not have effect.

  • We then make a java file for our activity named Browser.java.

 

 

Browser.java

 

package com.example.helloandroid;

 

import android.app.Activity;

 

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.Button;

import android.widget.EditText;

 

public class Browser extends Activity implements OnClickListener {

EditText url;

WebView ourBrowser;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.webbrowser);

ourBrowser = (WebView) findViewById(R.id.wvBrowser);

ourBrowser.getSettings().setJavaScriptEnabled(true);

// ourBrowser.getSettings().setLoadWithOverviewMode(true);

// ourBrowser.getSettings().setUseWideViewPort(true);

 

ourBrowser.setWebViewClient(new ourWebViewClient());

url = (EditText) findViewById(R.id.etUrl);

Button go = (Button) findViewById(R.id.bGo);

Button forward = (Button) findViewById(R.id.bForward);

Button back = (Button) findViewById(R.id.bBack);

Button clearHistory = (Button) findViewById(R.id.bClearHistory);

Button refresh = (Button) findViewById(R.id.bRefresh);

go.setOnClickListener(this);

forward.setOnClickListener(this);

back.setOnClickListener(this);

clearHistory.setOnClickListener(this);

refresh.setOnClickListener(this);

 

}

 

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

switch (arg0.getId()) {

case R.id.bGo:

String website = url.getText().toString();

ourBrowser.loadUrl(website);

//hide keyboard after entering the url

InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);

imm.hideSoftInputFromWindow(url.getWindowToken(), 0);

 

break;

case R.id.bForward:

if (ourBrowser.canGoForward())

ourBrowser.goForward();

break;

case R.id.bBack:

if (ourBrowser.canGoBack())

ourBrowser.goBack();

break;

case R.id.bClearHistory:

ourBrowser.clearHistory();

break;

case R.id.bRefresh:

ourBrowser.reload();

break;

}

 

}

 

public class ourWebViewClient extends WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url1) {

// TODO Auto-generated method stub

url.setText(url1);

view.loadUrl(url1);

 

return true;

 

}

}

}

 

 

  • We do the initial set up of java file in the same way we have done for previous activities.

  • We set our Content View to our Web View.

  • Then we get all the references to our XML entities.

  • We also set up a call to the onClick() for our buttons.

  • Within the onClick() method we assign actions corresponding to each button.

  • For the Go button we load our view with the URL obtained from the EditText.

  • For the refresh button we load the reload() the page.

  • For the Forward and Back button we have to check if we can go back or forward i.e if the browsing history exists.

  • If it doesn’t then clicking these buttons wouldn’t do anything.

  • There is also a predefined clearHistory() method to clear he history.

  • When we run the application, we will find that after opening the webpage, if we click on any of the links it passes an Intent to our default android inbuilt browser.

  • To make sure that the link opens in our application, we use the method setWebViewClient() which takes in as a parameter a WebViewClient object.

  • Hence we pass an object of a new class named ourWebViewClient which extends WebViewClient.

  • In that class we override the method shouldOverrideUrlLoading() so that our view loads the new url instead of the default browser.

  • In this case we have included this class inside our main class. You can also make another file for this.

  • We have also set up our EditText with our new Url.

  • We also use a certain settings such as setJavaScriptEnabled() so as to enable javaScript in our webpage for sites such as YouTube.

  • Note The URL typed should be a complete URL I.e including http:// .

  • Below are the screenshots of the application.

 

 

Pr.Pg border                                              Next Pg