Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android WebView, Scaling Image to fit the screen

What I have: I'm loading image from a URL. I simply do (WebView).loadUrl(imageurl, extraheaders)

What I get: Image is not showing at full width of the WebView, it has blank space all around (like if you open a little iamge in your desktop browser)

What i tried: Setting LayoutAlgorithm to SINGLE_COLUMN. Works perfect, but zooming doesn't work. (I have it enabled in the WebView.getSettings() Dont know why. Setting setUseWideViewPort(true); load image without any blanks space, but it is fully zoomed in.

like image 767
artouiros Avatar asked May 01 '12 08:05

artouiros


3 Answers

You could also do something like this.

Add CSS style for img at the beginning (depends on your web data format) of your data string.

<style>img{display: inline; height: auto; max-width: 100%;}</style>

To quickly do it to data in WebView i did this.

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);

It's pretty much like what bansal21ankit said, but instead it will work on every image in your HTML without extra work.


Edit (clarification on post content):

You can have any text/html value instead of post.getContent() from the example.

Post content here is just an example of a text/html content which is loaded from some data source and then concatenated with the style part which makes any image in given content to fit the screen.

like image 143
Tony Avatar answered Nov 20 '22 22:11

Tony


I had the same issue and doing this worked just fine:

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

String data = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
data = data + "<body><center><img width=\""+width+"\" src=\""+url+"\" /></center></body></html>";
webView.loadData(data, "text/html", null);

Edit: As this remained as the accepted answer, here is a better solution (all credit to Tony below):

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
like image 59
Sebastian Breit Avatar answered Nov 20 '22 22:11

Sebastian Breit


you should scale the webView to fit the screen:

 WebView data = (WebView) getViewById(R.id.webview1);
 data.getSettings().setLoadWithOverviewMode(true);
 data.getSettings().setUseWideViewPort(true);
like image 42
thepoosh Avatar answered Nov 20 '22 23:11

thepoosh