I am programmatically setting the content of a WebView. I'd like to add some styling around the content, such as padding and font-size, but, with what I have, the styles aren't recognized:
WebView mWebView = (WebView)browserView.findViewById(R.id.webview);
String content = GetContent();
StringBuilder sbContent = new StringBuilder();
sbContent.append("<!doctype html>");
sbContent.append("<body style=\"padding:10em;font-size:12em;\">");
sbContent.append(content);
sbContent.append("</body>");
sbContent.append("</html>");
mWebView.loadData(content.toString(), "text/html", "utf-8");
First, try using valid HTML. For example, you have </html> with no <html>.
Second, the content in question may override your styling. You would need to look at the combined result to see whether or not this will work.
Related
I am trying to understand how I can get my WebView to "Linkify" the email addresses. I want the email address to generate a hyperlink with mailto tag. All the browsers seems to be able to do this automatically. I am trying the following but I still do no get the links to show in the WebView UI.
HtmlString = "<html><head></head><body><label>Email:</label><span>xxx.yyy#example.com</span></body></html>"
SpannableString sp = new SpannableString(HtmlString);
Linkify.AddLinks(sp, MatchOptions.EmailAddresses);
string linkifiedContent = sp.ToString();
WebView.LoadDataWithBaseURL(BaseURL, linkifiedContent, MimeType, null, null);
Linkify is mostly used with TextView. It is used to create clickable links inside TextView.
In your case, you are already making use of WebView.
Hence, you can just add the email address inside <a> tags:
var HtmlString = "<html><head></head><body><label>Email:</label><span><a href='mailto:xxx.yyy#example.com'>xxx.yyy#example.com<a/></span></body></html>";
webView.LoadData(HtmlString, "text/html", "UTF-8");
This should load your Html content perfectly.
Happy coding!
I have pictures/movies in my webview, and i have a problem with the resize.
I have a CSS for my webview in which i set
img{width:100%;}
But how to set the just height ? Because currently I have picture which take the half of the screen.
My other problem is i have
in my content, how can I delete it ?
To modify the styling of the HTML you could load a custom css like this:
final String customCssLink = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">";
webView.loadDataWithBaseURL("file:///android_asset/", customCssLink + html, "text/html", "UTF-8", null);
And you can remove all of the from the HTML like this:
String.replace(" ", "");
But with both those things you have to be very careful. Modifying HTML is just like HTML parsing a big source of bugs and rather error prone. If at all possible I would advice against doing stuff like this, but if you have no other choice try to at least be as careful as possible.
So in Android I wanted to justify the text so I decided to use the Webview.It works fine but the only issue I have is that the background of my app is not white. So whenever I see the text, it always has a white background. So can I add a body tag to enable it to change the background color?
String text = "<html><body style=\"text-align:justify\"> %s </body> </Html> ";
// I want to include a body tag above which will make the background this color = #e6e6e6
String data = "My Text";
WebView webView = (WebView) findViewById(R.id.WebView);
webView.loadData(String.format(text, data), "text/html", "utf-8");
Take a look at the following link.
Android TextView Justify Text
It explains the justify rules in android. How to do it in webview and it also has a support library you could use to do native.
Try
webView.setBackgroundColor("#00000000")
for transparent background.
Try:
String text = "<html><body style=\"text-align:justify; background-color:#e6e6e6;\"> %s </body></html>"
The background-color CSS property should let you set the background to whatever you want it to be.
Edit: Kalel Wade's answer is better since it's done through the Android properties as opposed to the HTML.
Does anyone know of a way to modify the visual style of how the WebView displays auto-linked text (phone numbers, addresses, etc.)? Or more specifically, can I make the links that WebView detects look like standard clickable hyperlinks? For example,
webView.loadData("My phone number is 3035555555", "text/html", "utf-8");
This loads the text into the WebView and it is clickable, but it just looks like the rest of the body text. I also tried putting the text into an HTML file in assets and doing
webView.loadUrl("file:///android_asset/Test.html");
But that yielded the same result. Is there something in WebSettings or WebViewClient that controls this behavior I'm missing?
Cheers.
You could do this to get what your looking for.
String header = "< ?xml version=\"1.0\" encoding=\"UTF-8\" ?>";
String data = "< html>< body>< a href='tel:555-5599'>508-776-5510"
"< /body>< /html>";
mWebView.loadData(header+data, "text/html", "UTF-8");
Try this.....
String header = "< ?xml version=\"1.0\" encoding=\"UTF-8\" ?>";
String data = "< html>< body>< a href='tel:555-5599'>508-776-5510
" "< /body>< /html>";
mWebView.loadData(header+data, "text/html", "UTF-8");
If you are loading a string of html texts into webView. Then you can use
mWebView.loadData(header+data, "text/html", "UTF-8");
If you have a html file. Then you can use
webView.loadUrl("file:///android_asset/mypage.html"):
Note: Dont forget to put your html file in your assets folder.
Cheers!!! :D
In my app, I display pictures thanks to a webView. So for each image I create small HTML code that I load with the webView. So my html code consist basically in a img tag (with the path to my picture).
My pictures have different sizes, that's why I'd like to set my webView zoom to fit the pictures width to the webView width. So the user don't have do zoom in or out to be able to see the entire picture.
Is there a way to achieve it ?
Thanks.
If you are creaing the HTML code (which you say that you are), you can cheat:
In the html code:
img src="xxx" width="100% >
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:
width="100%"
So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:
public void setWebViewWithImageFit(String content){
// content is the content of the HTML or XML.
String stringToAdd = "width=\"100%\" ";
// Create a StringBuilder to insert string in the middle of content.
StringBuilder sb = new StringBuilder(content);
int i = 0;
int cont = 0;
// Check for the "src" substring, if it exists, take the index where
// it appears and insert the stringToAdd there, then increment a counter
// because the string gets altered and you should sum the length of the inserted substring
while(i != -1){
i = content.indexOf("src", i + 1);
if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
++cont;
}
// Set the webView with the StringBuilder: sb.toString()
WebView detailWebView = (WebView) findViewById(R.id.web_view);
detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
Hope this helps, it took me some hours to figure out how to solve this.
Is there a reason why you don't just use some javascript to pass in the images into the android application and bring up a Custom Dialog with the images in that dialog so that it scales according to the Content.
Personally, I think this solution is more elegant to your approach.
You can use a little jQuery in the web page to accomplish it as well.
Something like:
$(document).ready(function(){
var windowWidth = $(window).width()+"px";
$("#imagID").width(windowWidth);
});
I found a solution. Use this calculation:
device-width * (152 / density)
Retrieve device-width and density using displayMetrics.widthPixels and displayMetrics.densityDpi
Set calculated as width in img tag
the value 152 is originally was 160 but when 160 used, it looks like Image is bigger than screen.
The result is, image initially fit to screen and, zoom in works fine.
Is there a reason you are using a WebView to accomplish this? With an ImageView you can set the scaleType to fit the image to the size of the ImageView.