All CategoriesAndroid App Development

What is WebView in Android – An Introduction

WebView In Android

The WebView in Android enables you to show the web browser in your Activity.
It is very useful if our application needs to embed some web content, like maps from some other providers and so on.
Here, the web page can be loaded inside the application with the help of URL. Mainly it is used to show the internet content inside the activity.
WebView in Android turns the application into a web application.
It comes from android.webkit.WebView. Here, the WebView class is an extension of Android’s View class which is used to show the web pages.
WebView doesn’t include all the features of Web-browser-like navigation controls or an address bar etc.
But we can navigate back or forward inside WebView. Because WebView automatically accumulates the history of web pages. So we can navigate backward and forward through the history with the help of goBack() and goForward() methods by using device back button in our activity.
Mainly we used WebView in our application when we have to provide the information like a user guide or need to update etc.

Class of WebView:

WebView:
As I discussed above WebView is a class which is an extension of Android View class. It allows us to display the web pages inside our activity layout.
WebViewClient:
We can create our own WebViewClient and extends with this class. It is used to open the links which are clicked by the user or want more control over where the page is loaded. It overrides a method shouldOverrideUrlLoading(..). Inside this method, it allows the WebView to load the URL.

Methods of WebView:

loadUrl():
This method is used to load a web page in the WebView.
getUrl():
This method returns the URL of the current webpage.

setJavaScriptEnabled():

By default, the JavaScript is disabled in the WebView. It is enabled with the help of WebSettings which is attached to our WebView. This method is used to load the web page which uses JavaScript in our WebView. So, we can easily create the interface between our application code and JavaScript code.

Example with code:

Here, we are going to create a simple example which integrates the WebView inside our application. It shows an Activity which takes the input keys in the form of URL and after press the Enter button it displays the Home page of AcadGild or shows the web page on the same screen.
Let’s do it programmatically by following some simple steps.

  • Create an Application WebViewExampleAndroid in our AndroidStudio with the updated version.
  • Add the internet permission in AndroidManifest.xml file.

Requirements for a Project:

MainActivity.java, activity_main.xml.
These are the main files of this application. Do the implementation one by one.

AndroidManifest.xml:

Add the internet permission in this file.

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

activity_main.xml:

This is our main layout file. Here, we add the WebView by include <webview> element in our activity layout. Also, we add TextInputLayout to take the URL by the user and a Button to run this process.

Add the code here:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Welcome to WebView.."
    android:textSize="20dp"
    android:textStyle="bold"/>
<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_URL_Name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    >
    <EditText
        android:id="@+id/ed_URL_Name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter URL"
        />
</android.support.design.widget.TextInputLayout>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Enter"
    android:layout_marginTop="10dp"
    android:id="@+id/btn_Enter"
    android:layout_gravity="center"
    android:background="@color/colorPrimary"
    android:textColor="#ffffff"
    />
<WebView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/webView"
    android:layout_marginTop="10dp"
    />

As I discussed above, it shows a welcome TextView, an EditText for URL, a Button and at last the WebView to show the web page in the activity.
MainActivity.java:
This is our MainActivity. Here, we take the reference of WebView, Button, and EditText. Also, we see how to set the WebViewClient and when user press the enter button then how to load the URL and show the web page in our WebView.

Initialize:

Button btnEnter;
EditText edURLName;
private WebView webView;

Add the code in onCreate(..){..}:

btnEnter = (Button) findViewById(R.id.btn_Enter);
edURLName = (EditText) findViewById(R.id.ed_URL_Name);
webView = (WebView) findViewById(R.id.webView);

Set the WebViewClient to our WebView. Here, it creates an instance of new WebViewClient; we have to implement it.

webView.setWebViewClient(new MyBrowser());

Set the listener when the user presses the button and add all the properties as I discussed above.

btnEnter.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String url = edURLName.getText().toString();
        webView.getSettings().setLoadsImagesAutomatically(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.loadUrl(url);
    }
});

Here, it takes the URL in a string when the user enters it, set the JavaScript, load the images automatically to true by using WebSettings and also adjust the scrolling style then it loads the URL which is entered by the user.
Create the MyBrowser class and extends with WebViewClient.

private class MyBrowser extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(request.getUrl().toString());
        return true;
    }
}

Here, it overrides the methods shouldOverrideUrlLoading(..). Inside this method, we load the URL of current page by using WebResourceRequest and the method getUrl().
When the user clicks a link, then system calls the above method, and it matches with the URL which is given by the user. If it doesn’t match, then it returns false. Otherwise, it returns true and load the URL and display the webpage.

Output:



 

Download Source Code: GitHub

Conclusion:

This is a simple example of How to create WebView inside our Android application. As I discussed above WebView in android will display the web page in an Activity. Means it shows the online content in our Android application without going to another browser. It shows the web content; we can easily create this by using <webview> element in our layout and load the URL whatever you want from the activity by using loadUrl() on that view. Here, in this application, it gives an option to the user to provide the URL and enter it. We can also do it statically inside the activity. So, it is an important concept of Android which is used in many applications. We can customize it according to the need of the application. This feature is very important and popular in Android development.
Keep visiting www.acadgild.com for more updates on the android certification course .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close