Hello Readers! In this post, we are going to learn how to use android webView using kotlin in any android application. In this post, We will cover many topics such as –
   – 1. Different attributes of webView that can be used to customise it
   – 2. Define WebChromeClient to customise WebView
   – 3. Define WebViewClient to customise WebView
   – 4. Use WebSettings to customise WebView
   – 5. Load data in WebView from different sources like, file path, url, defined html etc.

We will see each topic one by one.

Output

Tutorialwing Kotlin WebView Output

Getting Started

WebView widget can be defined as below –

WebView is a widget that is used to display webpages in any android application. Using this class, you can also implement your own web browser or simply display online content within your activity in the application

Webkit rendering engine is used in webView to provide features such as –
   – 1. Display webpages
   – 2. Includes methods to navigate forward and backward through history.
   – 3. Zoom in zoom out
   – 4. Text Searches and many more things

Attributes of Android WebView Widget

Some of the popular attributes of android webView widget inherited from ViewGroup are –

Some of the popular attributes of android WebView inherited from View are –

Example of Android WebView Widget

At first, we will create android application. Then, we will use WebView widget in this application.

1. Creating New Project

Follow steps below to create new project. Please ignore the steps if you have already created the project.

Now, we will modify xml and other files to access WebView using kotlin file in the application.

2. Modify Values folder

Open res/values/strings.xml file and add below code into it.

<resources>
	<string name="app_name">WebView</string>
	<string name="site_url">https://tutorialwing.com</string>
</resources>

Open res/values/styles.xml file and add below code into it.

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
	<!-- Customize your theme here. -->
	<item name="colorPrimary">@color/colorPrimary</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

We are not showing toolBar in the application. So, we have changed the parent theme to Theme.AppCompat.Light.NoActionBar.

Open res/values/colors.xml file and add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="colorPrimary">#0b6c63</color>
	<color name="colorPrimaryDark">#0a6058</color>
	<color name="colorAccent">#FF4081</color>
</resources>

3. Internet Permission in AndroidManifest file

Since we are going to load webpage in the webView, we also need permission to access internet. So, add internet permission in AndroidManifest.xml file. Add below code into src/main/AndroidManifest.xml file –

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.webview"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<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:theme="@style/AppTheme">

		<meta-data android:name="android.webkit.WebView.EnableSafeBrowsing"
				   android:value="false" />

		<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>

Whenever you use webView in application, it uploads some anonymous data to google. These data are used to improve this webView widget. If you do not want to let webView to upload data to google, you need to add meta-data in < application > element in manifest file.

<manifest>
     <application>
         ...
         <meta-data android:name="android.webkit.WebView.MetricsOptOut"
             android:value="true" />
     </application>
 </manifest>

Note – Data is uploaded to google only if user has given permission and app has not opted out.

While using webView, if you want to block malicious url and show a warning UI to either navigate back or proceed to malicious url, you need to add below meta-data in < application > element in manifest file.

<manifest>
     <application>
         ...
         <meta-data android:name="android.webkit.WebView.EnableSafeBrowsing"
             android:value="false" />
     </application>
</manifest>

4. How To Customise WebView Using Kotlin

We can customise webView in below ways –
(1) By Using WebViewClient class – Use this class when you want to deal with content rendering in the page. For example, error or form submission in the page.
(2) By Using WebChromeClient class – Use this class when you want to deal with user interface. For example, progressBar or javascript alert.
(3) By Using WebSettings – This class is used for work like enabling javascript, zoom-in or zoom-out feature in the page.
(4) By Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method so that it can accessed by javascript in the page.

4.1 Define WebChromeClient class For WebView Using Kotlin

Whenever you change something in webView that impact browser ui, then, this class is called. For example, Show progressBar while page is being loaded, Show javascript alert message etc.

So, create a class file (with name WebChromeClt.kt), subclassed form WebChromeClient, in main/java/com.tutorialwing.webview folder. Then, add below code into it.

package com.tutorialwing.webview

import android.app.Activity
import android.webkit.WebChromeClient
import android.webkit.WebView

class WebChromeClt internal constructor(private val activity: Activity) : WebChromeClient() {

    override fun onProgressChanged(view: WebView, progress: Int) {
        // Activities and WebViews measure progress with different scales.
        // The progress meter will automatically disappear when we reach 100%
        activity.setProgress(progress * 1000)
    }
}

Here, we are showing progressBar while page is loading.

4.2 Define WebViewClient For WebView Using kotlin

Whenever you change something in webView that impacts content rendering, then, it is called. For Example, Showing Error message in Form Submission etc.

So, create a class file (with name WebViewClt.kt), subclassed form WebViewClient, in main/java/com.tutorialwing.webview folder. Then, add below code into it.

package com.tutorialwing.webview

import android.app.Activity
import android.content.Intent
import android.net.Uri
import android.os.Build
import android.support.annotation.RequiresApi
import android.webkit.WebResourceError
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Toast

class WebViewClt internal constructor(private val activity: Activity) : WebViewClient() {

    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
        val url: String = request?.url.toString();

        if (url.contains("https://tutorialwing.com", false))
            return false

        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
        activity.startActivity(intent)
        return true
    }

    override fun shouldOverrideUrlLoading(webView: WebView, url: String): Boolean {
        if (url.contains("https://tutorialwing.com"))
            return false

        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
        activity.startActivity(intent)
        return true
    }

    override fun onReceivedError(view: WebView, request: WebResourceRequest, error: WebResourceError) {
        Toast.makeText(activity, "Got Error! $error", Toast.LENGTH_SHORT).show()
    }
}

Here, we have used below methods –
– 1. shouldOverrideUrlLoading( . . . ) – Use this method when you want webBrowser to decide how a new url will be loaded. If this method returns false, it means current webView will handle the url. If this method returns true, it means host application will handle the url. If you have not used this method, webView will ask activity manager to provide proper handler for new url.

– 2. onReceivedError( . . .) – This method reports web resource loading error to the host application.

4.3 Use WebSetting to Customise WebView Using Kotlin

Whenever webView is created, a default settings is attached with it throughout it’s lifecycle. That’s destroyed only when webView is destroyed. If you webView is destroyed, any call using webSettings will return IllegalStateException.
So, you can manage settings of webView using webView.

You can perform below task using webSettings –
(a) You can enable javascript. You can do it as below –

val webSettings = webView!!.settings
webSettings.javaScriptEnabled = true

(b) You can enable built-in zoom. You can do it as below –

val webSettings = webView!!.settings
webSettings.builtInZoomControls = true

5. Use WebView Widget in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

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

</LinearLayout>

In activity_main.xml file, we have defined WebView widget. Now, we will access this webView using kotlin file in the application. Then, we will perform some operations on it.

6. Load Data Into WebView Using Kotlin From Different Sources

We can load a page in WebView in below ways –
(a) A Page with given url.
(b) Create your own html page and load it into webView.
(c) Create a webpage by using data stored locally and then load it into webView.

Now, we will go through each way one by one.

6.1 Load WebPage With Given URL into WebView Using Kotlin

Open src/main/java/com.tutorialwing.webview/MainActivity.kt file. Then, add below code into it.

package com.tutorialwing.webview

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.KeyEvent
import android.view.Window
import android.webkit.WebView

class MainActivity : AppCompatActivity() {

    private var webView: WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        window.requestFeature(Window.FEATURE_PROGRESS)

        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
        if (webView != null) {

            val webSettings = webView!!.settings
            webSettings.javaScriptEnabled = true

            webSettings.builtInZoomControls = true

            webView!!.webViewClient = WebViewClt(this)
            webView!!.webChromeClient = WebChromeClt(this)

            //			 Case 1 .. Direct Url of the page...
            webView!!.loadUrl(getString(R.string.site_url))
        }
    }

    override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {
        if (keyCode == KeyEvent.KEYCODE_BACK && this.webView!!.canGoBack()) {
            webView!!.goBack()
            return true
        }

        return super.onKeyDown(keyCode, event)
    }
}

Here, loadUrl(…) method has been used to load webpage into webView. getString(R.string.site_url) returns the url of the webpage to be loaded.

6.2 Create Custom HTML WebPage And Load into WebView Using Kotlin

Open src/main/java/com.tutorialwing.webview/MainActivity.kt file. Then, add below code into it.

package com.tutorialwing.webview

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.KeyEvent
import android.view.Window
import android.webkit.WebView

class MainActivity : AppCompatActivity() {

    private var webView: WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        window.requestFeature(Window.FEATURE_PROGRESS)

        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
        if (webView != null) {

            val webSettings = webView!!.settings
            webSettings.javaScriptEnabled = true

            webSettings.builtInZoomControls = true

            webView!!.webViewClient = WebViewClt(this)
            webView!!.webChromeClient = WebChromeClt(this)

            //	Case 2 .. Create your own html page...
            webView!!.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8")
        }
    }

    override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {
        if (keyCode == KeyEvent.KEYCODE_BACK && this.webView!!.canGoBack()) {
            webView!!.goBack()
            return true
        }

        return super.onKeyDown(keyCode, event)
    }
}

Here, loadData(…) method has been used to load custom HTML data into webView.

6.3 Show Data of Given File Path into WebView Using kotlin

Open src/main/java/com.tutorialwing.webview/MainActivity.kt file. Then, add below code into it.

package com.tutorialwing.webview

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.KeyEvent
import android.view.Window
import android.webkit.WebView

class MainActivity : AppCompatActivity() {

    private var webView: WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        window.requestFeature(Window.FEATURE_PROGRESS)

        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
        if (webView != null) {

            val webSettings = webView!!.settings
            webSettings.javaScriptEnabled = true

            webSettings.builtInZoomControls = true

            webView!!.webViewClient = WebViewClt(this)
            webView!!.webChromeClient = WebChromeClt(this)

            //	Case 3 .. Show data in the file path...
            var html = "<html><head><title>TITLE!!!</title></head>"
            html += "<body><h3>Tutorial by tutorialwing.com</h3><img src=\"ic_launcher.png\" /></body></html>"

            // Provide relative url to the base...
            val baseUrl = "file:///android_res/mipmap/"
            val data = html
            val mimeType = "text/html"
            val encoding = "UTF-8"
            val historyUrl: String? = null

            webView!!.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl)
        }
    }

    override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {
        if (keyCode == KeyEvent.KEYCODE_BACK && this.webView!!.canGoBack()) {
            webView!!.goBack()
            return true
        }

        return super.onKeyDown(keyCode, event)
    }
}

Here, we have used loadDataWithBaseURL(…) method to load data from local file into webView.

In this tutorial, we have shown many ways to load data into android webView. However, you can use any way based on your requirements to load data into webView.

For the sake of completeness of this tutorial, we have used method 1 (load data into webView with given url). When we run the program, we will get output as shown above.

That’s end of tutorial on Android WebView using kotlin.