In this tutorial, we will learn the Webview in Android with an example in the kotlin language.WebView is a view that allows you to view web pages within your application. It’s used to convert the application into a web app.

what is an android webview?

Android WebView is a Chrome-based system component that enables Android apps to show web information. This component comes pre-installed on your device and should be maintained up to date in order to receive the most recent security updates.

You must include the < WebView> element in your XML layout file to include WebView in your application.

In Android, a WebView is used to display a web page. The website can be loaded from the same application or URL. It is used in Android activities to display web content. The WebKit engine is used by WebView to show web pages.

Preview: Webview

WebView code:

 <WebView
        android:id="@+id/webView_example"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Note: We must add the internet permissions to our Android Manifest file (AndroidManifest.xml) in order to access the Internet and load web pages in a WebView.

The code below defines the internet permission in our manifest file, which allows our application to access the internet.

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

File: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webs">
    <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/Theme.Webs">
        <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>

File: MainActivity.kt

–> Add the given below code to your File: MainActivity.kt

package com.example.webs


import android.os.Bundle
import android.view.KeyEvent
import android.view.MotionEvent
import android.view.View
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val data=findViewById<WebView>(R.id.webView_example)
        data.loadUrl("https://developersdome.com")


        val webSettings =data.settings
        webSettings.javaScriptEnabled=true
        data.webViewClient= WebViewClient()
        data.canGoBack()
        data.setOnKeyListener(View.OnKeyListener{ V, keycode, event->
            if(keycode==KeyEvent.KEYCODE_BACK
                && event.action==MotionEvent.ACTION_UP
                &&data.canGoBack()){
                    data.goBack()
                return@OnKeyListener true
        }
        false

        })

    }


}

File: activity_main.xml

–> Add the given below code to your File: MainActivity.kt

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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_example"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

File: themes.xml

–> set NoActionBar to theme

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Webs" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

• We hope that this guide will assist you in quickly creating a simple Web-View Android app. If you have any problems, please post them in the comments section and we will gladly assist you.

Animation in Android

---

How to Create Calculator App with Example in Android

Creating a Flashlight Android Application

Multiplication Table Application Tutorial in Android