I have a Webview in which i load HTML data (and also using css) using the following code:
final String mime = "text/html";
final String encoding = "utf-8";
final String htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />"
+ aboutDescriptions[index];
wv.loadDataWithBaseURL("file:///android_asset/", htmlData, mime,
encoding, null);
in the HTML i load images like this:
<img src=\"file:///android_res/drawable/myimage.jpg\"/>
in my css i have the following defined for the "img" tag:
img {
max-width: 100%;
max-height: 100%;
}
On my (real) 2.3.3 Android Phone and my Google Nexus 7 Tablet everything is working as expected (the HTML renders fine using the css and the images are displayed).
However on a real Galaxy Nexus phone and on many emulated devices the images are not shown at all. What am i doing wrong? I have experienced quit a few bugs allready with WebView, hopefully this is one that can be fixed? (perhaps a CSS tweak?)
managed to fix this by changing my css like this:
img {
width: 100%;
height: auto;
}
Related
An application I developed uses locally stored HTML to be shown in a webview.
It has always worked without any issue, but on Android 7 the HTML source is displayed instead of formatting the HTML.
The code for loading the HTML is as simple as this
var webView = view.FindViewById<WebView>(Resource.Id.webview);
webView.LoadUrl("file:///android_res/raw/info.html");
The content of the HTML is also very straightforward.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name = "viewport" content = "width=device-width">
<title></title>
<style>
body {
font-family: "Helvetica", sans-serif;
font-size: .85em;
padding-top: 25px;
}
body a {
color: #697782;
font-weight: bold;
}
h1 {
font-size: 1.15em;
text-transform: uppercase;
color: #24292f;
margin: 8px 0 8px;
padding: 0px;
}
strong {
color: #697782;
font-weight: bold;
}
p {
color: #2b2c30;
margin: 0 0 8px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>
I'm not using Webview.LoadData, because reading the HTML will require to add it as Asset and not Resource, which I'm not going to do. (localization)
Anyone any idea's how to tackle this?
Oké. I found a solution after a lot of trial/error.
A lot of online solutions advice to move the files to the Assets folder and read the file content from there because it wasn't clear for a lot on how to read text file info from RAW folders. But I don't want to do this because the Assets folder isn't Localization-aware.
The files with HTML I want to show are Localized
/raw/info.html
/raw-fr/info.html
/raw-nl/info.html
In my previous solution I called the content with
webView.LoadUrl("file:///android_res/raw/info.html");
Which worked perfectly until Android 7 decided to show the source HTML in the browser. The correct file for the current OS language would be selected in this way. No need to write any Localization handling yourself.
The working solution
Consists of loading the string data from the file and feed it to the WebView via WebView.LoadData().
//get the Resource ID
var dd = Resource.Raw.info;
//read the file content from RAW folder
var content = LoadFile(dd);
//feed it to the webclient
// important: UTF-8 capitalized!
webView.LoadData(content, "text/html; charset=UTF-8", "UTF-8");
The LoadFile looks like this
public string LoadFile(int resourceId)
{
//get the file as a stream
var inputStream = Resources.OpenRawResource(resourceId);
var html = string.Empty;
using (StreamReader sr = new StreamReader(inputStream))
{
html = sr.ReadToEnd();
}
return html;
}
I am loading CSS from Asset folder. It’s working fine except font loading. I am getting following error while leading font.
"Failed to decode downloaded font: file:///android_asset/css/seriff.ttf"
Here my code,
#font-face {
font-family: 'MyFont';
src: url('seriff.ttf');
}
body {
font-family: 'MyFont';
background-color: #FFBB00;
}
content = "<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\"><body>" + "Testing something" + "</body></html>";
newsView.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "utf-8", null);
Other CSS property is working fine. Please help if anyone have idea to fix this.
Thanks.
use relative path to the font
src: url('../fonts/seriff.ttf');
and to the css
href=\"./css/style.css\"
It is likely that your ttf font is not compatible with the Android WebView. To confirm this replace your seriff.ttf file with another ttf file and see if it is displayed correctly.
You can use a ttf converter to read in the font then write it back out it should fix the issue. A site such as freefontconverter.com will help with this task.
I'm trying to put a little embedded youtube video in my app. The user needs to be able to fullscreen the video, but the webview's youtube player has no fullscreen button! Whhhaa…? I've searched around and found no solution. BTW, using the Google YouTube API is NOT an option. I have a workaround (video thumbnail which opens a fullscreen WebView when clicked), but it would be a lot simpler/more elegant if the webview would handle this for me.
Here's how I'm loading the youtube video
String htmlString = "<html><body style='margin:0px auto; padding:0px; width: 100%;'><script type='text/javascript' src='http://m.youtube.com/iframe_api'></script><div style=\"padding-bottom: 56.25%;position: relative;\"><iframe allowfullscreen='allowfullscreen' id='playerId' type='text/html' style=\"width: 100%; height: 100%; position: absolute;\" width=\"560\" height=\"315\" src='http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&rel=0&playsinline=0&autoplay=0' frameborder='0'></div></body></html>";
if (youtubeWebView == null){
youtubeWebView = ButterKnife.findById(view, R.id.youtubeWebview);
}
youtubeWebView.getSettings().setJavaScriptEnabled(true);
youtubeWebView.getSettings().setLoadWithOverviewMode(true);
youtubeWebView.loadData(htmlString, "text/html", null);
I've seen this question a couple of times before but with no answers.
I have a Android app with a WebView. I load a HTML from a web service. Inside this HTML there are text, links and images.
Text and links are working but despite almost all images are well displayed there are some of them that show a blue quare instead of the image.
I've put a trace in my code:
Log.d("", "_htmlfrombackend="+_htmlfrombackend);
webView.loadDataWithBaseURL("", _htmlfrombackend, "text/html", "UTF-8", "");
And this is the output:
_htmlfrombackend=<p>text text text... <img width="200" height="300" alt="" src="http://www.mysamplesite.com/mysampleimage.jpeg" style="width: 200px; height: 300px;" />...text text</p>
That image is shown as a blue square. This is a screenshot:
So now I tried this:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my webview shows this:
The first image is displayed well, the second one displays a blue square yet but they have the same img tag!
I've tried wrapping the html code between html and body tags but the results are the same.
This happens in Android 4.0, 4.4 and 5.0.
Anyone could have any idea of why my hardcoded image is shown correctly but the one from the backend is not?
Kind regards!
Edited to be more clear.
Edit: I've added images.
New EDIT: I've keep searching for a solution. I've had a deep reading of the HTML I receive and it's correctly formed, not malformed tags, just one strange thing, each img tag is inside a h2 tag, I mean:
<h2><img .../></h2>
But I tried to add these tags in my example with no difference:
String _newHtml = "<h2><img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" /></h2>"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
My image is still displayed while the image received don't.
New EDIT: I'm still looking for a solution, but I have a new clue. I've tried to show a wrong image:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://asdafsqwe\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my screen shows this:
As you can see, there is a square with a broken-image icon inside. This makes me think that the blue squares don't mean that there is a problem getting the image, there should be any other kind of problem.
In the HTML code img tag try src=new File( url ).toURI() for local files.
I'm currently developing an android web browser. There has some pages used other character like Uighur character, and they display unnormally, so I used the following code to resolved this problem.
String htmlStr = getHTML(url, "UTF-8");//get the html content from the url
String tmp="<link href=\"file:///android_asset/myfont.css\" rel=\"stylesheet\" type=\"text/css\" />";
if(htmlStr.contains("</head>")){
htmlStr = htmlStr.replace("</head>", tmp);//add my css into the page
}
mCurrentWebView.loadDataWithBaseURL(url, htmlStr,"text/html", "utf-8", "");//display the page content
This is myfont.css：
#font-face { font-family: MyCustomFont; src: url("fonts/ALPEKRAN.TTF") }
body {font-family: MyCustomFont, Verdana, Arial, sans-serif; text-align:right;}
The ALPEKRAN.TTF font is under the folder of assets/fonts/.
But there have another problem like that page css losed.
Please, give me some suggession.
May you need to specify the full font url, try:
src: url("file:///android_asset/fonts/ALPEKRAN.TTF")