WebView background-color:transparent is ignored [36925660]

Assigned

Bug

Status Update

No update yet.

Description

jp...@gmail.com

created issue #1

Feb 15, 2011 12:35PM

It is impossible to display an html page with a transparent background on android 2.2.

Firstly set the background color of the WebView object to transaprent. I also set a background image that I want the html page being displayed over.

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

Then load a simple page with css styl background-color:transparent

<body style="background-color:transparent;">My text</body>

What happens :

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. Which shows the Webkit engine ignores the background-color:transparent style.

This only happens on android 2.2, it works on android 2.1.

This issue combined with the issue of the fixed background style (

http://code.google.com/p/android/issues/detail?id=3301 ), make it impossible to use a WebView with a fixed background image.

Again another bug that nobody cares and that will never been addressed by the android team ?

Comments

jp...@gmail.com <jp...@gmail.com> #2Feb 15, 2011 12:43PM

This issue does not reproduce with dev preview 4.

en...@google.com <en...@google.com> #3Feb 15, 2011 10:27PM

Closing this issue as per

comment #2

from reporter.

jp...@gmail.com <jp...@gmail.com> #4Feb 19, 2011 10:12AM

Same behaviour on 2.3.1, tested on the AVD.
Same behaviour on 2.3.3, tested on the AVD.

Sorry I can't test my app on Honeycomb preview because I have an error INSTALL_FAILED_MISSING_SHARED_LIBRARY.

Here is the html code I'm using :

<html><head><title>Title of the document</title></head><body bgcolor="transparent" style="background-color:transparent;">The content of the document......</body></html>

fl...@gmail.com <fl...@gmail.com> #5Feb 27, 2011 10:01AM

same issue on 3.0

fl...@gmail.com <fl...@gmail.com> #6Mar 4, 2011 03:37AM

Please merge this two together: Same thing

http://code.google.com/p/android/issues/detail?id=15088

jp...@gmail.com <jp...@gmail.com> #8Mar 4, 2011 11:12AM

Just another remark about this issue. In Android 2.1, the transparent background style was working fine, but it was hardly usable because of the refresh problems described here (

http://groups.google.com/group/android-developers/browse_thread/thread/77b2db59fa9f06b3 ). Basically if you modify the page with javascript calls after the page is loaded, the webview renders over the previous rendering of the page.

I don' know if this issue is still in 2.2 and over as it's not possible to test with the transparent background style being ignored, but don't forget to check the refresh issue too if you correct this one.

By the way, why is this issue status is still in "needs info" ?

fl...@gmail.com <fl...@gmail.com> #9Mar 5, 2011 07:31AM

For my understanding this is a high priority issue since the WebView is not usable as overlay for other views. This prevents nearly entirely the development of HTML5 applications where the webview is layered onto other native views (e.g. Camera).

HTML5 and Web Technologies are already real alternatives to cross platform app development. Also these kind of technologies can deal better with different screen
resolutions.

I am surprised didn't arose earlier, but I believe that people just gave up or didn't know that it is possible at all.

I vote to get this resolved as quickly as possible.

ir...@gmail.com <ir...@gmail.com> #10Mar 25, 2011 09:41AM

I am facing the same problem - WebView is transparent until the page has loaded.
The page contains css setting the background-color: transparent property.

In my case the background is white and not black.

I experienced the issue with Android 2.2...

Personally, I also believe this is a real issue, as I consider the WebView the simplest way to present static text that can very easily formatted and structured, e.g. when you only need particular words to be bold, need some superscript for footnotes and the like. Doing this with TextViews just wouldn't seem right...

ir...@gmail.com <ir...@gmail.com> #11Mar 25, 2011 01:06PM

I have found a solution for my particular problem, as I don't want to navigate further via weblinks and the like.

If you want to display formatted text from a web page you can use a TextView instead of a WebView, in which you set the extracted HTML-code from your page, e.g.

TextView textBox = new TextView(context);
textBox.setText(Html.fromHtml("" lorem "" + " " +
"" ipsum "" + " " +
"" dolor ""));

and eventually add a picture via the compound view...

wa...@zte.com.cn <wa...@zte.com.cn> #12Apr 27, 2011 03:17AM

I need to know how to solve the transparent background color problem in WebView. Does anyone has ideas? thx a lot!

da...@gmail.com <da...@gmail.com> #13May 13, 2011 05:02PM

Very dissappointing bug

on...@gmail.com <on...@gmail.com> #14Jun 6, 2011 05:18AM

I'd love to see this fixed as well.

mb...@gmail.com <mb...@gmail.com> #15Jun 28, 2011 11:45AM

Try this:

webView.setBackgroundColor(0x00000000);

Works on 3.1, too

(Source:

http://stackoverflow.com/questions/5003156/android-webview-style-background-colortransparent-ignored-on-android-2-2 )

lu...@gmail.com <lu...@gmail.com> #16Jul 19, 2011 03:29PM

I am working with:
Android 3.1 (Samsung Galaxy Tab 10.1)

I am trying to display formatted text, specifically bullet point lists. I first tried to use a TextView, however the formatting was not nearly good enough (no bullets for starters).

Next step was to use a WebView, which formatted the text very nicely, but failed to have a transparent background. I have both:
<body bgcolor="transparent" style="background-color:transparent;">
and
protocolWebView.setBackgroundColor(0x00000000);

and I got a white background until I turned off hardware acceleration:
android:hardwareAccelerated="false"
in the manifest.

After turning hardware acceleration off the WebView had a transparent background. Unfortunately for me, my app is simply to choppy without hardware acceleration, since I am doing a good amount of animation.

hopefully this will help someone else out.

ma...@gmail.com <ma...@gmail.com> #17Jul 21, 2011 06:06PM

I found thatsetBackgroundColor(0x00000000); gives me transparency if it's called AFTER loadUrl()/loadData(). The order seems to be the key. This appears to work on 2.3 and 3.2, anyway.

so...@gmail.com <so...@gmail.com> #18Aug 5, 2011 02:24AM

I noticed that setBackgroundColor(0x00000000); can even be called before loadURL().
There's also no requirement for a <body style="background:transparent">.
So this works on 2.3.x

[Deleted User] <[Deleted User]> #19Aug 24, 2011 10:59AM

Same thing here.

I'm setting

setBackgroundColor(Color.TRANSPARENT);
setBackgroundDrawable(null);
setBackgroundResource(0);

This works when manifest has android:hardwareAccelerated="false"

When I set it to true, all alpha effects are shown as white, also transparent background is white.

Tried to move those setters after loadUrl and other places, but it seems to have no effect.

This happens with Motorola Xoom, Android 3.2.

ma...@gmail.com <ma...@gmail.com> #20Sep 5, 2011 06:43PM

Same problem here, Asus Transformer HC3.2 Turning off Hardware Accel in my app fixed it. It's not the optimal solution, but it's OK for my particular application.

ma...@gmail.com <ma...@gmail.com> #21Sep 7, 2011 09:13PM

Actually it turns out turning off Hardware Accel is not a suitable fix for me, as very quickly I came across another problem that NEEDED hardware accel turned on...

ke...@diyism.com <ke...@diyism.com> #22Sep 19, 2011 04:42AM

Currently, we could webview.setBackgroundColor(Color.TRANSPARENT) in onLayout(), and then add 'style="background-color:white;"' into html element.

ge...@gmail.com <ge...@gmail.com> #23Sep 19, 2011 06:54AM

Dear Kexian,

I am not clear about what you said. would you please explain your solution in details?

mu...@gmail.com <mu...@gmail.com> #24Sep 26, 2011 10:09PM

Kexian, we want the webview to be transparent. I don't see how setting background-color can be the solution? Can you please explain further?

fu...@gmail.com <fu...@gmail.com> #25Oct 5, 2011 11:33AM

You can make everything but the webview hardware accelerated:

Set the flag in the manifest.
<application ... hardwareAccelerated="true"></aplication>

Disable individual views:
findViewById(R.id.wv_content).setLayerType(View.LAYER_TYPE_SOFTWARE, null);

mu...@gmail.com <mu...@gmail.com> #26Oct 5, 2011 10:42PM

FunkTheM, thank you so much for pointing it out. It fixed my issues and the app is still responsive as it should be with the accel.

[Deleted User] <[Deleted User]> #27Oct 5, 2011 10:46PM

FunkTheM, thanks for your suggestion. It is definitely good to know but your fix disables flash in the webView which is a deal breaker for me. Also, I need to position the webView at specific co-ordinates and it seems like the webView renders itself at 0,0 and gets clipped by the layout that contains it when hardware accel is turned on. Any help?

an...@gmail.com <an...@gmail.com> #28Mar 26, 2012 01:39PM

Hi, I want to display web contents on top of camera, can anyone plz guide me on this....
Any help will be appreciated ...
Regards

ju...@gmail.com <ju...@gmail.com> #29Apr 3, 2012 09:43PM

I'm still not able to get transparent webview w/ or w\ hardwareAcceleration on my ICS phone...

gr...@gmail.com <gr...@gmail.com> #30Apr 9, 2012 09:41PM

Hi, I am unable to get a transparent webview with hardwareAccelaration on my ICS phone.

an...@gmail.com <an...@gmail.com> #31Apr 11, 2012 07:41PM

Same problem with ICS and hardwareAcceleration activated

oc...@gmail.com <oc...@gmail.com> #32Apr 16, 2012 05:46PM

Pain in the butt!

ka...@gmail.com <ka...@gmail.com> #33Jun 26, 2012 09:06AM

Like everyone else I had my transparent background go to white on ics phone.

A not satisfactory thing I did but that saved the day. In the CSS of the html page :

<style>
body {background-color:#000000;background:transparent;}
</style>

It actually lets the background be transparent for any device that support it and it gives me a black background on device that don't support it. You can change the #000000 to any color and it should work. Not perfect but at least you have a fallback solution.

It very sad when you have to hack yourself through Android as if it was Internet Explorer 6 !!

jr...@gmail.com <jr...@gmail.com> #34Aug 14, 2012 05:07AM

I tried everything...

From every google search I found 4 hacks for a workaround:

1)
set after loading webview:
webView.setBackgroundColor(0x00000000);

2)
For API 11+
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

3)
Adding the following to WebView in the layout
android:background="@android:color/transparent"
android:layerType="software"

4)
Adding this to the activity
android:hardwareAccelerated="false"

Some of them actually worked but if the webview is scrollable it NEVER worked!

mk...@gmail.com <mk...@gmail.com> #35Nov 24, 2012 06:48AM

I only had the background problem for API 11+.
Solutions that worked for me are:

Either:

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

or in the manifest file:

android:layerType="software"

Which basically means to turn off the hardware acceleration for the webView view.

Tested on APIs 8-15

*It worked when the webView is scrollable as well.

ne...@gmail.com <ne...@gmail.com> #36Nov 24, 2012 07:45AM

I can confirm that the following solution works on every droid I tested (2.1, 2.3, 3.2, 4.0.3, 4.0.4, 4.1.1, 4.1.2):

webview.loadDataWithBaseURL(null, "<html><body background=\"#00000000\" link=\"white\">" + content + "</body</html>", "text/html", "UTF-8", null);
webview.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) // Android v3.0+
try {
Method method = View.class.getMethod("setLayerType", int.class, Paint.class);
method.invoke(webview, 1, new Paint()); // 1 = LAYER_TYPE_SOFTWARE (API11)
} catch (Exception e) {
}

No other changes are necessary.

da...@gmail.com <da...@gmail.com> #37Dec 11, 2012 06:12AM

Why is this set to "NeedInfo"? Seems most if not all of the information needed is above.

bo...@gmail.com <bo...@gmail.com> #38Jan 23, 2013 07:30AM

I found if there was an image bigger than the screen width then the background will be white(on Android 4.x). Disable hardware accelerate is useless.

jr...@android.com <jr...@android.com> Feb 12, 2013 06:06PM

Assigned to be...@android.com.

i0...@gmail.com <i0...@gmail.com> #39Feb 28, 2013 06:41PM

WebView is not getting a transparent back ground in 3.0 and highers

at...@gmail.com <at...@gmail.com> #40Mar 6, 2013 08:35PM

Hi Boli,
I have the same issue(

Issue 36949180

:Android 4.1 dose not load more than one background image).
Did you find any solution or work around

Thank you in advance
Atanu

ImageLoadingIssue.png

66 KB

View

Download

ImageWithNoIssue.png

117 KB