CODEWITHSUNDEEP
androidimagewebview
D13
D13

Reputation: 123

Android Webview - Scale image to fit screen properly with one loadUrl

In my app webview, there's no problem to fit text html to screen on first load but the problem occurs when you try to load a page that contains a single large image as the first page after you start an activity.

If you try to load a page with single large image after you load any type of page after the activity started, the page with single large image will fit to the screen with no problem. But, if you try to load the page with single large image as the first page after the activity started, it will display a page with small image with lots of white space around it.

Is there any way to fit the page with single large image with one WebView#loadUrl method?

This is my html page with single large image source

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Cover Title</title>
    </head>
    <body>
        <div id="cover">
            <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1125 1600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
                <image height="1600" width="1125" xlink:href="../images/v01-cover.jpg" />
            </svg>
        </div>
    </body>
</html>

I already tried setting the setLoadWithOverviewMode(true) and setUseWideViewPort(true) but didn't work out for me.
Read supermus comment in this link Android WebView, Scaling Image to fit the screen

Upvotes: 2

Views: 6042

Answers (2)

D13
D13

Reputation: 123

After reading Bonatti's answer, I managed to load a 'fit to screen' image page after the activity start by somehow forcing the webview to update viewport by calling this function when setting the webview

private void setWebView() {
    mWebView = (WebView)findViewById(R.id.webview);
    String data = "<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head></html>";
    mWebview.loadDataWithBaseURL(null, data, null, "UTF-8", null);
}

Cheers.

UPDATE

Instead of using #loadUrl, use #loadDataWithBase64 with your custom ContentProvider(to support local file) because you don't need to edit your html since #loadDataWithBase will fit the webview port to the screen straight away unlike #loadUrl which most probably have a small mistake in setting the viewport when loading a file/url

Upvotes: 2

Bonatti
Bonatti

Reputation: 2781

If you are using a WebView, a meta tag with the viewport is expect (this way, it can calculate stuff like width with pixel values, even during load and failures). Add <meta name="viewport" content="width=device-width, initial-scale=1"> on the <head> of your document. This should fix some issues.

Upvotes: 3

Related Questions