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?
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.
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
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
Related
so i'm trying to load some HTML from my sqlite database into a webview.
This works splendid as the html is rendered beautifully but here comes the problem. The local file added in the html is not being load. I added it to the assets folder in this hierarchy: assets/folder1/folder2/placeholder.png but i get a Not allowed to load local resource: error. How can i get past this please.
Please note that the data is being populated from the db.
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setAllowFileAccess(true);
webView.loadData(data, "text/html", "UTF-8");
That's the code for the web view above.
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><h2 style="color:red;">Hello Chief</h2><p>This is just a demo HTML content rendered beautifully</p><br><img src="file:///android_asset/folder1/folder2/placeholder.png"></body></html>
That's code above is for the data coming from the sqlite database.
My Assests folder looks something like this
-assets
- folder1
- folder2
-file
Thanks
There is one method in webview to load html file with base url
webview.loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)
In baseUrl give it as
file:///android_asset/
Or else parse the html document with Jsoup and replace the src of required tags using Jsoup Parser.
I know that for security reasons HTML standard doesn't allow anymore the loading of a local resource as image in a document.
Anyway I found that I have to copy the html files in the android-asset project folder if I want to load local pages in a WebView.
What if I want to use an hybrid approach?
I would to get a HTML document from an uri, replace the value of the src attribute of a img HTML tag with a local path and then load the code in a WebView.
Having a html document like this:
<hmtl>
<head>
</head>
<body>
<img src="http://URL-SITE/img/x.jpg">
</body>
</hmtl>
How can i replace http://URL-SITE/img with the path of a local image resource
before the page is loaded by a WebView?
I already tried putting the local image in the folder android-asset and changing the src value in file:///android_asset/img/x.jpg but it didn't work.
Ok guys, thanks for the comments.
The problem was that I used the command loadData
String html ="<html> <head></head> "
+" <body> <img src=\"file:///android_asset/img/x.jpg\"> "
+"</body> </html>";
myWebView.loadData(html, "text/html; charset=UTF-8", null);
instead of
myWebView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);
I am working on an application in Android, where I am using a local html file which includes css files, but It won't work and I have no Idea why.
The Java code is like this:
view.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "UTF-8", null);
The HTML code is like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/main.css" rel="stylesheet">
<style>
</style>
The path is correct, Eclipse WebBrowser shows the html Page correct but if I test it on my Device it's without styles.
The Logcat throws the Error "Unknown Chromium Error: -6"
Thanks a lot in advance
you cannot refer to this path inside a webview. you probably need to store your css file in assets folder and refer to it dynamically:
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);
from: WebView, add local .CSS file to an HTML page?
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
In your case the error -6 means FILE_NOT_FOUND, which probably due to access permission issue on your device.
You may need to put the CSS file under the same folder of your HTML files. For security consideration, webkit engine will apply same-domain policy when accessing local files. i.e. accessing sub-resource files (such as CSS, JS, images) that are not in the same folder of your main HTML file is not allowed.
I'm trying to diplay a local image in my webview :
String data = "<body>" + "<img src=\"file:///android_asset/large_image.png\"/></body>";
webview.loadData(data, "text/html", "UTF-8");
This code doesn't display anything, instead of :
webview.loadUrl("file:///android_asset/large_image.jpg");
This one works, but I need to have complex web page, not just a picture.
Any ideas ?
Load Html file in Webview and put your image in asset folder and read that image file using Html.
<html>
<table>
<tr>
<td>
<img src="abc.gif" width="50px" alt="Hello">
</td>
</tr>
</table>
</html>
Now Load that Html file in Webview
webview.loadUrl("file:///android_asset/abc.html");
You can also try
String data = "<body>" + "<img src=\"large_image.png\"/></body>";
webView.loadDataWithBaseURL("file:///android_asset/",data , "text/html", "utf-8",null);
One convenient way (often forgotten) is to use base64 embedded images in HTML content. This will also work on mobile Webkit browsers (IOS, Android..).
Point of using this method is that you can embed images on HTML content, instead of fighting with image links from webview to restricted filesystem.
<img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
xxxxx = base64 encoded string of images bytes
If you want to provide (base64 embedded) image data from filesystem, you can for example:
1) In Android use ContentProvider - which will provide base64 formatted image strings.
<img src="content://.............."/>
2) Or you can preprocess HTML with JSOUP or similar DOM parser (before setting it to webview) and adjust image src with properly base64 encoded image.
Disadvantages of this method is overhead included in converting image to base64 string and of course in proding larger HTML data to webview.
Use this method.
mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");
folder.getAbsolutePath() can be "file:///android_asset" or just "/"
I think there is a \ missing in your code
String data = "<body>" + "<img src=\\"file:///android_asset/large_image.png\"/></body>";
The image will not load unless you have:
webSettings.setAllowFileAccessFromFileURLs(true);
If you are using a html file, it should be in a folder called "assets" in /app/src/main. If you don't have that folder then make it. Then load the html file with:
myWebView.loadUrl("file:///android_asset/test.html");
If you put the image in the same folder as the html file, then in the html file you can just do a normal:
<img src='myimage.jpg' />
webView.loadDataWithBaseURL("file:///android_asset/", sourse, "text/html", "UTF-8", null);
the best approach for me was to create my .html file with all the texts and images in MS word, and save the file as an .html file and copying both .html file and the corresponding attachments folder into assets folder and giving the address of .html file in asset folder to webview.loadUrl()...
Here is what you need to Do...
WebView webview = (WebView) findViewById(R.id.webView1);
webview.loadUrl("file:///android_asset/learning1/learning1.htm");
Zain's solution worked for me. I forgot to add my folder www having HTML files and other subfolders of css and images etc.
webView.loadDataWithBaseURL("file:///android_asset/www/",data , "text/html", "utf-8",null);
..
The most simple and straightforward way is to create a html file with a html editor like kompozer or whatever you like.
Put your html file in the assets folder and call webView.loadUrl(filename). The assets folder should also contain all pictures which you are referencing in your html files.
Correct in advance in the html file the path to your images in a way, that you only file down the pure filename. The file name you pass to loadUrl must be prefixed with file:///android_asset/.
If the picture or file does not load, check the filenames for blanks, hyphen and other weird stuff and change the filenames.
I Know the Question is answered correctly, but I am going to implement in an effective way.
Step-1 make an HTML file in asset folder
ex:-imageLaod.html
Note: Here In HTML file we have implemented FullScreen Image by giving style="width:100%"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Load Image</title>
<style type="text/css">
h3{
color:blue;
}
</style>
</head>
<body>
<h3>This image loaded from app asset folder.</h3>
<img src="yourimage.png" style="width:100%" alt="companylogo"/>
</body>
</html>
Step-2 put your image in the asset folder. (ex:yourimage.png)
Step-3 put below code in java file.
String folderPath = "file:android_asset/";
String fileName = "loadImage.html";
String file = folderPath + fileName;
WebView webView = findViewById(R.id.webview)
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.loadUrl(file);
and it is done. you can see the fullscreen image with zoom in-zoom out feature of WebView.
Hope it helps.
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.
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.
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);
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" />
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" />
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", "");
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.
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());