Tutorial 11 : Web View Example

Hi, everyone. Do you feel fun with create your own Android application? In this tutorial, we will learn how to navigate a web pages by using web view layout in Android application. It is useful when the application need to show something from the web. It might be easy as just click a button or text to surf the web or net.

1. Create Android Layout

We need to create two Android layout for this tutorial. One is for the main activity layout and another one is for the web activity layout, they are shown in Figure 11.1 and Figure 11.2 respectively.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".webapplication">

    <Button
        android:id="@+id/btnGoogle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Google"
        android:padding="10sp"
        android:textSize="20sp" />

</RelativeLayout>

Figure 11.1

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

Figure 11.2

2. Main Activity

Now setOnClickListen on the display button. When the button is clicked, the main activity will called the web viewer java script and run it. At this moment, a web viewer layout will be popped out and load the desired URL. The source code as shown in Figure 11.3 and Figure 11.4 respectively.

public class webapplication extends Activity {

    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final Context context = this;

        setContentView(R.layout.activity_webapplication);

        button = (Button) findViewById(R.id.btnGoogle);

        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                Intent i = new Intent(getApplicationContext(), WebViewer.class);
                startActivity(i);
            }
        });
    }

Figure 11.3

public class WebViewer extends Activity{

    private WebView webView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.weblayout);
        webView = (WebView) findViewById(R.id.webView1);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://www.google.com");
    }
}

Figure 11.4

3. Android Manifest (Internet Permission)

In this tutorial, we needed to use internet to surf the web. By default, the setting in the Android Manifest.xml don't include internet permission. Thus, you are not able to surf the net without turn-on / add-on the internet permission in your Android application.

The step to turn-on the internet permission is very simple. We just need to add-on one line command before the application tags which is <uses-permission android:name="android.permission.INTERNET" />.

Beside, in this tutorial we are using extra XML layout for the web viewer. Thus we need to add-on the layout activity inside the application tag. If not, our application will be forced stop because of facing an error.

    <activity
               android:name=".WebViewer"
               android:theme="@android:style/Theme.NoTitleBar" />

After add-on all the necessary commands, we are complete for this tutorial. You can get the source code of this tutorial at here. Our Android application should be run well as the video below.

In the next tutorial, we will learn how to sort the contents of the list view in ascending order or descending order. It is an interesting tutorial, please stay tuned to follow my tutorial. :D