Android WebView with Progressbar and Swipe Refresh Layout

Hey Technoz, In this post, we are going to build a WebView with progressbar and swipe refresh functionality. These are two most popular features that enhances webview and present in almost all mobile browsers. Often, these things are simple to implement. So, let us start.

Building Android WebView

We will start by adding a new empty activity to an existing project, or create a new project. We name this new activity WebViewActivity. At first, We are going to build a UI of this webview activity. So, lets put the following xml code in the file activity_web_view.xml. The file is automatically created with creation of activity.

<?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"
    android:orientation="vertical"
    tools:context="net.softglobe.tutorials.WebViewActivity">

    <ProgressBar
        android:id="@+id/pb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:visibility="gone"/>

    <android.support.v4.widget.SwipeRefreshLayout
        android:layout_below="@+id/pb"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swiperefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

In the above code, we have put the ProgressBar at the top. Obviously, we need the WebView element. As we have to refresh the webview after pull down action by user, we need to put the WebView element inside the SwipeRefreshLayout.

Building the back end

Now, we have to add the back end for WebView with progressbar and swipe refresh. Copy and paste the following code in file WebViewActivity.java.

package net.softglobe.tutorials;

import android.graphics.Bitmap;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class WebViewActivity extends AppCompatActivity {

    private WebView mWebView;
    private ProgressBar mProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("https://www.google.com");

        //SwipeRefreshLayout
        final SwipeRefreshLayout finalMySwipeRefreshLayout1;
        finalMySwipeRefreshLayout1 = findViewById(R.id.swiperefresh);
        finalMySwipeRefreshLayout1.setOnRefreshListener( new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                // This method performs the actual data-refresh operation.
                // The method calls setRefreshing(false) when it's finished.
                mWebView.loadUrl(mWebView.getUrl());
            }
        });

        // Get the widgets reference from XML layout
        mProgressBar = findViewById(R.id.pb);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                // Visible the progressbar
                mProgressBar.setVisibility(View.VISIBLE);
            }
            @Override
            public void onPageFinished(WebView view, String url) {
                finalMySwipeRefreshLayout1.setRefreshing(false);
                mProgressBar.setVisibility(View.GONE);
            }
        });

        mWebView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int newProgress){
                // Update the progress bar with page loading progress
                mProgressBar.setProgress(newProgress);
                if(newProgress == 100){
                    // Hide the progressbar
                    mProgressBar.setVisibility(View.GONE);
                }
            }
        });
    }
}

In above code, we have set the WebView to load Google search page using loadUrl() method. Next, we have find SwipeRefreshLayout by id, and we have setOnRefreshListener to listen the swipe refresh action and perform the following code. So, we are writing a code to get the currently set URL in WebView, and reload it. The refresh icon will continue to show until completion of page loading.

Furthermore, we have to show the ProgressBar while the page is loading. So, we have set the WebViewClient which contains two Overridden methods- onPageStarted() and onPgeFinished(). The ProgressBar is set to ‘GONE’ by default. In onPageStarted method, we have made the progressbar visible. While, In onPageFinished() method, we set the refreshing to false and again make the progressbar invisible.

Later, we have set the WebChromeClient to fill the progressbar with current progress. It continuously checks for the new progress and updates the progressbar. When the progress meets 100%, we again make the android progressbar invisible.

Now, In order to let the app access Internet, we need to add following internet permission in AndroidManifest.xml.

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

Finally, we are done with WebView with progressbar and swipe refresh layout tutorial! Now try running the app. It will produce the following results.

 

Thanks for reading this post of WebView with progressbar and swiperefresh layout. If you have any problem about implementing above tutorial, let us know in the comments section below. Alternatively, you can download a source code directly from link below.

Download Source Code

 

Please subscribe our newsletter to get such more knowledgeable tutorials. See you in next tutorial. Happy Coding! 🙂