Android Webview with forward backward and reload page tutorial

Webview in android is builtin tool to create application with web interface. It allows us to include webpage within the app without opening browser.
This tutorial includes webview with forward,backward and reload control.

we will start with creating one layout file.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        
        
        <EditText
            android:id="@+id/edit_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:layout_marginTop="3dp"
            android:hint="Search Url"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="5dp" />

        <Button
            android:id="@+id/btnsearch"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignRight="@+id/edit_search"
            android:layout_centerVertical="true"
            android:layout_marginRight="17dp"
            android:background="@drawable/search_icon"
            android:gravity="right"
            android:paddingBottom="5dp"
            android:paddingRight="5dp"
            android:paddingTop="5dp" />

    </RelativeLayout>



    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="410dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/relativeLayout2"
        android:background="#ffffff" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true" />


</RelativeLayout>



for adding menus add menu item in res/menu/main.xml
I have added image icon for menu so you can add your own icons in drawable folder.

main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.phenomax.xtreme.MainActivity" >

    <item
        android:id="@+id/action_settings"
        android:showAsAction="always"
        android:icon="@drawable/ic_menu_settings"/>
    
     <item
        android:id="@+id/backward"
        android:showAsAction="always"
        android:icon="@drawable/backward"/>
     <item
        android:id="@+id/forward"
        android:showAsAction="always"
        android:icon="@drawable/forward"/>
     <item
        android:id="@+id/reload"
        android:showAsAction="always"
        android:icon="@drawable/reload"/>
      <item
        android:id="@+id/appicon"
        android:showAsAction="always"
        android:icon="@drawable/app_icon"/>
    


</menu>

Create class file for webview. and copy paste following code.

MainActivity.java

package com.ilearn.xtreme;


import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.*;

public class MainActivity extends Activity {
    

WebView web;
ProgressBar progressBar;
ImageButton backw;
ImageButton forw;
ImageButton reload;
ImageButton appbtn;
Button search;
EditText searchurl;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        web = (WebView) findViewById(R.id.webView1);
     
        searchurl=(EditText)findViewById(R.id.edit_search);
        
        
        search.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
           
            searchurl=(EditText)findViewById(R.id.edit_search);
            String urlname=searchurl.getText().toString();
           
            progressBar = (ProgressBar) findViewById(R.id.progressBar);
                progressBar.setProgress(30); 
           
            web.setWebViewClient(new myWebClient());
                web.getSettings().setJavaScriptEnabled(true);
                web.getSettings().setLoadWithOverviewMode(true);
                web.getSettings().setUseWideViewPort(true);
                web.getSettings().setBuiltInZoomControls(true);
                web.loadUrl("http://"+urlname);
                  
                   
            }
          });
        
        
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) { //this method is used for adding menu items to the Activity
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) { //this method is used for handling menu items' events
    // Handle item selection
    switch (item.getItemId()) {

    case R.id.backward:
    if(web.canGoBack()) { //for go back history
    web.goBack();
    }
    return true;

    case R.id.forward:
    if(web.canGoForward()) {  //for go forward
    web.goForward();
    }
    return true;
    
    case R.id.reload:
        {
        web.reload();
        }
        return true;
        
    case R.id.action_settings:
    {
    
    }
    return true;

    default:
    return super.onOptionsItemSelected(item);
    }
    }
    
    
    

    public class myWebClient extends WebViewClient
    {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
    // TODO Auto-generated method stub
    super.onPageStarted(view, url, favicon);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // TODO Auto-generated method stub
                progressBar.setVisibility(View.VISIBLE);
                
    view.loadUrl(url);
    return true;

    }

    @Override
    public void onPageFinished(WebView view, String url) {
    // TODO Auto-generated method stub
    super.onPageFinished(view, url);

    progressBar.setVisibility(View.GONE);
    }
    }

    // To handle "Back" key press event for WebView to go back to previous screen.
public boolean goback(int keyCode, KeyEvent event)
{
if ( web.canGoBack()) {
web.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}

}


Now in the manifest file dont forget to add permission for Internet Access.

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

    <uses-sdk
        android:minSdkVersion="15"
        android:targetSdkVersion="19" />

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

    <application
        android:allowBackup="true"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.ilearn.xtreme.MainActivity"
            android:label="@string/notitle"
             android:icon="@drawable/noicon"
         >
          
          <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category                      android:name="android.intent.category.LAUNCHER" />

            </intent-filter>
  
        </activity>
        
    </application>


</manifest>