CODEWITHSUNDEEP
androidwebview
Tikky
Tikky

Reputation: 101

Fit image in webview

I am planning to display images from SD card in a webview in order to take advantage of he built in zoom capabilities of webview. However, I am facing an issue with displaying images that are bigger than screen size (e.g. 1800x1200) to fit the screen initially, like in an ImageView. I want the image to be displayed in full at first and provide zoom control to the users. I have tried using WRAP_CONTENT for webview's width and height, but that does not work. Any ideas? Following is a code snippet I am using:

    String path = getRealPathFromURI(mUriList.get(0)); // this gets the file path
    webView = (WebView) findViewById(R.id.WebView01);
 WebSettings settings= webView.getSettings();
 settings.setBuiltInZoomControls(true);
 settings.setSupportZoom(true);     
 webView.loadUrl("file://" + path);

Upvotes: 10

Views: 14605

Answers (4)

Nikhil Borad
Nikhil Borad

Reputation: 2085

WebSettings settings = webView.getSettings();

settings.setUseWideViewPort(true);

settings.setLoadWithOverviewMode(true)

Upvotes: 0

WSBT
WSBT

Reputation: 36323

If you write your HTML correctly, you don't have to do any "setLoadWithOverviewMode", "setUseWideViewPort" or "setInitialScale". And there is absolutely no reason to enable JavaScript.

This one line worked for me:

webView.loadDataWithBaseURL("file://" + directory, "<img src=\"" + name + "\" width=\"100%\"/>", "text/html", "utf-8", null);

The underlining HTML code is:

<img src=YourImage.png width="100%" />, by not setting a height, its aspect ratio will be kept.

Upvotes: 5

Ashish Anand
Ashish Anand

Reputation: 3581

 private WebView mWebView2;
    mWebView2 = (WebView)findViewById(R.id.webview);
    mWebView2.getSettings().setJavaScriptEnabled(true);
    mWebView2.getSettings().setLoadWithOverviewMode(true);
    mWebView2.getSettings().setUseWideViewPort(true);
    mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    mWebView2.setScrollbarFadingEnabled(true);
    mWebView2.loadDataWithBaseURL("file:///android_asset/", "<img src=\"banner5.png\" height=\"98%\" width=\"100%\"/>", "text/html", "utf-8", null);

Images are in the assets folder

Upvotes: 9

JochenJung
JochenJung

Reputation: 7213

That did the trick for me:

webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);

Upvotes: 3

Related Questions