Android WebView style background-color:transparent ignored on android 2.2

Android Background Webview Transparency Transparent

Android Problem Overview

I'm struggling to create a WebView with transparent background.

webView.setBackgroundColor(0x00FFFFFF);
webView.setBackgroundDrawable(myDrawable);

Then I load a html page with

<body style="background-color:transparent;" ...

The background color of the WebView is transparent but as soon as the page is loaded, it's overwritten by a black background from the html page. This only happens on android 2.2, it works on android 2.1.

So is there something to add in the html page code to make it really transparent ?

Android Solutions

Solution 1 - Android

This worked for me,

mWebView.setBackgroundColor(Color.TRANSPARENT);

Solution 2 - Android

At the bottom of this earlier mentioned issue there is an solution. It's a combination of 2 solutions.

webView.setBackgroundColor(Color.TRANSPARENT);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

When adding this code to the WebViewer after loading the url, it works (API 11+).

It even works when hardeware acceleration is ON

Solution 3 - Android

I had the same issue with 2.2 and also in 2.3. I solved the problem by giving the alpa value in html not in android. I tried many things and what I found out is setBackgroundColor(); color doesnt work with alpha value. webView.setBackgroundColor(Color.argb(128, 0, 0, 0)); will not work.

so here is my solution, worked for me.

      String webData = StringHelper.addSlashes("<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " +
	  "content=\"text/html; charset=utf-8\"> </head><body><div style=\"background-color: rgba(10,10,10,0.5); " +
	  "padding: 20px; height: 260px; border-radius: 8px;\"> $$$ Content Goes Here ! $$$ </div> </body></html>");

And in Java,

    webView = (WebView) findViewById(R.id.webview);
	webView.setBackgroundColor(0);
	webView.loadData(webData, "text/html", "UTF-8");

And here is the Output screenshot below. enter image description here

Solution 4 - Android

Actually it's a bug and nobody found a workaround so far. An issue has been created. The bug is still here in honeycomb.

Please star it if you think it's important : http://code.google.com/p/android/issues/detail?id=14749

Solution 5 - Android

This is how you do it:

First make your project base on 11, but in AndroidManifest set minSdkVersion to 8

android:hardwareAccelerated="false" is unnecessary, and it's incompatible with 8

wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this.wv.setWebViewClient(new WebViewClient()
{
	@Override
	public void onPageFinished(WebView view, String url)
	{
		wv.setBackgroundColor(0x00000000);
		if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
	}
});

For safety put this in your style:

BODY, HTML {background: transparent}

worked for me on 2.2 and 4

Solution 6 - Android

The most important thing was not mentioned.

The html must have a body tag with background-color set to transparent.

So the full solution would be:

HTML

    <body style="display: flex; background-color:transparent">some content</body>

Activity

    WebView wv = (WebView) findViewById(R.id.webView);
    wv.setBackgroundColor(0);
    wv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    wv.loadUrl("file:///android_asset/myview.html");

Solution 7 - Android

below code works fine Android 3.0+ but when you try this code below android 3.0 then your app forcefully closed.

webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

You try below code on your less then API 11.

webview.setBackgroundColor(Color.parseColor("#919191"));

you can also try below code which works on all API fine.

    webview.setBackgroundColor(Color.parseColor("#919191"));
    if (Build.VERSION.SDK_INT >= 11) {
		webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
	}

above code use full for me.

Solution 8 - Android

Try webView.setBackgroundColor(0);

Solution 9 - Android

Following code work for me, though i have multiple webviews and scrolling between them is bit sluggish.

v.setBackgroundColor(Color.TRANSPARENT);
Paint p = new Paint();
v.setLayerType(LAYER_TYPE_SOFTWARE, p);

Solution 10 - Android

Use this

WebView myWebView = (WebView) findViewById(R.id.my_web);

myWebView.setBackgroundColor(0);

Solution 11 - Android

After trying everything given above. I found it doesn't matter either you specify webView.setBackgroundColor(Color.TRANSPARENT) before or after loadUrl() /loadData().
The thing that matters is you should explicitly declare android:hardwareAccelerated="false" in the manifest.

Tested on IceCream Sandwich

Solution 12 - Android

Just use these lines .....

webView.loadDataWithBaseURL(null,"Hello", "text/html", "utf-8", null);
webView.setBackgroundColor(0x00000000);

And remember a point that Always set background color after loading data in webview.

Solution 13 - Android

webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this will definitely work.. set background in XML with Editbackground. Now that background will be shown

Solution 14 - Android

This didn't work,

android:background="@android:color/transparent"

Setting the webview background color as worked

webView.setBackgroundColor(0)

Additionally, I set window background drawable as transparent

Solution 15 - Android

set the bg after loading the html(from quick tests it seems loading the html resets the bg color.. this is for 2.3).

if you're loading the html from data you already got, just doing a .postDelayed in which you just set the bg(to for example transparent) is enough..

Solution 16 - Android

If webview is scrollable:

Add this to the Manifest:
```
 android:hardwareAccelerated="false"
```

Add the following to WebView in the layout:

 android:background="@android:color/transparent"
 android:layerType="software"

Add the following to the parents scroll view:
```
 android:layerType="software"
```

Solution 17 - Android

Try

webView.setBackgroundColor(Color.parseColor("#EDEDED"));

Solution 18 - Android

I was trying to put a transparent HTML overlay over my GL view but it has always black flickering which covers my GL view. After several days trying to get rid of this flickering I found this workaround which is acceptable for me (but a shame for android).

The problem is that I need hardware acceleration for my nice CSS animations and so webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); is not an option for me.

The trick was to put a second (empty) WebView between my GL view and the HTML overlay. This dummyWebView I told to render in SW mode, and now my HTML overlays renders smooth in HW and no more black flickering.

I don't know if this works on other devices than My Acer Iconia A700, but I hope I could help someone with this.

public class MyActivity extends Activity {

	@Override
	protected void onCreate(Bundle icicle) {
		super.onCreate(icicle);

		RelativeLayout layout = new RelativeLayout(getApplication());
		setContentView(layout);

		MyGlView glView = new MyGlView(this);

		RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
		
		dummyWebView = new WebView(this);
		dummyWebView.setLayoutParams(params);
		dummyWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
		dummyWebView.loadData("", "text/plain", "utf8");
		dummyWebView.setBackgroundColor(0x00000000);

		webView = new WebView(this);
		webView.setLayoutParams(params);
		webView.loadUrl("http://10.0.21.254:5984/ui/index.html");
		webView.setBackgroundColor(0x00000000);
		

		layout.addView(glView);
		layout.addView(dummyWebView);
		layout.addView(webView);
	}
}

Solution 19 - Android

This worked for me. try setting the background color after the data is loaded. for that setWebViewClient on your webview object like:

    webView.setWebViewClient(new WebViewClient(){
		
		@Override
		public void onPageFinished(WebView view, String url)
		{
			super.onPageFinished(view, url);
			webView.setBackgroundColor(Color.BLACK);
		}
	});

Solution 20 - Android

Try out:

myWebView.setAlpha(0.2f);

Solution 21 - Android

If nothing helps, then most probably you have fixed sized webView, change the width and height to wrap_content or match_parent, it should work. That worked for me when I tried to load a Gif.

Solution 22 - Android

You can user BindingAdapter like this:

Java

@BindingAdapter("setBackground")
public static void setBackground(WebView view,@ColorRes int resId) {
        view.setBackgroundColor(view.getContext().getResources().getColor(resId));
        view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}

XML:

<layout >

    <data>
        
        <import type="com.tdk.sekini.R" />
         
        
    </data>

       <WebView
            ...
            app:setBackground="@{R.color.grey_10_transparent}"/>

</layout>

Resources

<color name="grey_10_transparent">#11e6e6e6</color>

Solution 23 - Android

myWebView.setAlpha(0);

is the best answer. It works!

Content Type	Original Author	Original Content on Stackoverflow
Question	jptsetung	View Question on Stackoverflow
Solution 1 - Android	scottyab	View Answer on Stackoverflow
Solution 2 - Android	Ceetn	View Answer on Stackoverflow
Solution 3 - Android	osayilgan	View Answer on Stackoverflow
Solution 4 - Android	jptsetung	View Answer on Stackoverflow
Solution 5 - Android	Ali	View Answer on Stackoverflow
Solution 6 - Android	lilotop	View Answer on Stackoverflow
Solution 7 - Android	duggu	View Answer on Stackoverflow
Solution 8 - Android	Andrew Podkin	View Answer on Stackoverflow
Solution 9 - Android	Umair	View Answer on Stackoverflow
Solution 10 - Android	Zahid Habib	View Answer on Stackoverflow
Solution 11 - Android	Gaurav Arora	View Answer on Stackoverflow
Solution 12 - Android	Atul Bhardwaj	View Answer on Stackoverflow
Solution 13 - Android	Shivendra	View Answer on Stackoverflow
Solution 14 - Android	Aziz	View Answer on Stackoverflow
Solution 15 - Android	Lassi Kinnunen	View Answer on Stackoverflow
Solution 16 - Android	Baton	View Answer on Stackoverflow
Solution 17 - Android	raja	View Answer on Stackoverflow
Solution 18 - Android	Ingemar	View Answer on Stackoverflow
Solution 19 - Android	Abdul Mohsin	View Answer on Stackoverflow
Solution 20 - Android	ABN	View Answer on Stackoverflow
Solution 21 - Android	Hayk	View Answer on Stackoverflow
Solution 22 - Android	Ahmad Aghazadeh	View Answer on Stackoverflow
Solution 23 - Android	Wooden Ghost	View Answer on Stackoverflow