Progress bar for internal links of a WebView in Android Studio

Question

I have a WebView developed with Android Studio. I want to implement a progress bar to appear on every internal page of the WebView.

I show you the code. Although I must clarify that the app already has a progress bar, which fulfills the function of Splash Screen.

What I want is that when opening a link within the WebView a progress bar appears indicating that the page is loading, since when opening a link the user's screen is paralyzed for a few seconds until it loads completely, which It can be annoying to the naked eye.

PRELIMINARY CODE:

MainActivity

package com.example.app;

import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.ProgressBar;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String ShowOrHideWebViewInitialUse = "show";
    private ProgressBar spinner;

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

        WebView webview = (WebView) findViewById(R.id.webView);
        spinner = (ProgressBar) findViewById(R.id.progressBar1);
        webview.setWebViewClient(new CustomWebViewClient());

        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
        webview.loadUrl("https://www.example.com");
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView miVisorWeb;
        miVisorWeb = (WebView) findViewById(R.id.webView);
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (miVisorWeb.canGoBack()) {
                        miVisorWeb.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    private class CustomWebViewClient extends WebViewClient {

        @Override
        public void onPageStarted(WebView webview, String url, Bitmap favicon) {

            if (ShowOrHideWebViewInitialUse.equals("show")) {
                webview.setVisibility(View.INVISIBLE);
            }
        }

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

            ShowOrHideWebViewInitialUse = "hide";
            spinner.setVisibility(View.GONE);

            view.setVisibility(View.VISIBLE);
            super.onPageFinished(view, url);

        }
    }
}

It would be a great help if you could implement another progress bar that does not fill the entire screen, that is displayed when loading a link within the WebView and that then disappears when the loading is complete.

Thank you very much!

Answer 1

Instead of a Spinner progress bar, you can use horizontal bar by changing the style.

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        --- other attributes here ---
         />

Place this horizontal progress bar on the top of the webview similar to the image below.

Additionally, by setting chromeWebClient to the webview and overriding onProgressChanged method we can get the progress of the page loading which can be set to the horizontal progress bar.

webView.setWebChromeClient(new WebChromeClient() {
    public void onProgressChanged(WebView view, int newProgress) {
       progressBar.setProgressCompat(newProgress, true)
    }
});