Support for transparent background

[sinh-png]

webview with transparent background can be very useful to overlay web contents (like a chatbox) on top of game contents.

[britzl]

@sinh-png good idea! Do you know what is required to make this happen for android.webkit.WebView and WKWebView? Perhaps you can do some research and either provide a PR or share your findings here?

[sinh-png]

It seems:

• WKWebView: we need to expose isOpaque, backgroundColor, scrollView along with scrollView.backgroundColor. Maybe some more components like scrollView if they also need to have their background made transparent.
• android.webkit.WebView: we need to expose setBackgroundColor. setLayerType may also be needed to disable hardware acceleration on some very old versions. I don't know if there are any components like scrollView for WKWebView which also need to have their background made transparent.

I think as a start it's good enough to only give the option to make webview background transparent, ignoring its components like the scrollView. Exposing those fields themselves will give developers more control but I think adding a simple a method to toggle transparent background would be great too.

I will try making a pull request. Thank you @britzl for the fast response!

[britzl]

I think as a start it's good enough to only give the option to make webview background transparent

I agree. This is the easiest solution and it is cross-platform. Exposing underlying and platform specific config values will make the extension harder to use!

[britzl]

I will try making a pull request. Thank you @britzl for the fast response!

Cool! Don't hesitate to ask questions and request help. We'd be happy to support you in the process!

[sinh-png]

I didn't have any success but I hope some of the info below can be of any use. :(

In WebViewJNI.java, on webview, I tried using setBackgroundColor with Color.TRANSPARENT, Color.argb(0, 255, 255, 255), argb(1, 255, 255, 255), argb(0), along with setBackground(null), with and without setLayerType(View.LAYER_TYPE_SOFTWARE, null) (those are everything I found on Stack) and got an opaque black background in all of the cases. So I tried applying the above to layout and got the same result. I then tried setAlpha with a low value on both of those and they do become transparent but there is a black background underneath them, so we need to hide it but I couldn't figure out how.

I have zero experience with Objective-C & developing for iOS so I'm not optimistic but I will try looking into WKWebView sometimes later.

Maybe we could expose setting background color as both the Android WebView & WKWebView have this, add in extra logics to set isOpaque to false for WKWebView when color is transparent, I think. It seems disabling hardware acceleration is only needed for some very old versions of Android and this doesn't seem to be a thing with WKWebView so we probably can ignore that. I found this which said a workaround to not have to use software mode on some of those old Android versions is by using very very low alpha. So I think a set_background_color method for the extension would be great, it can be inputted with null to apply the equivalent of Color.TRANSPARENT & UIColor.clear, I would like to contribute more on making this happen but I need to find a way first.

I accidentally pressed the close button.

[britzl]

Thank you for the research @sinh-png !

[baochungit]

In WebViewJNI.java, on webview, I tried using setBackgroundColor with Color.TRANSPARENT, Color.argb(0, 255, 255, 255), argb(1, 255, 255, 255), argb(0), along with setBackground(null), with and without setLayerType(View.LAYER_TYPE_SOFTWARE, null) (those are everything I found on Stack) and got an opaque black background in all of the cases. So I tried applying the above to layout and got the same result. I then tried setAlpha with a low value on both of those and they do become transparent but there is a black background underneath them, so we need to hide it but I couldn't figure out how.

You are just one step behind success.
Adding info.windowParams.format = PixelFormat.TRANSLUCENT; would remove the black background underneath.

For iOS, we need someone to investigate.