Menu
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?
205
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. In the above code, we have taken web view to show html content.
Loading html file with custom external css (Caching style sheet) included inside webview. External css are used to control and maintain html webpages from outside source with single definition so web application developer will change into one single css ( Caching style sheet ) file and it will automatically change the whole html page settings.
Basically load local web pages such as HTML, CSS, JavaScript from assets folder of flutter project. So to acheive this we are going to make use of flutter package called ‘ webview_flutter_plus ‘. 1. Loading Website url in flutter app webview
Android WebView gives us the facility to load static html pages inside assets folder and you can also add css into that web page so it will load your html page just like a computer web browser.
To link your CSS to your HTML, you have to use the link tag with some relevant attributes. The link tag is a self-closing tag you should put at the head section of your HTML. <link rel="stylesheet" type="text/css" href="styles.css" /> Place the link tag at the head section of your HTML as shown below:
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.
149
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
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
