In this tutorial I will guide you to make simple web browser in android.
Android provides an awesome UI widget known as WebView. It is used to load web pages and view HTML data. We will use WebView class to make a simple browser with some functionality.
If you don’t know about WebView then I would recommend you to read my previous tutorial on it.
Read: Android WebView Example
How to Make Simple Browser in Android
I used some methods of WebView class that perform following functions.
loadUrl(): It loads a web page from url
canGoBack(): It checks if previous page history is available
goBack(): Go to previous page
canGoForward(): It checks if next page history is available
goForward(): Go to next page
reload(): Reload current page
stopLoading(): stop loading of current page
This browser will allow you to do following things.
- Open a web page url.
- Cancel loading of a web page.
- Go to previous or next web page.
- Reload a web page.
- See the progress of loading of web page in progress bar.
Create an android project with package name com.androidbrowser and add following code in respective files.
activity_main.xml
<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="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp" tools:context=".MainActivity"
android:orientation="vertical">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="1"
style="?android:attr/progressBarStyleHorizontal"
android:id="@+id/progress"
android:max="100"
android:layout_alignParentTop="true"
android:indeterminate="false"
android:visibility="gone"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_below="@+id/progress"
android:id="@+id/topBar">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type URL and Press Enter..."
android:id="@+id/urlBox"
android:singleLine="true"
android:imeOptions="actionSearch"
android:paddingLeft="5dp"/>
<Button
android:layout_width="35dp"
android:layout_height="wrap_content"
android:id="@+id/cancel"
android:text="x"
android:visibility="visible"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
android:layout_below="@+id/topBar"
android:layout_above="@+id/bottomBar"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:id="@+id/bottomBar"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Back"
android:id="@+id/back"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Forward"
android:id="@+id/forward"
android:layout_toRightOf="@+id/back"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/refresh"
android:text="Reload"
android:layout_toRightOf="@id/forward"/>
</RelativeLayout>
</RelativeLayout>
MainActivity.java
package com.androidbrowser;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
public class MainActivity extends Activity {
EditText urlBox;
WebView webView;
Button back,forward,refresh,cancel;
ProgressBar progress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
urlBox = (EditText)findViewById(R.id.urlBox);
webView = (WebView)findViewById(R.id.webView);
back = (Button)findViewById(R.id.back);
forward = (Button)findViewById(R.id.forward);
refresh = (Button)findViewById(R.id.refresh);
cancel = (Button)findViewById(R.id.cancel);
progress = (ProgressBar)findViewById(R.id.progress);
webView.setWebViewClient(new CustomWebViewClient());
webView.setWebChromeClient(new CustomWebChromeClient());
urlBox.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
//when enter is pressed in edittext, start loading the page
if (keyCode == KeyEvent.KEYCODE_ENTER) {
webView.loadUrl(urlBox.getText().toString());
return true;
}
return false;
}
});
//go to previous page
back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(webView.canGoBack()){
webView.goBack();
}
}
});
//go to next page
forward.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(webView.canGoForward()){
webView.goForward();
}
}
});
//reload page
refresh.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webView.reload();
}
});
//cancel loading page
cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webView.stopLoading();
}
});
}
public class CustomWebViewClient extends WebViewClient
{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
public class CustomWebChromeClient extends WebChromeClient{
@Override
public void onProgressChanged(WebView view, int newProgress) {
progress.setProgress(newProgress);
urlBox.setText(view.getUrl());
if (newProgress == 100) {
cancel.setVisibility(View.GONE);
progress.setVisibility(View.GONE);
} else {
cancel.setVisibility(View.VISIBLE);
progress.setVisibility(View.VISIBLE);
}
}
}
}
Note: Make sure you add internet access permission. Just add following line in AndroidManifest.xml file.
<uses-permission android:name="android.permission.INTERNET"/>
That’s it, you have done. Just run the project and enjoy browsing internet.
Output
Watch Demo
Comment below if you have any doubts related to above tutorial. If you liked it then take your few seconds to share with others.
Happy Coding!! 🙂 🙂