Universal Web View (Supported android 14 and SDK 34)

Introduction to Universal Web View (UWebView)

In Android, a universal web view (UWebView) is a powerful Android UI component that allows us to display web pages natively within our app, similar to a mobile Safari browser. With the arrival of Android 14, UWebView has become more efficient and robust, promising faster rendering, better crash recovery, and improved layout flexibility. In this tutorial, we will explore step-by-step how to set up and use UWebView in your Android app to load web pages, modify web page content, communicate with the web page through JavaScript, and handle WebView-related events.

Creating a New Android Project for UWebView Tutorial

Begin by creating a new project in Android Studio. Start by selecting "File" -> "New" -> "New Project" within the Android Studio IDE:

• Choose "Empty Activity" as the project type and click "Next" -> "Finish"

Note: Make sure your development environment meets the minimum required version for Android 14 (API level 31) and SDK 34.

Step 1: Add UWebView

Open the activity_main.xml file and insert the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/wv_main"
        android:layout_width="match_parent"
        android:layout_height="match_match_parent" />

</LinearLayout>

In the above code, we declared a WebView layout component with the ID "wv_main". We'll use this ID later to reference the UWebView instance in our Java/Kotlin code.

Step 2: Initialize the UWebView

Open MainActivity.java (if you're using Java) or MainActivity.kt (if you're using Kotlin) and paste the following code:

// Java

public class MainActivity extends AppCompatActivity {
    private WebView webview;

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

        webview = findViewById(R.id.wv_main);
        webview.setWebViewClient(new CustomWebViewClient());
        webview.getSettings().setJavaScriptEnabled(true);
    }
}

// Kotlin
class MainActivity : AppCompatActivity() {
    private lateinit var webview: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webview = findViewById(R.id.wv_main)
        webview.webViewClient = object : WebViewClient() {} // CustomWebViewClient(); // For custom WebView settings
        webview.settings.javaScriptEnabled = true
    }
}

In the above code, we:

1. Created a WebView instance and stored it in the webview variable.
2. Initialized the WebViewClient, which is responsible for web page loading and handling associated events.
3. Set JavaScriptEnabled property to true, indicating that we want to render web pages with JavaScript code.

Step 3: Load a Web Page

To load a specific web page, you'll need to use the following method:

webview.loadUrl("https://www.example.com"); // Replace with desired URL

And for Kotlin:

webview.loadUrl("https://www.example.com") // Replace with desired URL

Step 4: Modify Web Page Content

To modify web page content, you can make changes to the content property of the WebSettings object:

webview.getSettings().setAllowContentAccessibility(true);

Alternatively, you can use various web page manipulation methods for example, execute JavaScript, loadHTML

webview.evaluateJavascript("javascript:", new ValueCallback<String>(){
    @Override public void onReceiveValue (String value) {
});

And for Kotlin:

webview.evaluateJavascript("javascript:", object :ValueCallback<String>(){
            override fun onReceiveValue(value: String?) { // handle the valuecallback result
            }
 })

Step 5: Communicate with Web Page through JavaScript

To communicate with the web page through JavaScript, set the WebViewClient. Create a custom class in Java or Kotlin:

// Java

public class CustomWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl("javascript:alert('Page Loaded');");
        return false;
    }
}

// Kotlin
class CustomWebViewClient : WebViewClient(){
    override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
       view?.loadUrl("javascript:alert('Page Loaded');")
       return false
    }
 }

In the CustomWebViewClient class, in the shouldOverrideUrlLoading method, modify the web page content from the JavaScript code. And to handle the webPageLoaded event:

webview.addJavaScriptInterface(new JavaScriptInterfaceObject());

And in Kotlin:

webview.addJsInterface(JavaScriptInterfaceObject::class.java)

Step 6: Handle WebView-related Events

In the WebView, we can handle various types of events, such as loading, error, failed loading, and page started:

private class CustomWebViewClient extends WebViewClient {
    public void onPageStarted(WebView view, String url) {
        // Page Load Started
    }

    public void onPageFinished(WebView view, String url) {
        //Page Loaded
    }

    public void onReceivedError(WebView view, WebViewClient.ErrorCode errorCode) {
        // Error occurred when loading the page
    }
}

// Kotlin

class CustomWebViewClient(): WebViewClient(){
    override fun onPageStarted(view: WebView?, url: String?) {
        //  Page Load Started
    }

    override fun onPageFinished(view: WebView?, url: String?) {
        //Page Loaded
    }

    override fun onReceivedError(view: WebView?, errorCode: WebResourceError?) {
         // Error occurred when loading the page
    }

}

In our CustomWebViewClient class implement these methods to handle our custom events.

Putting it all Together

And finally, we'll incorporate the above steps into your main activity:

// Java

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView wv_main;

    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        wv_main = findViewById(R.id.wv_main);

        wv_main.setWebChromeClient(new WebChromeClient());
        wv_main.setWebViewClient(new CustomWebViewClient());
        wv_main.getSettings().setJavaScriptEnabled(true);
        wv_main.loadUrl("https://www.example.com");
   }
}

// Kotlin
class MainActivity : AppCompatActivity(){
    private lateinit var webview: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webview = findViewById(R.id.wv_main)

        webview.settings.javaScriptEnabled = true
        webview.addJavaScriptInterface(JavaScriptInterfaceObject::class.java);
        webview.webviewClient = object : CustomWebViewClient() {} webview.loadUrl("https://www.example.com;")
    }
}

That's it! When you run your app with UWebView, you can navigate to a web page and interact with it dynamically using JavaScript.