Webview doesn't display text with color

Question

In my app I display some Html content in webview:

String webViewConent = 'this is some <span style="color:#2ecc71">sample</span> string'
webView.loadData(omowienie, "text/html; charset=utf-8", "UTF-8");

However after last app update, which was related with some other thing, for some users webview doesn't work correctly. They see only string which is before span tag. The problem is not related to any specific android version.

No, the html content is created through wysiwyg editor on my website and it doesn't allow font tag... When did you encounter that problem? — mik.ro, Feb 01 '19 at 16:14
I see.. I had the same problem with this string: <body style = \'font-family: Montserrat; text-align: center; line-height: 1.5em\'>You have %1$d seconds left to close the lock using Html.fromHtml function. On some devices was working, on others not — Nicola Gallazzi, Feb 01 '19 at 16:30
@NicolaGallazzi doesn't work with font tag. I had to remove: style="color:#2ecc71" — mik.ro, Feb 02 '19 at 08:14

score 27 · Answer 1 · answered Feb 02 '19 at 10:12

27

Same problem here, I found base64 encoding as a quick fix:

String base64 = android.util.Base64.encodeToString(html.getBytes("UTF-8"), android.util.Base64.DEFAULT);
mWebView.loadData(base64, "text/html; charset=utf-8", "base64");

answered Feb 02 '19 at 10:12

FloFo

271
2
2

it has removed color from my html – mik.ro Feb 06 '19 at 15:25
this worked for me and also kept the colors. Am I right to assume, that the encoding was needed because auf the pound sign? – jteichert Jul 06 '20 at 15:01
it show error on html.getBytes("UTF-8"), not recognize html – dr Chandra Kant Sharma Aug 02 '20 at 07:18
1

Thanks for this! This worked for me, but the mention of encoding also led me to [this answer](https://stackoverflow.com/a/9001122/906), which provides [another work-around](https://stackoverflow.com/a/64455109/906) that I think is a little simpler. – David Tchepak Oct 21 '20 at 00:44

score 7 · Answer 2 · answered Aug 02 '20 at 10:26

7

I had the same issue today. As a simple workaround I replaced hex colors in CSS by RGB equivalents.

Before

<span style="color: #3050c0">Some text</span>

After

<span style="color: rgb(48, 80, 192)">Some text</span>

answered Aug 02 '20 at 10:26

Digedag

101
1
2

That specifically means the number sign (U+0023) is the issue, right? Is it a blatant parser error? I wonder if it’s documented or intentional. – dakab Oct 20 '21 at 08:30

score 3 · Answer 3 · answered Oct 21 '20 at 00:42

3

I found the approach in this answer on WebView encoding seems to fix this issue. Instead of using loadData, try loadDataWithBaseURL:

webview.loadDataWithBaseURL(null, html, "text/html; charset=utf-8", "utf8", null)

answered Oct 21 '20 at 00:42

David Tchepak

9,826
2
56
68

jancooth · Answer 4 · 2019-02-01T20:48:36.500

0

I have same problem. My app does not display text after span tag. Some devices works fine but some devices does not work. Upvoted!

<p><span style="color:#0000CD"><strong>Materials:</strong></span></p>

As a result of my research and experimentation, I have disabled the Android System Webview application on my device. As a result of this process, my application worked correctly. However, to me, this cannot be a solution. What are your ideas?

edited Feb 01 '19 at 20:48

answered Feb 01 '19 at 19:47

jancooth

555
1
10
25

when did you encounter the problem for the first time ? In my case it was 2 days ago – mik.ro Feb 01 '19 at 19:49
@mik.ro yes, This have been started 2 days ago, and still goes on. I am looking for solve this problem but i can not find a way. I hope we solve this. – jancooth Feb 01 '19 at 19:50
I think, this problem occured Android System Webview. I have two devices. I checked their android system webview application version and i saw that their versions different. And also, Google has published new version on 29 January 2019. But i do not know how we can solve this. – jancooth Feb 01 '19 at 20:07
In my other app the webview also doesn't work in some cases. I'm pretty sure it is connected to the latest webview update – mik.ro Feb 01 '19 at 22:47

Angelo Lucena · Answer 5 · 2019-02-08T03:02:43.940

I think the problem is the new update in Android Webview System. The old version works for me.

My alternative solution here is to uninstall Android Webview System in your phone so that you can have the default version(this solution is not ideal if your app is uploaded in Google Playstore and have a lot of users)

The second option is you can delete your color and background color codes in html for the meantime and it will work(I think it is Android Webview System's bug and we just need to wait until they fix their issues)

score 0 · Answer 6 · answered Nov 13 '19 at 12:27

I have same problem. It may be the Android WebView System's bug but the solution is using font tag to color the texts.

String webViewConent = "this is some <font style="color:green">sample</font> string";

Note : This code is not working for Hex format colors

score 0 · Answer 7 · answered Sep 16 '20 at 18:24

I din't find a fix but I was able to do a work around changing the string with the original HTML. This might help someone else, AS LONG AS YOU ALREADY KNOW THE COLOURS YOUR ARE GOING TO DISPLAY:

String newString = originalString.replaceAll("color:#888888", "color:gray");

Webview doesn't display text with color

7 Answers7

Linked