4

I have a webview loading an image from the assets/ folder. The image is displayed zoomed 100% (or more) and does not have the same clarity as the real image has at 100%

How can I set the webview to display the image zoomed out AND not downscale the quality?

Also, I am using a webview because ImageView would require me to reinvent smooth scrolling, tap to zoom, pinch to zoom, etc

Insight appreciated

CQM
  • 42,592
  • 75
  • 224
  • 366
  • How are you getting the image from the assets/folder to the WebView? It might help if you posted the code.... – Torid Jun 29 '11 at 00:52
  • Also, what phone is this on? I got reports by somebody (on a Sony phone IIRC) that images would appear blurry on his phone, and I'm still trying to track down what the issue is. – EboMike Jun 29 '11 at 01:01
  • Do you have control over the html in this case? – cottonBallPaws Jun 29 '11 at 01:59
  • No HTML, just loading the image using loadURL pointing to the local assets folder. There's honestly only one way to do this...., I do not have control over the HTML but if making a local HTML page that called the local image, gave me more control, then do tell! – CQM Jun 29 '11 at 18:29

3 Answers3

2

I recall that problem. Webview automatically downsamples larger images probably out of memory concerns. If you want control of the quality you probably have to use ImageView. You could also try to use the gallery application instead.

mibollma
  • 14,959
  • 6
  • 52
  • 69
  • the gallery application? I can use that API within views? I'm reading http://developer.android.com/reference/android/widget/Gallery.LayoutParams.html now, but examples of the use would be helpful, additional insight appreciated – CQM Jun 29 '11 at 18:30
  • ImageView is being avoided because I do not want to re-implement zoom controls and smooth bi-directional scrolling – CQM Jun 29 '11 at 18:31
  • No you can't integrate it like that... you could only forward it using an intent... depends on your use case. Another option is to steal some code from the gallery application so you don't have to write it from scratch: http://android.git.kernel.org/?p=platform/packages/apps/Gallery.git;a=tree;f=src/com/android/camera;hb=HEAD – mibollma Jun 29 '11 at 18:37
1

I found the solution to showing good quality images in a webview. (let it be known that I loathe working with the webview!)

Root Cause: Out of the box, in a webview there's no concept of XXHDPI and XHDPI - if you do use those images on an XXHDPI or XHDPI device then the image is too damn large ! So you end up using HDPI/MDPI images... at least I did and then the images look blurred.

Solution Description: In your HTML (I programmatically create it within the activity), enable scaling and then programmatically detect the logical density. Calculate the scale (i.e. 300% on a XXHDPI device) and put that value into your HTML otherwise your font will be TINY! Within your drawable resources, ensure you're using graphics that match the resolution of the device (i.e. XXHDPI images on an XXHDPI device) - this is a reminder to replace the MDPI images in your XXHDPI res folder.

Coded Solution:

// constants needed to put together a nice Android webview-friendly page
private static final String HTML_STYLE = "<style>img{image-rendering: optimizeQuality;} html{font-size: [TBD]% !important}</style>";
private static final String HTML_META = "<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no; target-densitydpi=device-dpi' />";
private static final String HTML_HEAD = "<html><head><title>description</title>"+HTML_META+HTML_STYLE+"</head><body bgcolor=\"black\"><font color=\"white\">";
private static final String HTML_TAIL = "</font></body></html>";

// content to show in the webview
final String strBody = "<ul><li>stuff1</li><li>stuff2</li><li>stuff3</li></ul><p align=\"center\"><img src=\"file:///android_res/drawable/image.png\"></p>";

// get the logical font size
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int iFontScale = (int) (displaymetrics.scaledDensity * 100.0f);

// alter the HTML to programmatically insert the font scale
final String strCompleteHTML = (HTML_HEAD+strBody+HTML_TAIL).replace("[TBD]", String.valueOf(iFontScale));

// configure the webview and load the HTML
final WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setHorizontalScrollBarEnabled(false);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.loadDataWithBaseURL("file:///android_asset/", strCompleteHTML, "text/html", "utf-8", null);
Someone Somewhere
  • 23,475
  • 11
  • 118
  • 166
  • I am so proud of this solution... I need a beer with my lunch to celebrate. – Someone Somewhere Feb 27 '14 at 20:41
  • that is very clever, at this point I do use an extended imageview fullscreen that can pan,zoom, etc – CQM Feb 27 '14 at 20:44
  • Reg. `in a webview there's no concept of XXHDPI and XHDPI` - Did you evaluate CSS media queries, respectively checking window.devicePixelRation in javascript? – Philzen Apr 03 '14 at 21:00
  • I did a bunch of reading about the WebView and I read that a WebView is only aware of HDPI/MDPI/LDPI – Someone Somewhere Apr 03 '14 at 22:28
  • update: I found out today that setting the `android:targetSdkVersion` to 19 and above will break the scaling. I haven't yet debugged it, but I simply set the API level back to 17 – Someone Somewhere Jul 24 '14 at 19:33
0

Not sure why all those rather complicated answers are needed?

I solved the problem where a 200px image was blurry by using a 400px image and just downsize it by the factor 2 in CSS. DIV element set to 200px and background-size:contain/200px 50px; solved it for me

David Fariña
  • 1,536
  • 1
  • 18
  • 28