WebView, add local .CSS file to an HTML page?

Question

In android I'm using WebView to display a part of a webpage which I fetched from the internet using HttpClient from Apache. To only have the part I want from the html, I use Jsoup.

String htmlString = EntityUtils.toString(entity4); // full html as a string                                 
Document htmlDoc = Jsoup.parse(htmlString); // .. as a Jsoup Document
Elements tables = htmlDoc.getElementsByTag("table"); //important part

Now I can just load tables.toString() in the WebView and it displays. Now I want to link a CSS file which I store inside my assets folder with this page. I know I can have something like

<LINK href="styles/file.css" type="text/css" rel="stylesheet">

In my html, but how do I link it so that it uses the one I've stored locally?

---EDIT---
I've now changed to this:

StringBuilder sb = new StringBuilder();
    sb.append("<HTML><HEAD><LINK href=\"file:///android_asset/htmlstyles_default.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
    sb.append(tables.toString());
    sb.append("</body></HTML>");
    return sb.toString();

Somehow I do not get the styles applied to the page. Is it the location path I used that is wrong?

If you make a request to get a webpage, css file is not downloaded, you must specify your own by changing the location of the table style — user849998
– user849998, Commented Sep 28, 2011 at 15:17
So now you must store this file in your application(file, variable, ..) and change the path of the link.href using same jsoup — user849998
– user849998, Commented Sep 28, 2011 at 15:37

Community · Accepted Answer · 2017-05-23 12:02:05Z

76

Seva Alekseyev is right, you should store CSS files in assets folder, but referring by file:///android_asset/filename.css URL doesn't working for me.

There is another solution: put CSS in assets folder, do your manipulation with HTML, but refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:

webView.loadDataWithBaseURL("file:///android_asset/", htmlString, "text/html", "utf-8", null);

E.g. you have styles.css file, put it to assets folder, create HTML and load it:

StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\"styles.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(tables.toString());
sb.append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

P.S. I've come to this solution thanks to Peter Knego's answer.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Oct 12, 2011 at 7:33

Sergei Glotov

20.4k11 gold badges87 silver badges100 bronze badges

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

1 Comment

Paradox Over a year ago

Is it possible to do this with an html file in the assets folder? So far, it looks like it's just using the data field for the html file and I don't have it stored in a variable.

Seva Alekseyev · Accepted Answer · 2011-09-28 15:03:41Z

7

You cannot store arbitrary files in res - just the specific resource types (drawables, layouts, etc.). The CSS should go to the assets folder instead. Then you can refer to it by the following URL: file:///android_asset/MyStyle.css

answered Sep 28, 2011 at 15:03

Seva Alekseyev

61.8k25 gold badges173 silver badges297 bronze badges

2 Comments

Seva Alekseyev Over a year ago

Your HTML is grossly malformed - you need <html><head> in the beginning, and also </body></html> at the end, not another <body>.

marsbear Over a year ago

You can store arbitrary files in res/raw.

Mori · Accepted Answer · 2023-12-16 16:53:34Z

There are several steps: Android Studio

1- Make sure copy the HTML and CSS file in Asset folder

2- Add link to html file like this:

<link type="text/css" rel="stylesheet" href="file:///android_asset/myStyle.css">

3- As usual manage the CSS file table { border-collapse: collapse; width: 100%; }

    th, td {
        text-align: right;
        padding: 8px;
        font-family: "my_font";
    }

    tr:nth-child(even) {
        background-color: #BCA37F;

    }
    tr:nth-child(odd) {
        background-color: #EAD7BB;

    }

4- Even it is possible to set a Font for each html file :

 <style>
        @font-face {font-family: 'my_font';src: url('file:///android_asset/nazanin.ttf');}


    </style>

5- Finally , for Webview Just use webview.loadUrl

wvInfo.loadUrl("file:///android_asset/htmlFile.html")

senf78 · Accepted Answer · 2014-04-18 08:08:17Z

-1

On a related note, if you're not storing the file in the assets folder and want to use relative paths, Webview on Android sometimes requires dot-slash before relative paths.

<LINK href="./styles/file.css" type="text/css" rel="stylesheet">

See this post

answered Apr 18, 2014 at 8:08

senf78

1,5852 gold badges9 silver badges4 bronze badges

Collectives™ on Stack Overflow

WebView, add local .CSS file to an HTML page?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related