Android Webview Introduction:-

Android WebView is a view which is used to display web pages inside your application. You can also specify HTML string or from URL and can show it inside your application using WebView.

It objects allow you to display web content as part of your activity layout, but lack some of the features of fully-developed browsers. It is useful when you need increased control over the UI and advanced configuration options that will allow you to embed web pages in a specially-designed environment for your app.

There are different way webpage in Android Webview:-

1. Display Webpage from url:-
webView.loadUrl("http://www.google.com");
2. Display Webpage from Asset Folder :-
webView.loadUrl("file:///android_asset/test.html");
3. Display Webpage from HTML Code of String:-
String data = "<html><title>Android Creation</title><body><h1>Welcome to  Android Creation!</h1></body></html>";
webView.loadData(data, "text/html", "UTF-8");


Lets start the Project:-

Step 1:-

Add Internet permission in manifest file for accessing webpage from url  as below:-

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

 

Step 2:-
 add Webview Widgets for showing webpages In activity_main.xml as below code:-
 
<?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
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>

</RelativeLayout>
 
Step 3:-
To add the web page  locally in application, they are required to place in the assets folder. An assets folder is created as: right click on app -> New -> Folder -> Assets Folder ->main or simply create an assets directory inside main directory.
Step 4 :-
create test.html file in asset folder and add below code:-
<html>
<title>Android Creation</title>
<body>
<h1>Welcome to Android Creation!</h1>
</body>
</html>
Step 5:-

Finally in MainActivity.java Add the following Code:-

package com.androidcreation.webviewexample;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webview);

//Display Webpage from HTML Code of String in WebView:-
String data = "<html><title>Android Creation</title><body><h1>Welcome to Android Creation!</h1></body></html>";
webView.loadData(data, "text/html", "UTF-8");

// Display Webpage from url in WebView:-
webView.loadUrl("http://www.google.com");

//Display Webpage from Asset Folder in WebView:-
webView.loadUrl("file:///android_asset/test.html");

webView.setWebViewClient(new MyWebViewClient());
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
}

private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
return false;
}
}
@Override
public void onBackPressed() {
if (webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
}
}
}

 

Navigation Webview With Back Button:-

if we click the back button in the app developed so far we see that the application returns to the home screen even though we’ve navigated through a other pages within the WebView itself. To go through the browsing history on pressing back button we need to modify the back button function as shown in the snippet below:
@Override
public void onBackPressed() {
if (webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
}
}

WebViewClient Setting:-

The default behavior when a user clicks on a link inside the webpage is to open the systems default browser app. This can break the user experience of the app users.
To keep page navigation within the WebView and hence within the app, we need to create a subclass of WebViewClient , and override its methodshouldOverrideUrlLoading(WebView webView, String url)
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
return false;
}
}

Output:-

Must Read:-

0 CommentsClose Comments

Leave a comment

shares

Newsletter Subscribe

Get the Latest Posts & Articles in Your Email

We Promise Not to Send Spam:)