Make a WebView transparent while loading content

Question

Is there a way to make a WebView transparent (so the user can see through it to the view behind), until it's (non-transparent) content has loaded content?

mWebView.setBackgroundColor(Color.TRANSPARENT); works temporarily, but unfortunately the WebView becomes non-transparent fairly soon after the content starts loading.

The equivalent approach works on iOS.

Have you tried setting the transparency after url/data is loaded? — Adam Adli, Jan 08 '18 at 16:11

score 0 · Answer 1 · answered Jan 08 '18 at 16:03

0

Simply not showing your webview until the content has loaded should have the same effect. Something along these lines: How to listen for a WebView finishing loading a URL?

answered Jan 08 '18 at 16:03

Stephen

4,041
22
39

score 0 · Answer 2 · answered Jan 08 '18 at 16:33

@stephen's answer seems to be in right direction.

However, you can try one more approach. Make your layout structured like this

<FrameLayout>
   <WebView>
   <RelativeLayout> --> Rest Layout here
</FrameLayout>

Now as RelativeLayout is added after WebView, it will be visible on top of WebView, Once your webpage is fully loaded, you can hide RelativeLayout like this

mWebView.setWebViewClient(new WebViewClient() {
   public void onPageFinished(WebView view, String url) {
        // hide RelativeLayout here...
    }
});

score 0 · Answer 3 · answered Jan 08 '18 at 16:48

I've achieved this effect by using setting the alpha value of a parent layout of the webview element to 0.01f, might work also directly on the Webview.

view.setAlpha(0.01f);

and then setting the alpha to 1 when webview finished loading in onPageFinished.

Setting the visibility to Gone/Hidden stops the Webview.

Make a WebView transparent while loading content

3 Answers3