Rendering HTML in a WebView with custom CSS

Question

My app is using JSoup to download the HTML of a message board page (let's say in this case it is a page containing the posts of a given thread). I'd like to take this HTML, strip out unwanted items, and apply custom CSS to style it to be 'mobile' in a WebView.

Should I inject the styles into the HTML as I process it (since I will be processing it anyway) or is there a good way to add a CSS file to my app's assets and simply refer to it. I figure the latter would be ideal, but unsure how to go about it.

I see hints in WebView's loadDataWithBaseURL that you can refer to local assets, but not sure how to utilize it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

137

You could use WebView.loadDataWithBaseURL

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);

And only after that WebView will be able to find and use css-files from the assets directory.

ps And, yes, if you load your html-file form the assets folder, you don't need to specify a base url.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 3, 2011 at 17:17

unorsk

9,43910 gold badges40 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Matt Gibson Over a year ago

Thanks! That was just what I needed. (Incidentally, you can use single quotes for the attributes in the inline HTML instead of double-quotes; that way you won't need to backslash them. Always looks a bit tidier to me...)

fortboise Over a year ago

Nice. I would put the PS as the direct answer: If you load your html file with WebView.loadUrl("file:///android_asset/fname.html"); you can simply use relative urls within it.

Yasir Over a year ago

How can we use the loadDataWithBaseURL() if the stylesheet is in file storage? can we use 'data/data/etc/"?

Sakiboy Over a year ago

@Yasir, it works even if your style.css file is saved away in the the android file storage. You just need to make sure that baseUrl is perfect and matches the css files relative path.

Sebastian Over a year ago

If your files are the raw folder and not in assets (which gives you Android Localization), the base URL would be "file:///android_res/raw/"

|

Vadim Kotov · Accepted Answer · 2018-12-29 19:52:10Z

37

I assume that your style-sheet "style.css" is already located in the assets-folder

load the web-page with jsoup:

doc = Jsoup.connect("http://....").get();

remove links to external style-sheets:

// remove links to external style-sheets
doc.head().getElementsByTag("link").remove();

set link to local style-sheet:

// set link to local stylesheet
// <link rel="stylesheet" type="text/css" href="style.css" />
doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css");

make string from jsoup-doc/web-page:
```
String htmldata = doc.outerHtml();
```

display web-page in webview:

WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);

edited Dec 29, 2018 at 19:52

Vadim Kotov

8,2848 gold badges51 silver badges63 bronze badges

answered May 1, 2012 at 12:52

Robert

3713 silver badges2 bronze badges

2 Comments

Ata Iravani Over a year ago

nice practical solution, do not forget to not to use that in UI (Main) thread.

Mahdi Over a year ago

I want to access style.css from another module. If this is impossible, is there another way to load style as string then pass to library module class?

longhairedsi · Accepted Answer · 2011-03-10 16:34:55Z

22

here is the solution

Put your html and css in your /assets/ folder, then load the html file like so:

    WebView wv = new WebView(this);

    wv.loadUrl("file:///android_asset/yourHtml.html");

then in your html you can reference your css in the usual way

<link rel="stylesheet" type="text/css" href="main.css" />

answered Mar 10, 2011 at 16:34

longhairedsi

3,1362 gold badges29 silver badges28 bronze badges

Comments

Chadwick · Accepted Answer · 2011-11-30 15:20:46Z

9

It's as simple as is:

WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/some.html");

And your some.html needs to contain something like:

<link rel="stylesheet" type="text/css" href="style.css" />

edited Nov 30, 2011 at 15:20

Chadwick

12.7k7 gold badges52 silver badges66 bronze badges

answered Nov 30, 2011 at 15:18

egore911

4483 silver badges9 bronze badges

Comments

lejonl · Accepted Answer · 2015-06-28 19:12:00Z

2

If you have your CSS in the internal file storage you can use

//Get a reference to your webview
WebView web = (WebView)findViewById(R.id.webby);

// Prepare some html, it is formated with css loaded from the file style.css
String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
                      + "<body><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";

//get and format the path pointing to the internal storage
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";

//load the html with the baseURL, all files relative to the baseURL will be found 
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");

answered Jun 28, 2015 at 19:12

lejonl

1,48315 silver badges20 bronze badges

2 Comments

JorgeAmVF Over a year ago

The example of webContent here made me to solve my issue. Thanks!

lejonl Over a year ago

Glad it helped @JorgeAmVF!

Bill the Lizard · Accepted Answer · 2011-03-25 16:44:06Z

1

Is it possible to have all the content rendered in-page, in a given div? You could then reset the css based on the id, and work on from there.

Say you give your div id="ocon"

In your css, have a definition like:

#ocon *{background:none;padding:0;etc,etc,}

and you can set values to clear all css from applying to the content. After that, you can just use

#ocon ul{}

or whatever, further down the stylesheet, to apply new styles to the content.

edited Mar 25, 2011 at 16:44

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered Feb 9, 2011 at 22:35

daveyfaherty

4,6232 gold badges29 silver badges42 bronze badges

Comments

Nimesh Patel · Accepted Answer · 2020-02-11 06:23:20Z

You can Use Online Css link To set Style over existing content.

For That you have to load data in webview and enable JavaScript Support.

See Below Code:

   WebSettings webSettings=web_desc.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDefaultTextEncodingName("utf-8");
    webSettings.setTextZoom(55);
    StringBuilder sb = new StringBuilder();
    sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
    sb.append(currentHomeContent.getDescription());
    sb.append("</body></HTML>");
    currentWebView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

Here Use StringBuilder to append String for Style.

sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());

Collectives™ on Stack Overflow

Rendering HTML in a WebView with custom CSS

7 Answers 7

9 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

9 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related