Image fit screen in a WebView

Question

In my app, I display pictures thanks to a webView. So for each image I create small HTML code that I load with the webView. So my html code consist basically in a img tag (with the path to my picture).

My pictures have different sizes, that's why I'd like to set my webView zoom to fit the pictures width to the webView width. So the user don't have do zoom in or out to be able to see the entire picture.

Is there a way to achieve it ?

Thanks.

Answer 1

That did the trick for me:

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

Answer 2

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.

Answer 3

Is there a reason why you don't just use some javascript to pass in the images into the android application and bring up a Custom Dialog with the images in that dialog so that it scales according to the Content.

Personally, I think this solution is more elegant to your approach.

Answer 4

If you are creaing the HTML code (which you say that you are), you can cheat:

In the html code:

img src="xxx" width="100% >