2

I am trying to implement a WebView displaying some additional content on top of my app. It works great, as long as the web app does not have a solid background color/image. And as I do not have control over those extension apps, this is sometimes the case.

The question would be - is there a way to intercept background drawing in Android WebView? My idea is that if I can hook into that, I can replace some rectangles with transparent, so that my app can show from underneath.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Kelevandos
  • 7,024
  • 2
  • 29
  • 46
  • can you make your question a little bit more clear. I mean with some temporary image. Either you want to show web view inside the app like a dialog or what? – Ranjan Apr 29 '20 at 10:06
  • It is pretty much what I described - WebView is a decoration shown on top of the app. Something like a tutorial or hbbtv. It is displating things in context of the native app visible underneath. – Kelevandos Apr 29 '20 at 11:31
  • As I got what you want is just achiveable by making a custom control with a webview or a textview it can be done by a researching day. – VahidHoseini Apr 30 '20 at 17:47

1 Answers1

0

You can try making the web view background transparent, It will nullify HTML's background colour

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

Make sure to call this when the URL page is loaded.

If it does not override your custom CSS/HTML background, then You can use Webview's feature of Javascript injection, In this when a Webview is loaded, You can manipulate its properties like removing a button with a particular id, changing background colour etc.. Check below link for your use case.

https://mobikul.com/android-inject-javascript-into-webview/

https://medium.com/@filipe.batista/inject-javascript-into-webview-2b702a2a029f

https://medium.com/appunite-edu-collection/webview-with-injected-js-script-13eb1e0257c9

Answers for your query in comment box, could not answer due to char limit in commments.

1.1) If you don't want to completely remove the background-> Suppose there is any HTML colour background suppose #FF0000, and you want to make it little transparent, You can fetch the colour, increase transparency of this colour for example (#ABFF0000), set it again to the HTML background.

1.2) If you have an image as background in HTML, and you don't want to completely remove it, then you will have to fetch its URL, download it, process it to make it little transparent, then set it again locally in Webview HTML as background, but this will be too much memory taking, there is one more solution As I have mentioned earlier to make the whole Webview a little transparent, but it will make everything transparent every UI element, like text and etc.

2) Yes this is a trade-off of this approach, we are manipulating already loaded HTML page in the Webview, but considering nowadays, A large number of users have already moved to powerful devices, It will not impact the audience.

akashzincle
  • 1,108
  • 6
  • 15
  • Are you sure this would nullify the html background? It does make the WebView transparent, as in makes the default white background transparent, but if the page has a custom html/css background, it still shows up :( – Kelevandos Apr 28 '20 at 08:47
  • Oh This is indeed much closer to what I need, but there are two issues: 1) I do not want to completely remove the background, as it is important at times, containing an image for example; 2) The liked solution bas a very notoceable delay on mid range devices – Kelevandos Apr 28 '20 at 18:56
  • @Kelevandos updated the answer, could not comment due to char limit in comments section – akashzincle Apr 29 '20 at 07:58
  • I like the point about downloading and modifying the background. It is still not fully a solution I need, but if nothing else comes up, I will accept it for the bounty, as it can be worked further. Thanks! As for the devices comment - this is not really valid in my case, as my app has a specific set of target devices some of which are really, really slow :( – Kelevandos Apr 29 '20 at 11:34
  • @Kelevandos ok, For Webview performance you can enable hardware acceleration, It might help, check this https://stackoverflow.com/a/7528833/3497972 – akashzincle Apr 29 '20 at 16:45