Create an Android App to use WebView to load HTML Page

Develop and create an Android app to use WebView to load HTML Page. In this blog you will learn that by using android studio, how to design and implement an android WebView which is used to display HTML in an android
app. And use android WebView to load HTML page into android app. Complete process with all the steps, codes and output. So, let’s start without wasting any time.

MAIN CODE :

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

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


</LinearLayout>

MainActivity.java:

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

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // instance variable
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getUiObject();
        getWebSettings();
        webView.loadUrl("file:///android_asset/myfile.html");
    }

    private void getWebSettings(){
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowUniversalAccessFromFileURLs(true);
    }

    // method to instantiate each ui Object
    private void getUiObject() {
        webView = findViewById(R.id.webView);
    }
}

myfile.html:

<!DOCTYPE html>
<html>
<body>

<h1>Is this a WebView? </h1>
<p>Hello I am text inside html paragraph tag.</p>

</body>
</html>

Note : Use Android studio project using java language with androidx.

For loading HTML page in webview android:

  1. Create a webview in layout.
  2. Define and instantiate webview in MainActivity and load all settings for the webview.
  3. Create an asset folder inside main using project structure of android studio current project.
  4. Create a html file name of your choice for e.g. here myfile.html
  5. Paste your html code inside this, also create css if you need inside the asset folder.
  6. Then load the webview with this url “file:///android_asset/<name_of_your_file>.html”, and it will display your html inside webview of android.

App Output:

1625881624681 blob - Create an Android App to use WebView to load HTML Page

This is how you can develop and create an Android app to use WebView to load HTML Page in android studio. Subscribe to our Youtube channel and also subscribe to the swebllc.com notifications, if this solution helps you. let us know in the comments if you have any problems and queries.