Android Local Image Displayed Via Webview Is Blurry
Solution 1:
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.
Solution 2:
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 Answer :
// constants needed to put together a nice Android webview-friendly pageprivatestaticfinalStringHTML_STYLE="<style>img{image-rendering: optimizeQuality;} html{font-size: [TBD]% !important}</style>";
privatestaticfinalStringHTML_META="<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no; target-densitydpi=device-dpi' />";
privatestaticfinalStringHTML_HEAD="<html><head><title>description</title>"+HTML_META+HTML_STYLE+"</head><body bgcolor=\"black\"><font color=\"white\">";
privatestaticfinalStringHTML_TAIL="</font></body></html>";
// content to show in the webviewfinalStringstrBody="<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 sizeDisplayMetricsdisplaymetrics=newDisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
intiFontScale= (int) (displaymetrics.scaledDensity * 100.0f);
// alter the HTML to programmatically insert the font scalefinalStringstrCompleteHTML= (HTML_HEAD+strBody+HTML_TAIL).replace("[TBD]", String.valueOf(iFontScale));
// configure the webview and load the HTMLfinalWebViewmyWebView= (WebView) findViewById(R.id.webview);
myWebView.setHorizontalScrollBarEnabled(false);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.loadDataWithBaseURL("file:///android_asset/", strCompleteHTML, "text/html", "utf-8", null);
Solution 3:
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
Post a Comment for "Android Local Image Displayed Via Webview Is Blurry"