Search code examples
imagewebviewscale

Android - Webview scale image to fit biggest dimension

In my ever so harsh endeavor to make my own apps, i have hit yet another brick wall.

Details

I decided today since the WebView already has build in zoom controls that i would migrate to it from a ImageView...my issue is that I still have active user with API 3 running...so I have to keep that in mind when writing update for this app

What am i trying to do?

Simply load an image from my server and display it fitting to the WebView window which can vary in size depending on the screen.

What have you tried

Try #1 (my personal attempt)

//iW & iH are the height and width of the image passed from the server
//Calc the scale needed to fit width
int scW = (int) ((iW / (float)wView.getMeasuredHeight()) * 100);
//Calc the scale needed to fit height
int scH = (int) ((iH / (float)wView.getMeasuredHeight()) * 100);
//fit the bigger of the 2
if (scW < scH)
{
    wView.setInitialScale(scW);
}
else
{
    wView.setInitialScale(scH);
}
String pUrl = "http://app.guycothal.com/Funnys/2012724133312929.png";
wView.loadUrl(pUrl);

This leaves some pics with a lot of empty space on all pics

Try #2 (Found on StackOverFlow)

String pUrl = "http://app.guycothal.com/Funnys/2012724133312929.png";
String html="<html><body><img src=\"" + pUrl + 
    "\" width=\"10%37\" height=\"10%37\"/></body></html>";
wView.loadData(html, "text/html", "utf-8");

This makes the images HUGE...and i mean HUGE

Try #3(Found on StackOverFlow)

wView.setWebViewClient(null);
wView.getSettings().setJavaScriptEnabled(true);
wView.getSettings().setLoadWithOverviewMode(true);//NEeds api 7
wView.getSettings().setUseWideViewPort(true);
wView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
wView.getSettings().setBuiltInZoomControls(true);
wView.getSettings().setSupportZoom(true); 
wView.getSettings().setUseWideViewPort(true);
wView.setScrollbarFadingEnabled(false);//Needs api 5
String pUrl = "http://app.guycothal.com/Funnys/2012724133312929.png";
wView.loadUrl(pUrl);

Other than needing and API higher than 3...even without those lines, it make the image again HUGE

Try #4 (again found HERE!!! <--- at least i search first)

wView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
String pUrl = "http://app.guycothal.com/Funnys/2012724133312929.png";
wView.loadUrl(pUrl);

Still needs Froyo (API 7) or higher

_Try #5 (Tried while writing this question after thinking too long)

//iW & iH are the height and width of the image passed from the server
int iMW = imgView.getMeasuredWidth();
int iMH = imgView.getMeasuredHeight();
int scW = (int) ((iW / (float)iMW) * 100);
int scH = (int) ((iH / (float)iMH) * 100);
if (iMW < iW && iMH < iH)
{
    if (scW < scH)
    {
        wView.setInitialScale(scW);
    }
    else
    {
        wView.setInitialScale(scH);
    }
}
if (iMW < iW && iMH > iH)
{
    wView.setInitialScale(scH);
}
if (iMW > iW && iMH < iH)
{
    wView.setInitialScale(scW);
}
if (iMW < iW && iMH < iH)
{
    if (scW > scH)
    {
        wView.setInitialScale(scW);
    }
    else
    {
        wView.setInitialScale(scH);
    }
}
wView.loadUrl(pUrl);

Whats Next?

I have no clue where to go from here...i have been killing myself all day over this one simple thing...please help before i pull my hair out

p.s. I am bald...so the hair this is a joke

Solution

  • Try #5 Worked!!!

            int iMW = imgView.getMeasuredWidth();
        int iMH = imgView.getMeasuredHeight();
        //Had the imw and iw backward...same for height
        int scW = (int) ((iMW / (float)iW) * 100); 
        int scH = (int) ((iMH / (float)iH) * 100);
        int fScale = 0;
        if (iMW < iW && iMH < iH)
        {
            if (scW < scH)
            {
                fScale = scW;
            }
            else
            {
                fScale = scH;
            }
        }
        if (iMW < iW && iMH > iH)
        {
            fScale = scW;
        }
        if (iMW > iW && iMH < iH)
        {
            fScale = scH;
        }
        //had signs backwards...DUH
        if (iMW > iW && iMH > iH)
        {
            if (scW < scH)
            {
                fScale = scW;
            }
            else
            {
                fScale = scH;
            }
        }
        wView.setInitialScale(fScale);
        wView.loadUrl(pUrl);