How to manage the Blank White Loading screen of an Android Webview?

Question

This is more of a visual thing than a direct issue, but when a WebView loads in my application, the screen is blank white for between 2-4 seconds until the content is fully loaded. The time is dependent on the size of content that is loading.

Is there a way to manage this, so that the screen will only refresh to the content when loaded? Something like a "loading..." animation or something similar? I just do not want the plain white screen presented to my users.

I have a splash screen that then loads the WebView. The WebView works fine after that initial blank pause (while loading), but I would like to hold it on a particular screen until the page has loaded or have a black screen with a progress loader.

Is there something that detects a load complete perhaps? If that were the case, I could use it as a trigger.

Does anyone know of a way to manage this blank white screen?

Thanks!

/r

score 34 · Answer 1 · answered Oct 01 '11 at 02:16

34

You could alternatively make the webview transparent:

webview.setBackgroundColor(0x00000000);

answered Oct 01 '11 at 02:16

Lawrence Cherone

46,049
7
62
106

This is the jammy that fixed it for me. – Alfie Hanssen Jul 26 '13 at 21:21
8

Adding `android:background="@android:color/transparent"` in the XML doesn't have any effect. `webView.setBackgroundColor(Color.TRANSPARENT)` does. – Steve Blackwell Aug 28 '17 at 23:05
wouldnt it make the app look like its frozen for a few seconds until url loads? – NullByte08 Jun 15 '20 at 13:34

score 8 · Answer 2 · answered Oct 08 '12 at 16:01

Simply put this code in onCreate

               ProgressDialog _dialog ;                   
               my_web_view.setWebViewClient(new WebViewClient(){


       @Override
       public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // TODO Auto-generated method stub
        _dialog =ProgressDialog.show(Store_locator.this, "", "Please wait...");
        super.onPageStarted(view, url, favicon);
       }
       @Override
       public void onPageFinished(WebView view, String url) {
        // TODO Auto-generated method stub
        super.onPageFinished(view, url);
        _dialog.dismiss();
       }

       @Override
       public void onReceivedError(WebView view, int errorCode,
         String description, String failingUrl) {
        // TODO Auto-generated method stub
        super.onReceivedError(view, errorCode, description, failingUrl);
        try{
         _dialog.dismiss();
        }catch (Exception e) {
         // TODO: handle exception
        }
       }

      });

For me not worked - onPageFinished called too early, so these 2-4 seconds of white screen is still not fixed — Vadim, Apr 24 '19 at 07:53

score 2 · Answer 3 · answered Aug 09 '12 at 18:32

the answer to this is that there's no good answer. what you want, as you stated, is that the webview shows the current content until the new content is loaded ... just like a normal browser. it won't do that.

you can show loading animations, but it's still not a good user experience. if you make a full-screen type of animation, the user is jarred with flashing screens. if you make a browser-type progress at the top / bottom, it looks odd because you still have most of the page white.

score 0 · Accepted Answer · edited May 23 '17 at 12:25

0

Maybe you can take a look at this previous issue.

How to listen for a WebView finishing loading a URL?

edited May 23 '17 at 12:25

Community

1
1

answered Mar 14 '11 at 20:42

papachan

1,891
17
20

Thanks - perfect start. I was searching on the wrong keywords! – Robbe Mar 14 '11 at 21:07
Sometimes, onPageFinished will be called even if the page is not rendered fully, So you may get a blank screen on webview . To show progress dialog untill the page is fully rendered you have to use onLoadResource and check the progress of the page. Check this answer http://stackoverflow.com/a/31537328/1066839 – John Jul 21 '15 at 11:09

score 0 · Answer 5 · answered Nov 01 '19 at 14:16

To manage blank white screen what you can do is set a proper background colour (not white) to your layout xml , make the visibility of the webview gone in the layout xml file and add a webviewclient to it and whenever the load of the URL is completed the set the webview's visibility to visible.


            public void onPageFinished(WebView view, String url) {
                // do your stuff here
                webView.setVisibility(View.VISIBLE);
            }
        });

score 0 · Answer 6 · answered Dec 04 '19 at 15:44

0

webView.setBackgroundColor(Color.TRANSPARENT) removes the white screen for webview

answered Dec 04 '19 at 15:44

sonia

1
1

score 0 · Answer 7 · edited Nov 10 '20 at 08:23

0

webview.setBackgroundColor(0x00000000);

Worked for me for eg: Instead of 0x00000000, I use my color code 6424633 (Hex code - #620839 for the red background

Hence when Splash screen intent open Mainactivity, instead of showing white blank screen, will show red background and when webview load URL it will be gone.

edited Nov 10 '20 at 08:23

Mojtaba Ahmadi

1,044
19
38

answered Nov 09 '20 at 14:05

Shah0651

307
3
8

score 0 · Answer 8 · answered Sep 25 '22 at 11:30

I'm having the same problem, it was resolved when I added the code below to webView.setWebViewClient.

@SuppressLint("WebViewClientOnReceivedSslError")
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    handler.proceed(); // Ignore SSL certificate errors
}

score 0 · Answer 9 · answered Oct 17 '22 at 19:57

Load URL in Web View - kotlin

Check the below code it will help:

WebViewActivity.kt

class WebViewActivity : AppCompatActivity() {
private lateinit var webView: WebView
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_web_view)
    initView()
    loadData()
}

@SuppressLint("SetJavaScriptEnabled")
private fun loadData() {
    webView.settings.domStorageEnabled = true
    webView.isHorizontalScrollBarEnabled = true
    webView.settings.javaScriptEnabled = true
    webView.settings.setSupportZoom(true)
    webView.settings.builtInZoomControls = true
    webView.requestFocus()
    webView.webViewClient = AppWebViewClients()
    webView.settings.setSupportMultipleWindows(true)
    val url = "https://www.africau.edu/images/default/sample.pdf"
    webView.loadUrl("http://docs.google.com/gview?embedded=true&url=$url")
}

class AppWebViewClients : WebViewClient() {
    @Deprecated("Deprecated in Java")
    override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
        view.loadUrl(url)
        return true
    }

    override fun onPageCommitVisible(view: WebView?, url: String?) {
        super.onPageCommitVisible(view, url)
    }

    override fun shouldOverrideUrlLoading(
        view: WebView?,
        request: WebResourceRequest?
    ): Boolean {
        return super.shouldOverrideUrlLoading(view, request)
    }
}

private fun initView() {
    webView = findViewById(R.id.web_view)
}

AndroidManifest.xml

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

How to manage the Blank White Loading screen of an Android Webview?

9 Answers9

Linked