Android WebView Example and Tutorial

Android WebView with online and offline web page - NSC - Nulled - Android Free Course step by step totorials

Android WebView is a type of view which is used to view web pages or website which is online or offline both. Using a WebView you can display online contents in Android App. To show a web page use loadUrl() method in java class.

Example of Android WebView:

First of create a new Android Project and add below code in your layou activity_main.xml file:

<?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"
    tools:context=".MainActivity">

   <WebView
   	   android:id="@+id/webView"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </WebView>
</RelativeLayout>

Now add the below code to your MainActivity.java class file:

package com.nsc.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

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

                WebView webView = (WebView) findViewById(R.id.webView);

                // load online url or content
                webView.loadUrl("https://nulledsourcecode.com/courses/");

                // load offline url from the app
              //  webView.loadUrl("file:///android_asset/about.html");
        }
}

Now add the below line of code in your manifest.xml file:

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

Also add Internet permission to manifest.xml file

android:hardwareAccelerated="true"
android:usesCleartextTraffic="true"

Final manifest.xml file will look like the below manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.nsc.webview">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:hardwareAccelerated="true"
        android:usesCleartextTraffic="true"
        android:theme="@style/Theme.WebView">
        <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>

If you want to show we pages as locally then you have to place them in assets folder. Create assets folder follow: In Android Studio, Right click on app > New > Android Resource Directory and press Enter, Now enter this line: 

src\main\assets
Create assets folder in Android Studio - NSC
Create assets folder in Android Studio
src\main\assets
choose this: src\main\assets

Let’s see below result of WebView online and offline both:

Android WebView with online and offline web page - NSC - Nulled - Android Free Course step by step totorials
Android WebView with online and offline web page

Handle onclick in WebView:

If you not set onclick in webview then due to its default features it will load next url in external browser like chrome or whatever you are using. So to avoide this handle onclick method.

So create a WebViewClient under in the onCreate method as show in the below code:

package com.nsc.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Build;
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

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

                WebView webView = (WebView) findViewById(R.id.webView);

                // load online url or content
                webView.loadUrl("https://nulledsourcecode.com/courses/");

                // load offline url from the app
              //  webView.loadUrl("file:///android_asset/file.html");
          
          		// below code WebViewClient is used for handling the webview as according to our needs.
                webView.setWebViewClient(new WebViewClient() {
                        @Override
                        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                                        view.loadUrl(request.getUrl().toString());
                                }
                                return false;
                        }
                });
        }
}

Enable JavaScript and other Features in WebView:

if you not enabled the javascript in webview than website fully not work as shown in the below screenshot Javascript Error:

Javascript Error in WebView

So follow the given code which has Enabled Javascript, Zoom control, clear cache, clear history, etc:

package com.nsc.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Build;
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

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

                WebView webView = (WebView) findViewById(R.id.webView);

                // Enable the Javascript
                webView.getSettings().setJavaScriptEnabled(true);
                webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

                // clear the webview cache
                webView.clearCache(true);

                //clear the webview history
                webView.clearHistory();

                //enable zoom in web page
                webView.getSettings().setBuiltInZoomControls(true);

                // enable desktop view mode
            //    webView.getSettings().setUseWideViewPort(true);

                // load online url or content
                webView.loadUrl("https://nulledsourcecode.com/courses/");

                // load offline url from the app
              //  webView.loadUrl("file:///android_asset/file.html");

                // below code WebViewClient is used for handling the webview as according to our needs.
                webView.setWebViewClient(new WebViewClient() {
                        @Override
                        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                                        view.loadUrl(request.getUrl().toString());
                                }
                                return false;
                        }
                });
        }
}

Click Here to Download Source Code

Android WebView
What are your Feelings
What are your Feelings

Leave a Comment