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

Question

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 ?

I'm sorry to say, but for my problem no solution listed here worked... :=( thx anyways.. the webpage always used a white background... — cV2, Sep 06 '12 at 05:53

score 319 · Answer 1 · edited Jan 02 '15 at 19:15

319

This worked for me,

mWebView.setBackgroundColor(Color.TRANSPARENT);

edited Jan 02 '15 at 19:15

riwnodennyk

8,140
4
35
37

answered May 05 '11 at 14:47

scottyab

23,621
16
94
105

1

Have you really tested on os 2.2 ? – jptsetung May 08 '11 at 09:13
93

I found that this has to be called *AFTER* loading the url or data. – Mark Jul 21 '11 at 18:07
11

it doesn't work in android 3.x if you are using `android:hardwareAccelerated="true"` – Macarse Jul 28 '11 at 18:46
2

Note that on ICS(4.0.3), in addition to above comments; I had to disable "Settings -> Developer Options -> Force GPU Rendering" to get transparency to work with API level 10. – Aki Aug 28 '12 at 21:57
Well, HW accel dont handle alpha, and a bunch of other nice canvas related features. It makes me sad ... – opaque Sep 25 '12 at 12:14
10

ACtually I don't understand why this answer gets so many up votes. webView.setBackgroundColor(0x00000000); is exactly the same as webView.setBackgroundColor(0x00FFFFFF); the alpha value is 0x00. – jptsetung Sep 26 '12 at 22:26
Some code for different devices always yields randomly different result. Android or "Randroid"? – macio.Jun Mar 18 '15 at 18:46

score 133 · Answer 2 · edited Jun 20 '20 at 09:12

133

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 20 '12 at 14:24

Ceetn

2,728
2
25
28

3

It Works as long as the Webview is not scrollable. – Rany Ishak Nov 16 '12 at 13:14
I needed set background color after force software rendering on samsung S3 – neworld May 16 '13 at 10:34
7

webView.setBackgroundColor(Color.argb(1, 0, 0, 0)); if you want no background flickering on scroll – Trent Seed Jul 12 '13 at 20:22
@Trent I tried your method and if fixed the flicker problem on Jelly Bean, but now it displays a black background on Gingerbread. Any other suggestion? – Bitcoin Cash - ADA enthusiast Aug 28 '13 at 23:33
Only true way for make webview background transparent. Great solution! – a.black13 Feb 28 '14 at 13:43
@Trent getting the same black background issue on 4.0.4 - did you get a solution for this? – oshevans Oct 23 '14 at 19:59
2

This disables hardware acceleration for the webview ! ! This was not obvious to me (blame on me for not looking it up before using :D), and the last sentence of the answer leaves the opposite impression. This actually affects a lot of things, videos, UI transformations, scrolling, canvas etc. A possible workaround http://stackoverflow.com/a/17815574/2487876 – Kristjan Liiva Jan 09 '16 at 00:59

score 38 · Answer 3 · edited Jul 02 '14 at 10:46

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

score 31 · Accepted Answer · answered Mar 01 '11 at 08:28

31

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

answered Mar 01 '11 at 08:28

jptsetung

9,064
3
43
55

Ali · Answer 5 · 2012-12-10T18:41:35.910

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

this works for me: android:hardwareAccelerated="false" BODY, HTML {background: transparent} — jayellos, Apr 04 '13 at 07:39

score 16 · Answer 6 · edited Jun 20 '20 at 09:12

16

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");

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 29 '14 at 11:32

lilotop

527
6
12

It's mentioned in the question. But this seems to be a nice resume of what you have to do if you want it to work on all android versions. – jptsetung Jun 30 '14 at 10:10

duggu · Answer 7 · 2013-05-16T04:21:36.727

9

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"));

Or

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.

edited May 16 '13 at 04:21

answered Dec 28 '12 at 09:27

duggu

37,851
12
116
113

I don't recommend you setLayerType to LAYER_TYPE_SOFTWARE. It drastically decreases performance especially when scrolling. – Navarr Jan 27 '14 at 16:53

score 8 · Answer 8 · answered Feb 28 '11 at 19:50

8

Try webView.setBackgroundColor(0);

answered Feb 28 '11 at 19:50

Andrew Podkin

165
1
1

1

There is no difference between webView.setBackgroundColor(0x00FFFFFF); and webView.setBackgroundColor(0x00); Both are supposed to be transparent color. – jptsetung Mar 01 '11 at 08:26

score 7 · Answer 9 · answered Dec 06 '11 at 10:54

7

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

answered Dec 06 '11 at 10:54

Umair

1,206
1
13
28

3

This works on Honeycomb, but unfortunately not on ICS. Damn. But if you use it, it is more easier to specify it in the layout file using the "android:layerType" property as this will also work well on older releases where the tag will simply be ignored. – sven Mar 01 '12 at 21:10
2

What's working even on ICS is to deactivate hardware acceleration for the whole activity using `android:hardwareAccelerated="false"` in the AndroidManifest for the `activity` element. – sven Mar 01 '12 at 22:22
1

There is unnecessarily to create Paint object. `v.setLayerType(LAYER_TYPE_SOFTWARE, null);` also will work. – Sergey Glotov Mar 12 '12 at 12:24

score 6 · Answer 10 · answered Sep 02 '12 at 04:34

6

Use this

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

myWebView.setBackgroundColor(0);

answered Sep 02 '12 at 04:34

Zahid Habib

715
3
12
23

0 (0x00000000) = Color.TRANSPARENT see http://developer.android.com/reference/android/graphics/Color.html#TRANSPARENT – Dan Dar3 Aug 02 '15 at 00:03

score 6 · Answer 11 · answered Nov 01 '12 at 06:00

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

score 5 · Answer 12 · answered Feb 13 '13 at 06:30

5

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.

answered Feb 13 '13 at 06:30

Atul Bhardwaj

6,647
5
45
63

score 3 · Answer 13 · edited Feb 21 '14 at 14:36

3

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

edited Feb 21 '14 at 14:36

kleopatra

51,061
28
99
211

answered Feb 21 '14 at 14:35

Shivendra

1,542
2
22
35

score 3 · Answer 14 · answered Sep 28 '20 at 11:20

3

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

answered Sep 28 '20 at 11:20

Aziz

1,976
20
23

score 2 · Answer 15 · edited Oct 28 '13 at 19:32

2

If webview is scrollable:

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

OR

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

edited Oct 28 '13 at 19:32

krsteeve

1,794
4
19
29

answered Oct 28 '13 at 19:08

Baton

139
1
2

score 2 · Answer 16 · answered Feb 06 '12 at 08:53

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

score 1 · Answer 17 · edited Sep 10 '21 at 12:11

1

Try

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

edited Sep 10 '21 at 12:11

IntelliJ Amiya

74,896
15
165
198

answered Oct 29 '12 at 11:46

raja

2,393
2
22
25

score 0 · Answer 18 · answered Jul 05 '13 at 09:13

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

I tested this on a Galaxy Nexus and flickering remained, unfortunately. — Navarr, Jan 27 '14 at 16:59

score 0 · Answer 19 · answered Nov 03 '14 at 10:17

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

score 0 · Answer 20 · edited Apr 18 '18 at 19:21

0

Try out:

myWebView.setAlpha(0.2f);

edited Apr 18 '18 at 19:21

Paul Roub

36,322
27
84
93

answered Apr 18 '18 at 19:11

ABN

1,024
13
26

score 0 · Answer 21 · answered Oct 19 '18 at 08:09

0

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.

answered Oct 19 '18 at 08:09

Hayk

31
1
3

score 0 · Answer 22 · answered Jan 27 '20 at 18:10

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>

score -2 · Answer 23 · edited Feb 13 '19 at 16:32

-2

myWebView.setAlpha(0);

is the best answer. It works!

edited Feb 13 '19 at 16:32

double-beep

5,031
17
33
41

answered Feb 13 '19 at 04:12

Wooden Ghost

9
1

1

Please explain why as well. – AsthaUndefined Feb 13 '19 at 04:26

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

23 Answers23

The most important thing was not mentioned.

So the full solution would be:

HTML

Activity

Linked