Build a simple Android web browser in Eclipse

In this post you will learn to make a simple android web browser using java. You also get to know more about webview, WebViewClient etc.

Its normally impossible for a person to remember the entire functions/code in android java. Remembering a nutshell is always a good solution.

So here is a nutshell of what we are going to do here.

NUTSHELL

  • Android uses Webview container to load the web URL in the application intend.
  • loadUrl(“http://www.google.com”) is the function for loading the url.
  • Webview container should be configured with a WebViewClient , so that the sites opens up in our application rather than launching other browsers.
  • wv.canGoBack(); //to configure that webview can have back and forward functionalities.
    wv.canGoForward();
    ...
    wv.goBack();
    wv.goForward();

     

  • use WebChromeClient  to use the progress bar functionalities.
  • URL passed to the webview should be validated, ie it should be having http:// or https:// . We have used
    url = URLUtil.isValidUrl(url) ? addr.getText().toString() : "http://" + addr.getText().toString();

[wpi_designer_button text=’Download’ link=’https://github.com/arjunsk/simple-android-browser/’ style_id=’48’ icon=’github’ target=’_blank’]

So let us see how it is implemented in here:

LEVEL 1 : [Basic Level ]

  1. Create a project with blank activity ( MySimpleBrowserActivity ).
  2. We need to add webveiw to XML file.
<WebView
        android:id="@+id/wvContent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="-5dp"
        android:layout_marginRight="-5dp"
        android:layout_marginTop="-5dp" />

 

3. In the MainActivity ie here MySimpleBrowserActivity

import android.app.Activity;
...
public class MySimpleBrowserActivity extends Activity {
...
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//Object initializing
WebView wv;
String url;

// connecting XML to Java
wv = (WebView) findViewById(R.id.wvContent);
url ="http://www.google.com"
wv.loadUrl(url);
}

 

4. Add the Internet Access permission the Android Manifest File.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tricks4speed.skbrowser"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:icon="@drawable/icon"
        android:label="ASK" >

 

5. Is this complete yet. No!

LEVEL 2: [ Intermediate level ]

  1. MySimpleBrowserActivity.java
import android.app.Activity;
import android.location.Address;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.URLUtil;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MySimpleBrowserActivity extends Activity implements
        OnClickListener {

    WebView wv;
    ImageButton bAddress, bKeyword;
    Button bBack, bForward, bOption, bRefresh;
    EditText addr, keyword;

    // for setting WebView Client to wv rather than opera browser
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

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

        // progresss Bar initialisation
        getWindow().requestFeature(Window.FEATURE_PROGRESS);

        setContentView(R.layout.main);
        initialise();

        // to set go back and go forward
        wv.canGoBack();
        wv.canGoForward();

        // enable javascript for webview and flash
        WebSettings webSettings = wv.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setPluginsEnabled(true);

        // setting new WebViewClient so at to prevent opera from opening the
        // site
        wv.setWebViewClient(new MyWebViewClient());

        bAddress.setOnClickListener(this);
        bKeyword.setOnClickListener(this);

        bBack.setOnClickListener(this);
        bForward.setOnClickListener(this);
        bOption.setOnClickListener(this);
        bRefresh.setOnClickListener(this);

        // setTitle(wv.getTitle());

    }

    public void initialise() {
        wv = (WebView) findViewById(R.id.wvContent);

        bAddress = (ImageButton) findViewById(R.id.bAddr);
        bKeyword = (ImageButton) findViewById(R.id.bKeyword);
        bBack = (Button) findViewById(R.id.Back);
        bForward = (Button) findViewById(R.id.Forward);
        bOption = (Button) findViewById(R.id.Options);
        bRefresh = (Button) findViewById(R.id.Refresh);

        addr = (EditText) findViewById(R.id.etAddr);
        keyword = (EditText) findViewById(R.id.etKeyword);

    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub

        try {

            // <<<<<<<<<<<<<<<<<PROGRESS BAR>>>>>>>>>>>>
            // set a webChromeClient to track progress
            wv.setWebChromeClient(new WebChromeClient() {
                public void onProgressChanged(WebView view, int progress) {
                    // update the progressBar
                    MySimpleBrowserActivity.this.setTitle("Loading...");
                    MySimpleBrowserActivity.this.setProgress(progress * 100);

                    //set the title of the layout
                    if(progress == 100)
                        MySimpleBrowserActivity.this.setTitle(R.string.app_name);
                }
            });

            switch (v.getId()) {
            case R.id.bAddr:
                String url = addr.getText().toString();
                if (url != "") {
                    url = URLUtil.isValidUrl(url) ? addr.getText().toString()   : "http://" + addr.getText().toString();
                    wv.loadUrl(url);
                    addr.setText(url);
                    wv.requestFocus();
                }
                break;
            case R.id.bKeyword:
                String key = keyword.getText().toString();
                if (key != "") {
                    key = "http://www.google.com/search?q="+ keyword.getText().toString();
                    wv.loadUrl(key);
                    addr.setText(key);
                    wv.requestFocus();
                }
                break;

            case R.id.Back:
                wv.goBack();
                break;

            case R.id.Forward:
                wv.goForward();
                break;

            case R.id.Options:
                break;

            case R.id.Refresh:
                wv.reload();
                break;

            }

        } catch (Exception e) {
            // TODO: handle exception]
            e.printStackTrace();
        }

    }

 

2. Layout — > main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="9" >

    <!-- Address Bar and Searchn Bar -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="4"
        android:baselineAligned="false"
        android:orientation="horizontal"
        android:weightSum="10" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:orientation="horizontal"
            android:weightSum="10" >

            <EditText
                android:id="@+id/etAddr"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="-5dp"
                android:layout_marginRight="-4.5dp"
                android:layout_weight="2"
                android:hint="Address"
                android:maxLines="1"
                android:scrollHorizontally="true"
                android:singleLine="true" />

            <ImageButton
                android:id="@+id/bAddr"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="-5dp"
                android:layout_marginRight="-4.5dp"
                android:layout_weight="8"
                android:contentDescription="Address"
                android:src="@drawable/search"
                android:text="GO" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="6"
            android:orientation="horizontal"
            android:weightSum="10" >

            <EditText
                android:id="@+id/etKeyword"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="-5dp"
                android:layout_marginRight="-4.5dp"
                android:layout_weight="3"
                android:hint="Search"
                android:maxLines="1"
                android:scrollHorizontally="true"
                android:singleLine="true" />

            <ImageButton
                android:id="@+id/bKeyword"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="-5dp"
                android:layout_marginRight="-4.5dp"
                android:layout_weight="7"
                android:contentDescription="Search Keyword"
                android:src="@drawable/search"
                android:text="GO" />
        </LinearLayout>
    </LinearLayout>

    <!-- The Body -->

    <WebView
        android:id="@+id/wvContent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="-5dp"
        android:layout_marginRight="-4.5dp"
        android:layout_marginTop="-5dp"
        android:layout_weight="1" />

    <!-- The bottom options -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="4"
        android:orientation="horizontal"
        android:weightSum="20" >

        <Button
            android:id="@+id/Back"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="-5dp"
            android:layout_marginRight="-4.5dp"
            android:layout_weight="5"
            android:text="@string/back" />

        <Button
            android:id="@+id/Forward"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="-5dp"
            android:layout_marginRight="-4.5dp"
            android:layout_weight="5"
            android:text="@string/forward" />

        <Button
            android:id="@+id/Refresh"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="-5dp"
            android:layout_marginRight="-4.5dp"
            android:layout_weight="5"
            android:text="Refresh" />

        <Button
            android:id="@+id/Options"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="-5dp"
            android:layout_marginRight="-4.5dp"
            android:layout_weight="5"
            android:text="Options" />
    </LinearLayout>

</LinearLayout>

 

3. The AndroidManifest.xml

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.arjunsk.browser"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.INTERNET"/>

<application
android:icon="@drawable/icon"
android:label="ASK" >
<activity
android:windowSoftInputMode="adjustPan"
android:name=".MySimpleBrowserActivity"
android:label="ASK Browser" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s