I have programmed Android since 2.1 but I really don't know how the WebView decides on the sizing of Html elements like text and images, that it is rendering. I am loading my HTML as follows:
String displayHtml = "<html><header></header><body>"+someDivContent + "</body></html>";
webView.loadData(displayHtml, "text/html; charset=utf-8", "UTF-8");
So everything renders fine, except for one thing. The text is so small I can barely read it. Essentially I use my fingers to zoom out and then everything looks perfect, but what I don't get is why the webview defaults to something that is so unreadable? And how can I know programatically how much zooming out I need to do? Its as if the webview does not know it can scroll or something so tries to fit everthing into the visible area of the screen and so shrinks everything. The font size is not a reasonable default, nor is the zoom. And its not just the font size, the images are also shrinked. That's my question, I will soon post the exact html data, but I get this almost everything I load from a string. I almost never get it when I load via url.
UPDATE: This question is not: How do I zoom like others answered before. The question is given dynamic HTML how do I know if I need to zoom at all? And by how much?
Thanks in advance!
Related
I am facing a curious problem with the last update of Android (4.4) : my CSS rendering is visible at screen for the user which means that my webview content is very thin before to adapt to the width:100% of the CSS.
I am using an android.webkit.WebView to display an html string like this :
webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);
This webview has the following size set :
90% of screen width for webview width
WRAP_CONTENT for webview height
The CSS is built to fit the webview width, the height will then adjust itself. There is no absolute width or height set in the css.
When I display my webview (which is already fully loaded as I used onPageFinished callback to know the loading is finished), the CSS starts to be rendered. This is surprising me as I thought it should be rendered when I loaded the webview.
The problem is that for the user, a very small white line is displayed and then this line adjust itself to match the webview settings.
If I fix the width in the CSS, I don't have any rendering problem. But I cannot do that as I want to match all screen sizes.
There was no problem before Android 4.4 as there was nothing displayed on screen until CSS was fully rendered.
By the way, I was using the setPictureListener() method from the webview. I know that this method is deprecated (and obsolete for a while), but it was the only way to know when the webview had really finish to be "drawn" on screen. If I use this method in Android 4.4, it is called many time and this error comes up in DDMS :
W/UnimplementedWebViewApi(23891): Unimplemented WebView method run called from: android.os.Handler.handleCallback(Handler.java:733)
I don't know if there is a direct relationship, I don't think so as even not using this method, my CSS is not rendered correctly.
I tried many things :
use javascript onload to make the body visible
use a chrome client on the webview and wait for progress to be at 100% to make my webview visible
use a webview client and wait for onPageFinished to make my webview visible
use a postDelayed of 500 ms when using the PictureListener to make my webview visible
use all layer type choices : HARDWARE / SOFTWARE / NONE
make my webview parent firstly INVISIBLE / GONE and then VISIBLE
but nothing worked.
It seems like the CSS is rendered only when the webview is visible for the user.
I cannot show source code as it is for professional purpose so I would only like different point of view on where I could be searching (or if someone has already see this curious error in DDMS)
Has someone an idea on how to wait for the CSS to be rendered in the webview before to display this webview ?
Many thanks
I managed to fix this problem.
I had a display: table; in the style of the main div of my HTML and removing this makes my rendering looks good.
As it was working well with Android previous version, I am not able to determine if it is a bug of the webview, or a problem in my CSS.
By the way, thanks for having a look at my problem
I am using a WebView to display some maps in my app using the Google Static Maps API. However, when I load a map into my WebView, it's always either zoomed out too far (showing a massive amount of white space around the map) or too close (showing only part of the map). Given that I'm requesting a map of the same size as the size of my WebView, I should be able to "tightly" wrap with no issues, but I'm not sure how to achieve that.
I've tried just running at the default settings, and that results in the map being zoomed in too far (and scrollbars being displayed). I've also tried this:
mapView.getSettings().setLoadWithOverviewMode(true);
mapView.getSettings().setUseWideViewPort(true);
which just results in the page being fully zoomed out. Are there other alternatives I'm missing other than futzing around with the scale?
I had similar problem with the whitespace. What I did was to go into the CSS file for the WebView and edited the margin/padding on the image I was displaying to be negative (I just edited until I was happy) so it would display completely in the upper left corner.
Then I set the height and width of the webView in my Android XML file until I was happy with the result. However I was having a bit of a problem with the width showing some white space on some devices but the height was good once I had found the right value.
My solution to this was to try to set the width as the same as the height in the java.class file for the activity but I was not successful, maybe you will have more luck.
In the end I abandoned the webView for my project so I can't really give you any working code.
I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?
Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.
The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/
I'm writing one of those reader applications. I would like to know if you have opinions and arguments for and against using WebView and Canvas (with drawText()) to achieve it.
What are the requirements:
format text according to a few html tags: <p>, <strong>, <h3>, <br/>, <a>,
display images within the text (they are in <img> tags),
display the text in two columns on tablet devices,
paging the text (Google currents style)
The ones in bold are absolutely required. The latter are strongly desired, but I can drop them.
So as far as my knowledge goes:
WebView will be great when it comes to displaying the html formatted text. I also don't have to take care of loading images, tey will be loaded automatically with <img> tags (will they, even if I use loadData() instead of loadUrl()?). The problems begin if I try to page the text. Is there a possibility to count the size of the text in a WebView and reflow it into multiple pages (using ViewPager)?
Canvas is great when it comes to counting the size of the text, putting it into columns and pages. But I will have to handle all the HTML tags myself, format the text myself. What is even worse, I will have to extract images' urls, handle the downloading and putting them back to the text (reflowing the whole text every time they load). Am I right?
Can you point some other advantages and disadvantages of using them? Which would you choose? Or maybe something else? Or is there some lib which does at least some of the work for me?
Why not use the Textview combined with spanned text and viewpagers for the paging.
I use a android.webkit.WebView to display some HTML formatted info to the user. Whenever I "page" in my application, I reuse all the graphical elements on screen and just fill them with different content. A WebView will by default increase its size to fit the contents, but won't decrease if the content shrinks.
To fix this, I call webView.clearView() to clear the view and then webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null)to reload it with data. It works, but it creates a very strange behavior where the view starts to flicker persistently. The flickering area seems to be the same size as what would have been left empty after filling it with smaller content.
I can't describe this better with words, so I created a short video to illustrate the problem:
http://www.youtube.com/watch?v=yL7tQpRSFe0
The WebView is the yellow box on the lower part of the screen.
Am I doing something wrong, or is it a bug?
If this is an Android bug, is there a better way to resize the view as to circumvent this problem?