Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Put an image inside a webview and fit it width

I'd like to use a WebView for displaying images potentially big (in order to seize it memory management). For the test i'm loading this code in the WebView

<head></head>
<body>
    <img alt="test" src="file:///android_asset/cute-cat-sleeping.jpg">
</body>

The problem is that if I load it in a web "as is". The WebView only allow to zoom out until the first dimension of the image is fit in screen. In this example the image height is totally shown into the WebView and then no more zoom allowed:

No zoom no setUseWideViewPort

As you can see this mode doesn't allow a correct display of the global image despite that when the image is zoomed the behaviour in the right and bottom corners are correct as you can see here

correct zoom display

So I tried the (WebView).getSettings().setUseWideViewPort(true) and the result is that I can zoom out more than the image's width

with setUseWideViewPort

and the zoomed behaviour is not correct in the bottom-right borders:

zoom with setUseWideViewPort

Summarizing: I'd like the max zoom out possible to be imageWidth=webview width and zoom behaviour like in the second image:

enter image description here

Complete and/or usefull answers will be bountied

EDIT: Bounty opened for Vinayak.B

like image 201
Addev Avatar asked Apr 19 '12 09:04

Addev


3 Answers

Using Viewport Metadata may help you to do this

The viewport is the area in which your web page is drawn. Although the viewport's visible area matches the size of the screen, the viewport has its own dimensions that determine the number of pixels available to a web page

Also try below

WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
like image 167
Vinayak Bevinakatti Avatar answered Oct 17 '22 01:10

Vinayak Bevinakatti


Load Html file in Webview and put your image in asset folder and read that image file using Html.

<htm>
  <table>
   <tr>
         <td>
           <img src="cat.gif" width="100%" alt="Hello">
         </td>
   </tr>
</table>
</html>

Now Load that Html file in Webview

webview.loadUrl("file:///android_asset/abc.html"); 

Or another way

if you use LinearLayout, can take a background parameter that can be a colour or a resource.

So in main.xml file contains webview. you simply added a

android:background="@+drawable/backgroundmain"

and use

   web.setBackgroundColor(0);

To make the webview transparent to see the background image behind.

like image 43
judgement Avatar answered Oct 17 '22 03:10

judgement


here is the solution set the img tag width to 100% in HTML code and then load it in your webview using loadDataWithBaseURL(null, htnlString, "text/html", "UTF-8", null); method

try this code

String htnlString = "<!DOCTYPE html><html><body style = \"text-align:center\"><img src=\"http://shiaislamicbooks.com/books_snaps/UR335/1.jpg\" alt=\"pageNo\" width=\"100%\"></body></html>";
yourWebView.loadDataWithBaseURL(null, htnlString, "text/html", "UTF-8", null);
like image 4
Qadir Hussain Avatar answered Oct 17 '22 01:10

Qadir Hussain