How to add spinner loading for every pags loading in webview

Question

I am a beginner and building webview app with splash screen in AIED.

I want to add spinner loading for every page loading in webview. I mean when this webview loads after the splash screen, I can see home page of website when I open any other page. While loading that page I want to show spinner in the center of screen. When the page load the spinner should disappear.

I not know where to add the specific code.

Here is mainactivity.java

package com.mystore.mominbaba;

import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;

public class MainActivity extends Activity {

    //private WebView webView = null;
    private WebView mWebView;
    private ImageView mSplashView;

    private ValueCallback <Uri> mUploadMessage;
    public ValueCallback <Uri[]> uploadMessage;
    public static final int REQUEST_SELECT_FILE = 100;
    private final static int FILECHOOSER_RESULTCODE = 1;

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

        mWebView = (WebView) findViewById(R.id.webview);
        mSplashView = (ImageView) findViewById(R.id.splash);
        mWebView.getSettings().setJavaScriptEnabled(true); // enable javascript
        mWebView.getSettings().setLoadWithOverviewMode(true); //sets Overview to true
        mWebView.getSettings().setUseWideViewPort(true); //sets wideviewport deleting whitespsce
        mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        mWebView.getSettings().setAllowFileAccess(true);
        mWebView.setWebViewClient(new WebViewClient() {


            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mSplashView.setVisibility(View.GONE);
                mWebView.setVisibility(View.VISIBLE);

            }
        });

        mWebView.loadUrl("https://www.mominbaba.com");
        mWebView.setVisibility(View.GONE);
        mSplashView.setVisibility(View.VISIBLE);


        mWebView.setWebChromeClient(new WebChromeClient() {
            // For 3.0+ Devices (Start)
            // onActivityResult attached before constructor
            protected void openFileChooser(ValueCallback uploadMsg, String acceptType) {
                mUploadMessage = uploadMsg;
                Intent i = new Intent(Intent.ACTION_GET_CONTENT);
                i.addCategory(Intent.CATEGORY_OPENABLE);
                i.setType("image/*");
                startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
            }


            // For Lollipop 5.0+ Devices
            public boolean onShowFileChooser(WebView mWebView, ValueCallback <Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
                if (uploadMessage != null) {
                    uploadMessage.onReceiveValue(null);
                    uploadMessage = null;
                }

                uploadMessage = filePathCallback;

                Intent intent = null;
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                    intent = fileChooserParams.createIntent();
                }
                try {
                    startActivityForResult(intent, REQUEST_SELECT_FILE);
                } catch (ActivityNotFoundException e) {
                    uploadMessage = null;
                    return false;
                }
                return true;
            }

            //For Android 4.1 only
            protected void openFileChooser(ValueCallback <Uri> uploadMsg, String acceptType, String capture) {
                mUploadMessage = uploadMsg;
                Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
                intent.addCategory(Intent.CATEGORY_OPENABLE);
                intent.setType("image/*");
                startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
            }

            protected void openFileChooser(ValueCallback <Uri> uploadMsg) {
                mUploadMessage = uploadMsg;
                Intent i = new Intent(Intent.ACTION_GET_CONTENT);
                i.addCategory(Intent.CATEGORY_OPENABLE);
                i.setType("image/*");
                startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
            }
        });
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent intent) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (requestCode == REQUEST_SELECT_FILE) {
                if (uploadMessage == null)
                    return;
                uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));
                uploadMessage = null;
            }
        } else if (requestCode == FILECHOOSER_RESULTCODE) {
            if (null == mUploadMessage)
                return;
            // Use MainActivity.RESULT_OK if you're implementing WebView inside Fragment
            // Use RESULT_OK only if you're implementing WebView inside an Activity
            Uri result = intent == null || resultCode != MainActivity.RESULT_OK ? null : intent.getData();
            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        }
    }


    private class xWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }

        return super.
        `onKeyDown` (keyCode, event);
    }
}

Here is activity main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/splash"
        android:scaleType="fitXY"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:visibility="gone"
        android:src="@drawable/image_1"/>

    <WebView
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible"/>

</RelativeLayout>

Answer 1

Big Caveat: This solution won't completely hide the white screen(loading) on websites that has to download and load.js files especially if they are big.

First, you are using onPageFinished incorrectly. onPageFinished is always going to be called after every page load has finished. This means if you are navigating on your website, it will call onPageFinished every after you navigate a URL and the webview has finished loading it.

Here's an idea on how to do this:

First create an HTML page and design on how you want your spinner would look like. Save the HTML template as a string HTMLSpinner .

Then create a second webview and load the HTML template string to it

public WebView spinner;
spinner.loadData(HTMLSpinner, "text/html", "UTF-8");

Then modify your main mWebView.setWebViewClient like this

        mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageStarted(WebView view, final String url, Bitmap favicon) {
                mWebView.setVisibility(View.GONE);
                spinner.setVisibility(View.VISIBLE);

                // YOUR LANDING PAGE
                if(url.equals("https://www.mominbaba.com")){
                    mWebView.setVisibility(View.GONE);
                    mSplashView.setVisibility(View.VISIBLE);

                }

            }

            @Override
            public void onPageFinished(WebView view, String url) {

                mWebView.setVisibility(View.VISIBLE);
                spinner.setVisibility(View.GONE);

                // YOUR LANDING PAGE
                if(url.equals("https://www.mominbaba.com")){

                    mWebView.setVisibility(View.GONE);
                    mSplashView.setVisibility(View.VISIBLE);


                } 

            }

        });

That should swap the current webview that you see from the main webview to the loader. I have chosen to use a second webview because the asset that was given to was an animated SVG.