Splash Screen While Loading a Url in a Webview in Android App

Splash screen while loading a url in a webview in android app

I do it by initially showing an ImageView and then once the WebView has loaded, swapping their visibility like this

        WebView wv = (WebView) findViewById(R.id.webView1);
        wv.getSettings().setJavaScriptEnabled(true);
        wv.setWebViewClient(new WebViewClient() {

            ...

            @Override
            public void onPageFinished(WebView view, String url) {
                //hide loading image
                findViewById(R.id.imageLoading1).setVisibility(View.GONE);
                //show webview
                findViewById(R.id.webView1).setVisibility(View.VISIBLE);
            }

        });     
        wv.loadUrl("http://yoururlhere.com");

And my xml layout looks like this

    <ImageView android:id="@+id/imageLoading1"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:visibility="visible"
        android:src="@drawable/vert_loading"
        />
    <WebView android:id="@+id/webView1"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:visibility="gone"
        />

show splash screen while Webview is loading in background

Make sure webview is visibility is not GONE before it is loading.

Please refer below code.

public class WebViewActivity extends AppCompatActivity {

    private WebView mWebView;
    private ImageView mSplashView;

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

        mWebView = (WebView) findViewById(R.id.webview);
        mSplashView = (ImageView) findViewById(R.id.splash_view);
        mWebView.getSettings().setJavaScriptEnabled(true); // enable javascript

        mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mSplashView.setVisibility(View.GONE);
                mWebView.setVisibility(View.VISIBLE);
                Toast.makeText(getBaseContext(), "Page Loaded.", Toast.LENGTH_SHORT).show();
            }
        });

        mWebView.loadUrl("http://yoururlhere.com");
        mWebView.setVisibility(View.GONE);
        mSplashView.setVisibility(View.VISIBLE);
    }
}

Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">

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

    <ImageView
        android:id="@+id/splash_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher"
        android:visibility="gone"
        />

</android.support.constraint.ConstraintLayout>

Android Webview : Splash screen while loading a url

Don't create Splash screen as separate activity. Add the splash functionality on your WebView activity i.e your page loading activity. Listen to the onPageFinished event and hide the splash image or animation.

mWebView.setWebViewClient(new WebViewClient() {

   public void onPageFinished(WebView view, String url) {
        //hide splash functionality
    }
});

With this you can also get page load progress if you want to show a progress bar

mWebView.setWebChromeClient(new WebChromeClient() {
                public void onProgressChanged(WebView view, int progress) 
                   {
                   if(progress < 100 && Pbar.getVisibility() == ProgressBar.GONE){
                       Pbar.setVisibility(ProgressBar.VISIBLE);
                   }
                   Pbar.setProgress(progress);
                   if(progress == 100) {
                       Pbar.setVisibility(ProgressBar.GONE);
                   }
                }
            });

To load splash screen till webview is loaded

You cannot load a WebView from another Activity whilst you are in your Splashscreen. You instead need to load your MainActivity and overlay your splash screen on your WebView.

Pre-load WebView during the Video Splash Screen in Android

You can have a single Activity that has what you have on the 2 Activities, by having a ViewSwitcher (or ViewAnimator) to switch between the layouts.
This will also remove the need for the SPLASH_LOCK object.

While loading, switch the ViewSwitcher (or ViewAnimator) to the layout of the video, and when you are done loading the page, switch it to the layout of the WebView.

I've made a simple code to make it easier to switch between view. If you wish, you can use it:

public static void setViewToSwitchTo(@NonNull final ViewAnimator viewAnimator, @NonNull final View viewToSwitchTo) {
    if (viewAnimator == null)
        return;
    if (viewAnimator.getCurrentView() == viewToSwitchTo)
        return;
    for (int i = 0; i < viewAnimator.getChildCount(); ++i)
        if (viewAnimator.getChildAt(i) == viewToSwitchTo) {
            viewAnimator.setDisplayedChild(i);
            break;
        }
}

public static void setViewToSwitchTo(@NonNull final ViewAnimator viewAnimator, @IdRes final int viewIdToSwitchTo) {
    if (viewAnimator == null)
        return;
    if (viewAnimator.getCurrentView().getId() == viewIdToSwitchTo)
        return;
    for (int i = 0; i < viewAnimator.getChildCount(); ++i)
        if (viewAnimator.getChildAt(i).getId() == viewIdToSwitchTo) {
            if (viewAnimator.getDisplayedChild() == i)
                return;
            viewAnimator.setDisplayedChild(i);
            return;
        }
}

Usage:

setViewToSwitchTo(viewSwitcher, R.id.webViewLayout);

or:

setViewToSwitchTo(viewSwitcher, webViewLayout);

You can even have an animation when switching between the views, using "inAnimation" and "outAnimation" attributes.

And, if the code gets too large, you can have fragments instead of views. One for the WebView, and another for the video.

About onPageFinished being called multiple times, you need to check which of them is the one that you consider as really being finished. Since each website is different, and can have multiple frames, you will have to add this logic. If you want, you can monitor onPageStarted, as shown here:

• https://forums.xamarin.com/discussion/15293/why-is-onpagefinished-firing-off-three-times-for-one-url-load-request
• https://stackoverflow.com/a/25547544/878126

BTW, if you change the orientation in the manifest, do note that since you have a WebView, you will have to think what to do with orientation change, because it doesn't restore its state well.

---

EDIT:

Here's the layout file:

<ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/viewSwitcher"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="test.test_android.MainActivity">

    <VideoView
        android:id="@+id/videoView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:theme="@android:style/Theme.NoTitleBar.Fullscreen" />

</ViewSwitcher>

in the onCreate, use the code of both of your activities, and add this to go to the video :

setViewToSwitchTo(viewSwitcher, R.id.videoView1);

and this to go to the webView (when it has done loading, in your case) :

setViewToSwitchTo(viewSwitcher, R.id.webView);

Android preload a url into WebView while splashscreen is showing

Follow these steps..

1) set splash layout on your screen.

2) start a new thread, in this thread inflate a layout that contains webview.

3) Load url in webView. Set webview Client to webview to know when your page loading completes. There is a quick example. override onPageFinished.

4) Now break the thread and pass this inflated view to next activity, and set it to setContentView(inflatedView);

Thanks.

How to load url in webview in background while splashscreen is showing?

You can do it without AsyncTask and you can hide the splash screen when the page loaded without a timer.

WebViewClient class has a method onPageFinished() which will be called once the page has been loaded. You can make use of it.

In you project folder, place your splash screen images with name 'splash_screen.png' (or whatever name you want. If you want to use a different name then change this line webView.setBackgroundResource(R.drawable.splash_screen); to map to your splash screen image file) under res/drawable-xxx with corresponding resolutions.

For Eg:
I followed these resolutions for my app's splash screen.

hdpi - 400x800

ldpi - 240x320

mdpi - 320x480

xdpi - 640x960

And try this code:

public class MainActivity extends Activity {
    final Activity activity = this;

    private WebView webView;

    private boolean isSplashOn = false;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        webView.setBackgroundColor(0);
        webView.setBackgroundResource(R.drawable.splash_screen);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setLoadsImagesAutomatically(true);
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webView.getSettings().setAppCacheEnabled(false);
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setPluginsEnabled(true);
        webView.getSettings().setPluginState(PluginState.ON);
        webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.setScrollbarFadingEnabled(false);

        webView.setWebViewClient(new MyWebClient());

        webView.loadUrl("http://www.google.com");
    }

    public class MyWebClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);

            if(url.startsWith("tel:")) {
                Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url));
                startActivity(intent);

                return true;
            }

            return false;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            if(!isSplashOn) {               
                webView.setBackgroundDrawable(null);
                webView.setBackgroundColor(0);

                isSplashOn = true;
            }

            super.onPageFinished(view, url);
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK) {
            if(webView.canGoBack()) {
                webView.goBack();

                return true;
            }else {
                activity.finish();
            }
        }

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY" />

</LinearLayout>

EDIT:

By the way i found the issue with your code. You are trying to set the splash screen to the webview before instantiating it.

Change your code from this:

webview.setBackgroundColor(0);
webview.setBackgroundResource(R.drawable.activity_splash);

webview = (WebView)findViewById(R.id.output);

to this:

webview = (WebView)findViewById(R.id.output);

webview.setBackgroundColor(0);
webview.setBackgroundResource(R.drawable.activity_splash);

Receive URL intent in Splash Screen and load the URL in WebView

I think what youre trying to do is to recieve data from other apps

That way, you can recieve data in a Splash Screen Activity and then show it in a Web View Activity

Display SplashScreen during webview loading

I ended up using a progress-bar instead of splash screen image to display the progress loading of the page in the chrome client, the code is the following:

    public class CusWebChromeClient : WebChromeClient
    {
        Android.Widget.ProgressBar progressBar;

        public SistemiWebChromeClient(Android.Widget.ProgressBar progressBar)
        {
            this.progressBar = progressBar;
        }

        public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
        {
            if (newProgress < 100 && progressBar.Visibility == ViewStates.Gone)
            {
                progressBar.Visibility = ViewStates.Visible;
            }

            progressBar.SetProgress(newProgress, true);

            if (newProgress == 100)
            {
                progressBar.Visibility = ViewStates.Gone;
            }
        }
    }

---

Related Topics