Android WebView

Android WebView is used to load and display the web pages in android.

A WebView is useful when we need to increase control over the UI and advanced configuration options in our app.

Here, we will learn to add an Android WebView in our android app. So, let's get started.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click on Next.

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we will use Java for this tutorial), and the minimum SDK(we are using API 19: Android 4.4 (KitKat))

4. Next click on the Finish button after filling in the above details.

5. Now, wait for the project to finish building.

Step 2: Adding the Internet Permission

Now go to app -> mainfests-> AndroidManifest.xml and add internet permission, now our AndroidManifest.xml file will look like as shown below:

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

Step 3: Adding WebView to Android Activity

Now go to app -> res -> layout -> activity_main.xml and add Webview, now our activity_main.xml file will look like as shown below:

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout 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 -->
    <WebView
        android:id="@+id/oklWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
     />
</RelativeLayout>

In the above code, we have added the default web view in our Android Activity.

Step 4: Modify activity_main.xml

This is the main part to add webview in our app, first, we open the MainActivity.java file and import some basic classes as shown below

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

Next, we create the object of WebView class inside MainActivity class as shown below:

//creating object of WebView
WebView oklWebView;

Now, inside the onCreate method, we initialize the WebView as shown below.

//initializing the WebView objects
oklWebView=(WebView)findViewById(R.id.oklWebView);

After initializing the webview, we simply load the URL.

 //load the url
oklWebView.loadUrl("https://www.studytonight.com/");

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    //creating object of WebView
    WebView oklWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //initializing the WebView objects
        oklWebView=(WebView)findViewById(R.id.oklWebView);

        //load the url
        oklWebView.loadUrl("https://www.studytonight.com/");
    }
}

Now, our app is ready, run the app and see the the output.

Output:

In the below snapshots, you can see how Webview will look in the android application.

When the app is opened for the first time: We can see that the https://www.studytonight.com/ is opened in our app

When Scrolling the webview, it goes bottom to the page.