April 18, 2011

How to change foreground & background colors in a webview for Android.

At times we need to change the font or background color of the webview to make it more readable or to conform to a design of your app. This post will show how simple it can be to almost always achieve the result. The latter is more simple as webview provides an API :

setBackgroundColor (int color)

What one must note is if the HTML contains a value for the background it will override the color we set. The same is true for the foreground color too.

For the foreground color we make use of CSS to set the color and add it to the content we want to display in a div element wrapping the html we need to display. Here is the sample code

private final String htmlbegin = "
<div style="\&quot;color: #FFFFFF;">";
private final String htmlend = "</div>
";
private final String htmlBody = "
 
Summary
 
"
    + "
 
Strong text Somemore text"
    + "and the final line
 
";
WebView body;
 
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 
    body = (WebView) findViewById(R.id.message_body);
    body.setBackgroundColor();
 
    // body.setDef
    body.loadDataWithBaseURL("", htmlbegin + htmlBody + htmlend,
        "text/html", "utf-8", "");
}

As I stated before any css inside the html will override our css settings.