How do I get rid of the white screen before a web view fully renders?

Question

I have a webview loaded through loadData() but when it renders it always shows a white page for a split second before it loads the right data.

holder.webView.setWebChromeClient(new WebChromeClient(){
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            if(newProgress==100){
                holder.webView.setVisibility(View.VISIBLE);
            }
        }
});

I already tried to make the web view visible only after it is fully loaded, but no luck.

Is there an easy way to get rid of this?

score 0 · Answer 1 · answered Jul 31 '18 at 15:33

0

You could hide it until it finishes loading, you can listen to when it finishes by the following

mWebView.setWebViewClient(new WebViewClient() {

public void onPageFinished(WebView view, String url) {
    // show it
  }
});

More information can be found in this answer

answered Jul 31 '18 at 15:33

em_

2,134
2
24
39

On top of that that method gets called only after the content are there, not when they are properly displayed – Alessandro Bianchin Jul 31 '18 at 15:48

score 0 · Answer 2 · answered Jul 31 '18 at 15:55

0

Just as you said, it takes a bit of time to process the data after the page is fully loaded. Since the time is predictable (200ms to 1000ms) you can use a delay after the page is loaded and show it after 1 second or the maximum time it takes to process the page.

new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            holder.webView.setVisibility(View.VISIBLE);
        }
    }, MAX_TIME_TAKEN_MILLIS);

Please note that for effectiveness during hiding, use VIEW.INVISIBLE instead of VIEW.GONE

answered Jul 31 '18 at 15:55

Lucem

2,912
3
20
33

I've also tried this solution already, even with larger wait times, but it doesn't change the outcome, sadly. – Alessandro Bianchin Jul 31 '18 at 15:58
okay, instead then, create a layout on top of the webview, and instead of making the webview visible, hide the layout thats on top. Maybe the visibility is affecting @AlessandroBianchin – Lucem Jul 31 '18 at 16:01
I've just finished working so I'll have to wait until tomorrow to try. Thanks in advance! – Alessandro Bianchin Jul 31 '18 at 16:06
you welcome, you can upvote and accept the answer if its helpful – Lucem Jul 31 '18 at 17:53
How would the layout work? It has to have a color or it won't hide the webview, so the problem would still be there – Alessandro Bianchin Aug 01 '18 at 06:36
yes, a solid white color or the color of the background. it wont affect anything – Lucem Aug 01 '18 at 06:37
my background is an image and the web view is transparent so I don't think that will work – Alessandro Bianchin Aug 01 '18 at 07:09
okay, this is what i mean, u have assuming its `FrameLayout`, you have an `image` then `webview`. Now dublicate the `image` below `webview` so your layout will be `image`, `webview` then `image` again. At this point you cant see the webview so it basically looks like only the background image. when the web loads and after delay, hide the last `image` we dublicated. so the layout will be `image` then `webview`. I have tested it – Lucem Aug 01 '18 at 07:26
it works but it only changes from white flashing to image flashing. And I don't have a good method to know when the white flash stops so I can then hide the image – Alessandro Bianchin Aug 01 '18 at 08:44

How do I get rid of the white screen before a web view fully renders?

2 Answers2