Android WebView Tutorial

1- What is Android WebView?

  • TODO: More Info

2- Android WebView example

Create a project named AndroidWebView:
Your application will connect to the internet, so you need to configure to allow this in AndroidManifest.xml, add config:
<uses-permission android:name="android.permission.INTERNET" />
Full content of AndroidManifest.xml:
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.o7planning.androidwebview">

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

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

</manifest>

 
The application interface:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_addressBar"
        android:hint="Enter URL"
        android:focusable="true"
        android:textColorHighlight="#ff7eff15"
        android:textColorHint="#ffff25e6"
        android:layout_marginTop="10dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/webView"
        android:layout_alignEnd="@+id/webView" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Static Content"
        android:id="@+id/button_static"
        android:layout_below="@+id/editText_addressBar"
        android:layout_toLeftOf="@+id/button_go"
        android:layout_toStartOf="@+id/button_go" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go"
        android:id="@+id/button_go"
        android:layout_below="@+id/editText_addressBar"
        android:layout_alignRight="@+id/webView"
        android:layout_alignEnd="@+id/webView" />

    <WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/button_go" />

</RelativeLayout>
MyWebViewClient.java
package org.o7planning.androidwebview;

import android.graphics.Bitmap;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;


public class MyWebViewClient extends WebViewClient {

   private EditText addressBar;

   public MyWebViewClient(EditText addressBar) {
       this.addressBar= addressBar;
   }

   // When you click on any interlink on webview.
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
       Log.i("MyLog","Click on any interlink on webview that time you got url :-" + url);
       addressBar.setText(url);
       return super.shouldOverrideUrlLoading(view, url);
   }

   // When page loading
   @Override
   public void onPageStarted(WebView view, String url, Bitmap favicon) {
       super.onPageStarted(view, url, favicon);
       Log.i("MyLog", "Your current url when webpage loading.." + url);
   }

   // When page load finish.
   @Override
   public void onPageFinished(WebView view, String url) {
       Log.i("MyLog", "Your current url when webpage loading.. finish" + url);
       super.onPageFinished(view, url);
   }

   @Override
   public void onLoadResource(WebView view, String url) {
       super.onLoadResource(view, url);
   }

}
MainActivity.java
package org.o7planning.androidwebview;

import android.app.Activity;
import android.os.Bundle;

import android.view.View;

import android.webkit.WebView;

import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity  {


    private  EditText addressBar;

    private WebView webView;
    private Button buttonGo;
    private Button buttonStatic;

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

        buttonGo =(Button)findViewById(R.id.button_go);
        buttonStatic =(Button)findViewById(R.id.button_static);

        addressBar =(EditText)findViewById(R.id.editText_addressBar);
        webView =(WebView)findViewById(R.id.webView);

        // Custom WebViewClient to handle event on WebView.
        webView.setWebViewClient(new MyWebViewClient(addressBar));

        buttonGo.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View view) {
                goUrl();
            }
        });

        buttonStatic.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View view) {
                showStaticContent();
            }
        });
    }

    private void goUrl()  {
        String url = addressBar.getText().toString().trim();
        if(url.isEmpty())  {
            Toast.makeText(this,"Please enter url",Toast.LENGTH_SHORT).show();
            return;
        }
        webView.getSettings().setLoadsImagesAutomatically(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.loadUrl(url);
    }


    private void showStaticContent()  {
        String staticContent="<h2>Select web page</h2>"
                + "<ul><li><a href='http://eclipse.org'>Eclipse</a></li>"
                +"<li><a href='http://google.com'>Google</a></li></ul>";
        webView.loadData(staticContent, "text/html", "UTF-8");
    }

}
Running the apps: