Click here to Skip to main content
15,042,814 members
Articles / Mobile Apps / Android
Article
Posted 26 May 2016

Stats

25K views
1.2K downloads
9 bookmarked

A Web Browser App in Android

Rate me:
Please Sign up or sign in to vote.
3.93/5 (6 votes)
26 May 2016CPOL2 min read
This article demonstrates creating a Browser App in Android

Introduction

Sometimes we need to display some online content in our Android App. It would be very helpful if we could use a control that displays such online content directly in our app. The WebView control provides this functionality to our Android app. It enables us to embed a web browser in our activity.

Using the WebView control we can display online content as well as any HTML page stored in our project.

Background

In this article, I have used an EditView control to accept the URL of a web page or a local page. A WebView control is added to render the page on the device. Pressing the GO button after entering the URL will cause the page to be displayed on the WebView control.

Using the code

In order for our activity to access the internet and load web pages in the WebView, we need to specify the Internet permission for our app in the AndroidManifest.xml file as follows:

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

Following is the code of the AndroidManifest.xml file.

XML
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.azim" >
	
	<uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

I have used the following nested Linear Layout to display TextView, EditView, Button and WebView controls.

XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:orientation="horizontal">
		<TextView
			android:id="@+id/txtWebUrl"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Enter URL: " />
		<EditText
			android:id="@+id/edtWebUrl"
			android:layout_width="match_parent"
			android:layout_height="wrap_content" />
	</LinearLayout>
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:orientation="vertical">
		<Button
			android:id="@+id/btnGo"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:onClick="showPage"
			android:text="Go"/>
	</LinearLayout>
	<LinearLayout
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:orientation="horizontal">
        	<WebView
			android:id="@+id/myWebView"
                	android:layout_width="wrap_content"
                	android:layout_height="wrap_content" />
	</LinearLayout>
</LinearLayout>

The android:onClick attribute of the Button view in the above code specifies that the showPage() method is the event handler for the click event of the Go button.

The loadUrl() method of the WebView control is used to load a web page to be displayed. The setBuiltInZoomControls() method of the WebSettings class can be used to display the built-in zoom controls. The setJavaScriptEnabled() method of the WebSettings class can be used to enable JavaScript on the page. The following code snippet is used to load the home page of the Google web site as well as display the built-in zoom controls:

view=(WebView)findViewById(R.id.myWebView);
WebSettings settings=view.getSettings();
settings.setBuiltInZoomControls(true);
settings.setJavaScriptEnabled(true);
view.setWebViewClient(new Callback());
view.loadUrl("http://www.google.com");

In the above code, the setWebViewClient() method prevents loading the URL in the browser of our device. We need to override the onKeyDown() method of our activity in order to enable going back to the previous page in the history of the WebView. Following is the code of the onKeyDown() method.

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

The following click event handler of the Go button displays the page whose URL is entered by the user on the EditText control.

public void showPage(View v)
{
    view.setWebViewClient(new Callback());
    view.loadUrl(text.getText().toString());
}

Finally, we need to override the shouldOverrideUrlLoading() method of the WebViewClient class as follows to prevent the site being opened in the browser of our device.

class Callback extends WebViewClient
{

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url)
    {
        return false;
    }
}

Following is the output of execution of the app.

 

If we have an HTML file called Hello.html stored in the assets folder of the project, it can be opened using the following URL:

file:///android_asset/Hello.html

Points of Interest

I hope this article will help readers in understanding the working of the WebView control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Azim Zahir
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with iFuture Technologies(India) as a Senior Faculty. I enjoy programming as a hobby. During my career I have seen the growth and decline of many technologies, many of them being my favorites like Flash, WPF, Windows Mobile Development. Few of my current favorites are Android, Xamarin and Python, though I also like traditional and evergreen languages like PHP, C#, Visual Basic and Java.

Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
QuestionMessage Closed Pin
14-Oct-20 7:55
MemberAditi Choudhary14-Oct-20 7:55 
GeneralMessage Closed Pin
14-Oct-20 6:09
Memberaditi_tech14-Oct-20 6:09 
SuggestionRe: Request Desktop Site Pin
Member 124750818-Jun-16 20:34
MemberMember 124750818-Jun-16 20:34 
QuestionGood, very good. Pin
Member 125659985-Jun-16 6:40
MemberMember 125659985-Jun-16 6:40 
AnswerRe: Good, very good. Pin
Azim Zahir6-Jun-16 4:34
MemberAzim Zahir6-Jun-16 4:34 
GeneralMy vote of 5 Pin
stackprogramer1-Jun-16 22:31
Memberstackprogramer1-Jun-16 22:31 
GeneralRe: My vote of 5 Pin
Azim Zahir2-Jun-16 7:33
MemberAzim Zahir2-Jun-16 7:33 
Questionfun Pin
stackprogramer1-Jun-16 22:31
Memberstackprogramer1-Jun-16 22:31 
QuestionThank you for this tuto Pin
Charles18726-May-16 7:01
MemberCharles18726-May-16 7:01 
AnswerRe: Thank you for this tuto Pin
Azim Zahir26-May-16 17:05
MemberAzim Zahir26-May-16 17:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.