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

User · Answer

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.

User · Answer

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    lt link rel  stylesheet  type  text css  href  style css    gt

User · Answer

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     lt link rel  stylesheet  type  text css  href  style css    gt  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

User · Answer

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     lt  DOCTYPE html gt  lt html gt  lt head gt  lt meta charset   UTF-8   gt  lt link rel   stylesheet   href   style css   gt  lt  head gt                             lt body gt  lt div class   running   gt I am a text rendered with INDIGO lt  div gt  lt  body gt  lt  html gt       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

User · Answer

You could use WebView loadDataWithBaseURL htmlData    quot  lt link rel   quot stylesheet  quot  type   quot text css  quot  href   quot style css  quot    gt  quot    htmlData     lets assume we have  assets style css file webView loadDataWithBaseURL  quot file    android asset  quot   htmlData   quot text html quot    quot UTF-8 quot   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

User · Answer

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   lt HTML gt  lt HEAD gt  lt LINK href    http   yourStyleshitDomain com css mbl-view-content css   type   text css   rel   stylesheet    gt  lt  HEAD gt  lt body gt         sb append currentHomeContent getDescription         sb append   lt  body gt  lt  HTML gt         currentWebView loadDataWithBaseURL  file    android asset    sb toString     text html    utf-8   null     Here  Use StringBuilder to append String for Style   sb append   lt HTML gt  lt HEAD gt  lt LINK href    http   yourStyleshitDomain com css mbl-view-content css   type   text css   rel   stylesheet    gt  lt  HEAD gt  lt body gt     sb append currentHomeContent getDescription

User · Answer

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   lt link rel  stylesheet  type  text css  href  main css    gt

[android] Rendering HTML in a WebView with custom CSS

Examples related to android

Examples related to html

Examples related to css

Examples related to webview