I'm looking for a way to have images appear in a WebView that initially fits the screen, instead of showing the actual size. Is there a way to do this?
How is it different if:
1) I open an html file with an img tag to the image
2) I open the image file directly
Thanks for any assistance.
I ended up using:
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
To make the contents of the page fit to the WebView.
If I understand the question, you have an image on a web page that has dimensions X x Y and when you load the webpage into a WebView you want it to take up the dimensions of the android device (X1 x Y1). To do this pass a querystring to the url which renders the height and the width of the image at 100%. Also have the layout_width and layout_height of the webview set to the appropriate values.
If you load the image directly into the WebView, you can set the height and width of the image
You can use Webview's LayoutAlgorithm. But this will resize only those images with Width greater than the width of the device. This won't help you with images smaller than the screen.
Link: Can Android's WebView automatically resize huge images?
Another Solution is using a Javascript or an External Library like HTML Cleaner to remove the
<img> size attributes and then change their size via code and getWidth().
Related
I'm trying to make this fake app using a fullscreen webview. I made the web pages using the browser but using the webview everything is huge.
i tried the viewport meta, the setUseWideViewPort command, but it doesn't help.
I almost fixed that using:
webSettings.setTextZoom(30);
But the pictures and element sizes are still big ! How can I fix that ? Thanks.
PS : I cant change the viewport width meta to a specific pixel size because it mess the css "width:100%".
You gotta set the textsize using the html/css code.
I'm having this problem with a website we're building.
http://swaegersverzekeringen.e-staging.be
At the top left we have the company logo, which is an SVG image. (fyi : IE lte 9 a png gets loaded)
The SVG scales perfectly if I give the object tag holding the svg another width and height at different breakpoints. Now apparently, Android browser likes to do his own thing and doesn't scale the svg at all.
I can see that the object tag IS given the proper width, but the svg is displaying at full size and gets cropped because the object container is 100px wide.
I've been googling about this for an hour now, so I decided to ask around here what might be the solution.
Thanks in advance guys!
Is there any specific reason that you're using an object instead of an img tag?
You could deliver IE9 a .png as well and use img for browsers that support it.
You have to add style="max-height: 100%" in the actual SVG file. You can use the tag in your markup, but using tag is better.
How to display an image using a URL of a known jpg, png ..etc. File ?
I want an image , and I want it to be loaded from the internet from a particular website.
With that done,
I would like to make that image of an appropriate size...
Say I put the width as the same as screen_width (size)....What about the height ? I don't want to spoil the ratio of height/width of the original image...So is the height automatically set to account for the ratio ? or do I have to put in some value myself ...?
Plus, I want it to be zoomable.
To load images from website, you need to get the path from website server where the photo is stored. For image displaying put height as wrap_content mode so that the space will occupy as much as needed to display.
For this purpose you can use a Lazy Adapter. Here you can find a good example of it: https://stackoverflow.com/a/3068012/2436683. Maybe you can use it as a starting point.
I try to display images with gallery view and it works fine, now I would like to add a zoom but the WHOLE gallery, not selected image.
The point is that all images are expanded and increased spacing between them.
How to do it?
Not sure how you plan to do it, but if you just simply change all the candidate image size, the space among them would get bigger proportionally.
You can try setup the style of each frame in the gallery view. Steps are like:
1. override the gallery adapter, implement the getView funciton.
2. for imageView, setLayoutParams, setScaleType, both of which can be reference in the imageView doc, read the doc and adjust the params.
Put images into WebView. Actually make html page referencing your local images, put it into <table> element, and let WebView provide zooming. This will be fast, hw-accelerated, and will zoom as you desire.
Would it be good solution to change size of Gallery widget from code as well as space between images, according to zoom level, so it fits to your needs?
I have huge-image , but i can't using webview to display full size in tablet .
Only display a part , it cannot display full image
how can i do ?
thank you
If you mean that the Image you're loading in to the Webview overflows the device width, you can try changing the Webview's LayoutAlgorithm to Single Column.
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
This automatically adjusts image size for all screen sizes and orientations.
Via This Question