Android WebView, Scaling Image to fit the screen

Android Problem Overview

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.

Android Solutions

Solution 1 - Android

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.

Solution 2 - Android

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);

Solution 3 - Android

you should scale the webView to fit the screen:

 WebView data = (WebView) getViewById(R.id.webview1);
 data.getSettings().setLoadWithOverviewMode(true);
 data.getSettings().setUseWideViewPort(true);

Solution 4 - Android

Its a bit late but I hope this will help, what you can do is:

String html = "<html><body><img src=\"" + URL + "\" width=\"100%\" height=\"100%\"\"/></body></html>";
mWebView.loadData(html, "text/html", null);

this will make the image exactly similar to your WebView's width, rest you can adjust the WebView itself.

Solution 5 - Android

What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:

width="100%"

So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:

public void setWebViewWithImageFit(String content){

        // content is the content of the HTML or XML.
        String stringToAdd = "width=\"100%\" ";
        
        // Create a StringBuilder to insert string in the middle of content.
        StringBuilder sb = new StringBuilder(content);

        int i = 0;
        int cont = 0;
   
        // Check for the "src" substring, if it exists, take the index where 
        // it appears and insert the stringToAdd there, then increment a counter
        // because the string gets altered and you should sum the length of the inserted substring
        while(i != -1){
            i = content.indexOf("src", i + 1);
            if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
            ++cont;
        }

        // Set the webView with the StringBuilder: sb.toString()
        WebView detailWebView = (WebView) findViewById(R.id.web_view);
        detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}

Hope this helps, it took me some hours to figure out how to solve this.

Solution 6 - Android

Code:

web = (WebView) findViewById(R.id.at_image_web);
web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setLoadWithOverviewMode(true);
web.loadUrl(linkImage);

Solution 7 - Android

This work for me: webView = (WebView) findViewById(R.id.webView); WebSettings webSettings = webView.getSettings(); webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Solution 8 - Android

I think this will fix your issue:-

      WebView web;

      web = (WebView) findViewById(R.id.webkit);
      web.setWebViewClient(new Callback());
      web.getSettings().setJavaScriptEnabled(true);
      web.getSettings().setLoadWithOverviewMode(true);
      web.getSettings().setUseWideViewPort(true);
      web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
      web.setScrollbarFadingEnabled(false);

Solution 9 - Android

This Code Work For Me :

String strData = "<head>" + "<style>" + ".smal-video-pnl,.smal-video-thumb,.detail-hldr{margin-left: 0px;margin-right:0px;}" + "</style>" +
            "</head>" + mListItem.get(position).getTitbits();
holder.webViewStatus.loadDataWithBaseURL(null, strData, "text/html", "UTF-8", null);

Solution 10 - Android

@BindingAdapter("wvSetContent")
fun WebView.wvSetContent(content: String?) {
    this.isFocusable = true
    this.isFocusableInTouchMode = true
    this.settings.javaScriptEnabled = true
    this.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY
    this.settings.setRenderPriority(WebSettings.RenderPriority.HIGH)
    this.settings.cacheMode = WebSettings.LOAD_DEFAULT
    this.settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW

    this.settings.domStorageEnabled = true
    this.settings.loadsImagesAutomatically = true;
    this.settings.setAppCacheEnabled(true)
    this.settings.databaseEnabled = true
    this.settings.setSupportMultipleWindows(false)
    this.loadDataWithBaseURL(null,
        "<style>img{display: inline;height: auto;max-width: 100%;}</style>$content", "text/html", "UTF-8", null)
}

it worked for me

Content Type	Original Author	Original Content on Stackoverflow
Question	artouiros	View Question on Stackoverflow
Solution 1 - Android	Tony	View Answer on Stackoverflow
Solution 2 - Android	Sebastian Breit	View Answer on Stackoverflow
Solution 3 - Android	thepoosh	View Answer on Stackoverflow
Solution 4 - Android	Ankit Bansal	View Answer on Stackoverflow
Solution 5 - Android	Jesus Almaral - Hackaprende	View Answer on Stackoverflow
Solution 6 - Android	hai than hoang	View Answer on Stackoverflow
Solution 7 - Android	Jenkyn	View Answer on Stackoverflow
Solution 8 - Android	user755278	View Answer on Stackoverflow
Solution 9 - Android	user6829265	View Answer on Stackoverflow
Solution 10 - Android	Sang Nguyen	View Answer on Stackoverflow