20

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

9 Answers 9

34

You could alternatively make the webview transparent:

webview.setBackgroundColor(0x00000000); 
3
  • This is the jammy that fixed it for me. Jul 26, 2013 at 21:21
  • 8
    Adding android:background="@android:color/transparent" in the XML doesn't have any effect. webView.setBackgroundColor(Color.TRANSPARENT) does. Aug 28, 2017 at 23:05
  • wouldnt it make the app look like its frozen for a few seconds until url loads?
    – NullByte08
    Jun 15, 2020 at 13:34
8

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
        }
       }

      });
1
  • For me not worked - onPageFinished called too early, so these 2-4 seconds of white screen is still not fixed
    – Vadim
    Apr 24, 2019 at 7:53
2

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.

0

Maybe you can take a look at this previous issue.

How to listen for a WebView finishing loading a URL?

2
  • Thanks - perfect start. I was searching on the wrong keywords!
    – Robbe
    Mar 14, 2011 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 stackoverflow.com/a/31537328/1066839
    – John
    Jul 21, 2015 at 11:09
0

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);
            }
        });
0

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

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.

0

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
}
0

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" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.