By using WebView, I have loaded some html content contains image(large
size, for example, 800*600) and text.
For text, it can perform line wrapping automatically.
But for image, it will enable the horizontal scroll even if
"setHorizontalScrollBarEnabled" is set to false.
Is there any method to force auto-fit in the WebView?
Thanks!
You can parse the HTML content before loading it into the WebView and change the image(s) size according to screen resolution (that you can detect)
Related
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'm trying to load html url that contains flash video to specific size of webview. I mean I have one LinearLayout that will vary with different resoultion screen. And that layout contains Webview with "MATCH_PARENT" width and height. But It is not able to load url that can be fit to that layout.
My XML layout looks like below image :
My Code :
mWebView = (WebView) findViewById(R.id.id_webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setScrollbarFadingEnabled(false);
mWebView.setWebViewClient(new WebViewClient(){
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
return super.shouldOverrideUrlLoading(view, url);
}
});
mWebView.loadUrl("http://XXXXXXXXXX/XX/XX.html");
So here It is not able to load webview properly that can be fit to this yellow part of layout. Sometimes it is loading half of yellow part or sometimes quarter of yellow part. So Its vary depends on different resolutions of screens. But I wanna load that webview perfectly fit to that layout even if that layout vary or not.
Update:
I'm able to load flash content perfectly with whole width of screen.So If I will remove red part of Layout , I'm able to see flash perfectly with webview. But If I add something left side, flash is cutting by the same percent of left layout from the right margin. So webview is able to load whole page but not able to load whole flash contains with that whole page.
Let me take your help or best suggestion if I'm doing something wrong over here.
Solving this problem requires modifying HTML and CSS, not android layout code. The WebView is just like a web browser. Therefore, we can rephrase your question as: how do I design a web page so that the video fills the entire page?
You will have to mess around with the HTML page until the flash panel's parameters are correct. A good starting point: here is the css needed to make an image fill a WebView
.video
{
width: 100%;
}
See example that uses the width attribute to make a full width image.
Have you tried WebView.setInitialScale ? And you may also need to calculate the specific value (used as the input param) for devices with different resolutions.
Actually WebView's width is decided by the page content itself so MATCH_PARENT helps little. So changing the initial scale is something like changing the zooming level, this way the web page "looks" fit into its parent layout.
Now I need to decide what widgets to use. There are a brief text description from an SQLite database and an image from an SD card or from the Internet on the screen.
I think that it would be better to use a single WebView to show the content than a TextView, an ImageView, and a TextView again. Are there any better ideas?
Here is a picture I created on Lucidchart.
Using WebView is not a good idea, Put the three components within a RelativeLayout and in a ScrollBar so that you can extend the elements without worrying about the size of the text as well as image size. And also webView will not render text perfectly.
Either option is fine. If the text in the database is in html format, you should use a webview. If not, you can use two textviews and one imageview.
With the WebView: you can justify the text, but it will not be a very clean solution if you want to resize the image for different screen sizes/resolutions.
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?
Very general question: I have multiple widgets in a ScrollView Android app. A standard ScrollView, mobile can show say 720 lines and user can scroll down then back up going thru multiple widgets (text panes, buttons etc). Problem is that I want to add a WebView that will display an HTML table; the height of this HTML table will be variable size.
Is there a way to change the height of the WebView based on the size of the HTML table it should display?
Yes, you can get a reference to the WebView, then set the height of it, with the setHeight attribute.
Maybe you would be better off letting the container take care of that for you, and set the attribute to "wrap_content".
I guess, you need to calc web-view content size (here and here and enter link description here), than set webview size to content fits (maybe here). In that way you should have only scrollview scrolling.
Good luck