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?
Related
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!
I'm using Anddown to convert some markdown text to html and I want to display the html in a webview. The webview is part of a fragment that takes up around half the screen on a tablet in landscape.
I want the html to appear at 'normal' scale, as in I never want it zoomed out so you can see the whole page. Most of the time this is fine since text in blocks wraps when it reaches the end of the view. But some of the markdown elements result in an html element which stretches the view horizontally, so I've got something that looks like this:
----
----
----
--------------
----
(imagine the dashes are text, the short lines are wrapping correctly to the fragment width)
When I load that to the webview, the page is zoomed out fully so that that long horizontal line fits the width of my view. I don't want this, I want the webview to always be zoomed in. The weird thing is that sometimes when I load the html to the webview, it will automatically zoom in to what I want (but with some horizontal overflow). This doesn't happen every time and when it does, I can see the zoomed out version for a split second before it resizes.
So my question is, how do I get it to default to 'zoomed in' always? I don't care if it means there's some horizontal overflow, I just want the text to be 100% in scale (if that even makes sense).
For normal scale you should use this viewport tag (on your html's header):
<meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1">
Now, if you want different scale you can change these settings (for example use a scale of 2)
Hope that answers your qauestion
If you're using text.
Have you tried using
word-wrap:break-word;
So the text won't be outside it's parent
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
Is it possible to scroll out of the page bounds in a webview?
Example: Webview page/content width: 15px, screen size: 10px. Can I scroll to X position 8px?
Technically I can, and it worked fine on my test device. However, testing on other devices I notice that it will stop rendering when I move out of the bound. The left part of the page will be 'blurry' or not visible at all, till I scroll back left and there is no more "empty space" in the webview, than it will update.
Is there a solution for this?
A possible solution would be making the content larger on the fly, with white space. But I cannot add padding to the webview, unless I put it in the html BEFORE I render it. But before I render it I won't know the width. After I render it there is no way to change the padding/add some empty space to the content, without loading it completely again. Right?
I solved this by added 1-2 page-breaks at the end of the html, it will render fine now and I customly prefent the view from scrolling to the end of the page, so that the white is not shown to the user.
So I have a local HTML file with CSS and I need to display this file in the form of a book (scroll left/right to view previous/next content, not up and down). I've thought of a really complicated ways to achieve this:
A Gallery of WebViews
Disable scrolling in the WebView
On swipe, scroll the WebView down the height of the WebView
There's a couple of problems with this approach:
I'd have to have the HTML content loaded for each WebView (extremely inefficient)
There exists the possibility that at the bottom of the page, there would be some content partially hidden
I'm looking for some suggestions on how to approach this problem, as the only thing I've came up with sounds dreadful. Thanks!
You could use two frames or iframes side by side and load odd page numbers in the left frame and even page numbers in the right frame. Put some fancy control buttons on each page, or a javascript scrollbar under the frames, and a div with a page-flipping animation that you can turn on or off when pages are loaded into the frames. I think it's totally doable, and could actually be pretty slick.
I can't help you totally, but here is a good example for page curl animation with custom view.
https://github.com/harism/android_page_curl/tree/master/src/fi