Loading/Splash Screen for WebView in Android Studio

I wrote an article on making a website appear in a WebView component for an Android application. In an effort to maintain simplicity, here’s a separate article teaching how to displaying a loading (“splash”) screen while the webpage loads.

The goal: have an animated progress bar spin until the page loads; and have it disappear once the page does finish loading. You could apply this concept to “Loading” text or an image (ex. app logo).

Previously, we used the WebViewClient component to display a webpage. The WebViewClient only provides basic functionality. To do extra things with it (ex. “detect when the page is finished loading”), we need to extend this class. By “extending,” we are making a copy of it but giving additional functionality.

To start with, add the following (3) imports at the top of your MainActivity.java:

import android.graphics.Bitmap;
import android.view.View;
import android.widget.ProgressBar;

Inside of the MainActivity class, add in the ProgressBar (we’ll call it a “spinner”). Put it after the WebView.

private ProgressBar spinner;

Then add this part in, inside of the MainActivity class. Put it after the onCreate() and before the final “}”

// This allows for a splash screen 
// (and hide elements once the page loads)
private class CustomWebViewClient extends WebViewClient {

    @Override
    public void onPageStarted(WebView webview, String url, Bitmap favicon) {
        webview.setVisibility(webview.INVISIBLE);
    }

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

        spinner.setVisibility(View.GONE);

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

    }
}

Here’s the placement of the code up to this point:

Next, we need to use this new “CustomWebViewClient” instead of the original “WebViewClient”. Inside the onCreate(), reference this new one instead. While we’re at it, let’s define a spinner variable.

Here’s the copy-and-paste friendly code:

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

And here’s the visual placement of where it goes:

Here’s the final version of the MainActivity.java up to this point:

Now we need to add the progress bar into the activity_main.xml:

Note, I’ve changed the layout to “Relative” since the previous article:

It works! But we’re not done yet…

Try it; it works. But when you go to a new webpage (i.e. click on a link from with the app), the screen goes black. What’s happening is that the splash screen is re-loading; and not displaying the spinner/progress bar (as, we already hid it).

The solution is to create a new variable and give it a default value. Every time a webpage loads, we check the value of the variable to see if we should show the splash screen or not.

When the app first runs, and the variable has the default value, we’ll show the splash screen. After it loads and we hide the progress bar, we’ll change the value of the variable. Then on every subsequent webpage we load, we’ll check the value of the variable: because it will have a different value, we will chose to not show the splash screen.

Here’s the placement of the code:

Here’s the final MainActivity.java:

Again, here’s the first article that showed how to get the WebView in there initially, and I added some other little Android development tips in there.

Like this style of writing? 👍👍 Are you creating a PHP web application and already know what a “variable” is and the concept of an “if” statement? Check out my book: Web Development for Intermediate Programmers — with PHP