Image looks tiny while centering image on the webview for some devices

Question

I just want to fix the image on webview like the picture as shown below. I did something to achieve that and it works actually on new kind of handsets like HTC One, Samsung S2-S3-S4, etc. But for small screen devices like Galaxy Ace it doesnt work and It looks very tiny. For instance android image on the picture appears centerized but very small.

Here is what I did

    webView = (WebView)findViewById(R.id.webView);
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    settings.setJavaScriptEnabled(true);
    String data = "<body><center><img width=\""+width+"px\" height=\""+height+"px\" src=\"" + url + "\" /></center></body></html>";
    webView.loadData(data, "text/html", null);

width and height calculating

//linearWebview is the parent of webview, I calculated its width and height and set the image dimensions according to that values.
linearWebview.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            width = linearWebview.getWidth();
            height = linearWebview.getHeight();
        }
    });

So my question is why it doesnt work on small screen devices and how can I achive that problem?

enter image description here

can you log the `data` string when you call `webView.loadData(data, "text/html", null);` and post the result? — ben75, Sep 26 '13 at 19:35

score 2 · Answer 1 · answered Sep 25 '13 at 05:43

2

Try this way

Do not specify width fix in Pixel because There are so many screen size and resolution comes in android use relative size like this.

String data = "<body><center><img height=\"auto\" style=\"max-width:100\\%\"; src=\"" + url + "\" /></center></body></html>";
webView.loadData(data, "text/html", null);

In this we have specified width 100% and height "auto". So that it will maintain the aspect ratio and image will not stretched.

answered Sep 25 '13 at 05:43

Biraj Zalavadia

28,348
10
61
77

it didnt solve, and also now it looks very tiny on every phone – Mustafa Güven Sep 25 '13 at 14:32

score 1 · Answer 2 · answered Sep 20 '13 at 09:54

1

Similar to your situation, I have a webview in my application that only shows one image and needs to be scaled to fit the width of the screen. I used the function WebView.setInitialScale(int scaleInPercent) to adjust the width. I'm assuming here that your image on the website always has a constant width.

Code:

// For an image of fixed width 640 pixels
Double val = Double.valueOf(width) * 100d / Double.valueOf(640);
mWebView.setInitialScale(val.intValue());

answered Sep 20 '13 at 09:54

rarp

1,122
10
20

I used like this but it shows very big right now webPromo.setVisibility(View.VISIBLE); String data = " – Mustafa Güven Sep 20 '13 at 12:50
@MustafaGüven If possible, can you tell me what value of lnPromoWidth are you using and the url of the image? – rarp Sep 20 '13 at 15:41
@MustafaGüven Can you also try adding this line `settings.getSettings().setSupportZoom(true);` – rarp Sep 20 '13 at 15:53

score 1 · Answer 3 · answered Sep 26 '13 at 21:07

I would comment, but I don't have enough reputation yet. Sorry. Is your issue with the webview not sizing correctly, or the image inside the webview? If it is the webview, try wrapping it in another view. It may be that when you are using a smaller screen size, it is using a different size image, and instead of stretching it, it just puts it there. fill_parent should get it to stretch, and then set the wrapper to the size you want.

score 0 · Answer 4 · answered Sep 27 '13 at 06:10

Do this way..

String data = "<body><center><img height=\"auto\" width=\"100\\% style=\"min-height:30\\%\"; src=\"" + url + "\" /></center></body></html>";
webView.loadData(data, "text/html", null);

You can set minHeight for image in percentage.Hope this will help you.

Image looks tiny while centering image on the webview for some devices

4 Answers4