14

Some background to this question is here. It relates to working around a known bug in Android where the WebView background needs to be transparent. Android WebView style background-color:transparent ignored on android 2.2

It involves a WebView, hosting an HTML document with a transparent background, so the WebView is transparent and the HTML document can be overlaid onto other views.

Adding the following method to the WebView subclass and calling it from the constructor works for me on Android v2, v3, and v4, EXCEPT when the pixel height of the WebView is larger than the screen height in pixels (e.g. the WebView is in a ScrollView, so longer than the screen).

protected void setBackgroundToTransparent() {
    this.setBackgroundColor(Color.TRANSPARENT);
    this.setBackgroundDrawable(null);
    if (Build.VERSION.SDK_INT >= 11) // Android v3.0+
        try {
         Method method = View.class.getMethod("setLayerType", int.class,  Paint.class);
         method.invoke(this, 1, new Paint());  // 1 = LAYER_TYPE_SOFTWARE (API11)
        } catch (Exception e) {}
}
Community
  • 1
  • 1
Ollie C
  • 28,313
  • 34
  • 134
  • 217
  • Is there a question here, or did you perhaps answer it within the question itself? – Arne Evertsson Mar 03 '12 at 12:09
  • I thought it was clear that the question is how do I work around the issue to get a transparent WebView working correctly. – Ollie C Mar 03 '12 at 12:17
  • So the question is how to make it work also for the exception? Anyway, it seem to work when I try it out in the simulator even on 4.0. – Arne Evertsson Mar 13 '12 at 08:04
  • Yes, that is the question. It does not work consistently on the Galaxy Nexus. – Ollie C Mar 13 '12 at 10:52
  • Well, thanks for solving my transparency issue with WebView. ;) Looks like an Android bug to me (compare http://code.google.com/p/android/issues/detail?id=28410). Besides, placing a WebView inside a ScrollView feels not good. Because WebView has its own scrolling, two view race for touch events. – Markus Junginger Apr 11 '12 at 17:51
  • this.setBackgroundDrawable(null) caused the text to become transparent as well. I dont think it is necessary either. So, it should be removed. – inder Jan 02 '13 at 03:32

3 Answers3

12

I've encountered the same problem and what I found is that this is a bug in some versions of Android regarding hardware acceleration. Spiri's answer above works, but I needed my WebView to be hardware accelerated because it needs to play videos. What I found works well, is the following:

Instead of using

mWebView.setBackgroundColor(Color.TRANSPARENT);

What I used was:

mWebView.setBackgroundColor(Color.argb(1, 255, 255, 255));

This worked on all the Android devices where I was previously having this issue.

Alexandru Dragutu
  • 121
  • 1
  • 3
  • 1
    This is more like a bugfix, you don't set alpha to 0 but to 1 (from 255), which is nearly invisible but the hardware will still render it. – paulgavrikov Oct 16 '13 at 06:46
  • This seems to fail now with Android 11 and 12 - I have used a Cordova plugin which followed this trick `(1, 0, 0, 0)` for transparency, and while it worked on older devices, it started just showing black screen on Android 11. Changing the color to transparent solved the isse (also on android 10 so I see no problem in using it now) – hazelnutek Mar 10 '22 at 07:25
9

I had a similar problem with android api level 16 and this solved it: 

view.setLayerType(View.LAYER_TYPE_SOFTWARE, null); // 'view' is a WebView

This disables the hardware acceleration on the view according to the documentation: http://developer.android.com/guide/topics/graphics/hardware-accel.html

I know that it's not the way to go, but since this is an known issue, util they come up with a proper solution, this one does the job (at least for me).

Spiri
  • 1,283
  • 11
  • 24
1

I spent a couple hours on this the other day and tried every answer there possibly is on the subject as well as investigating stuff myself. I came to your same issue where if the webview was scrollable then it would not be transparent. The only way I could make it transparent is if I disable GPU rendering in Settings > Developer Options. I eventually just did a check for if gpu rendering was enabled and then set the background to some color that best matched. If you come up with a solution I would be impressed to hear it.

Jared
  • 76
  • 3