Set Zoom for Webview

Android Webview initial zoom out

webview.getSettings().setLoadWithOverviewMode(true);

This will cause the webview to be zoomed out initially.

webview.getSettings().setUseWideViewPort(true);

The Webview will have a normal viewport (like desktop browser), when false the webview will have a viewport constrained to it's own dimensions.

EDIT: With the introduction of "Chrome web view" in Android KitKat, this code might not work.

How to set the initial zoom/width for a webview

The following code loads the desktop version of the Google homepage fully zoomed out to fit within the webview for me in Android 2.2 on an 854x480 pixel screen. When I reorient the device and it reloads in portrait or landscape, the page width fits entirely within the view each time.

BrowserLayout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

     <WebView android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
</LinearLayout>

Browser.java:

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class Browser extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.BrowserLayout);

        String loadUrl = "http://www.google.com/webhp?hl=en&output=html";

        // initialize the browser object
        WebView browser = (WebView) findViewById(R.id.webview);

        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);

        try {
            // load the url
            browser.loadUrl(loadUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Zooming a WebView

I found two possible solutions to this:

1. JS Zoom

This option loads a JS snippet into the current site of the webView and updates the style property of the current body.
The Javascript snippet looks like that:

function Zoom(value)
{
    document.body.style.zoom = value;
}

I use the loadUrl method of the webView to load this snippet.
The disadvantage of this method is that you have to load the snippet every time the page is updated. I did this by updating the zoom whenever onPageFinished of the webView is called. This has the disadvantage that the zoom isn't applied directly, but only when the page has finished loading.

2. DPI change

This is a rather hacky solution. It simulates a new display size, causing everything (and hence also the contents of the webView) to resize. It is done by executing the following command in the linux subsystem:

wm density [value]

Where the value is the new screen density. It has to be executed with root privileges, which also is the main disadvantage of this solution. Another disadvantage is that it is pretty slow (it needs about a second before updating the DPI).

Set minimum zoom level of webview (Android)

I think I found a solution for most situations like this, as long as we just want to load a single image. It's kind of a workaround, and loses some image details as it resizes the image. Nevertheless it should work on most if not all devices out there.

I followed the approach to embed the image into a basic HTML page, and filled the <img> tag with the width of the screen in pixels. For simplicity I skipped loading the HTML from a file and just generated it inside my Java code:

private String generatePage() {
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int displayWidth = display.getWidth();

    String result =
            "<html>"
            + "<meta name=\"viewport\" content=\"target-densitydpi=device-dpi,width=device-width\">"
            + "<head>"
            + " <title>Title</title>"
            + "</head>"
            + "<body>"
            + "<image id=\"myImage\" src=\"drawable/image.jpg\" width=\"" + displayWidth + "px\" />"
            + "</body>"
            + "</html>";
    return result;
}

I added this method to my Activity and used it to generate the code matching the device it runs on. The onCreate() method now can be pretty straightforward:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_manual);

    WebView webView = (WebView)findViewById(R.id.webView);

    webView.loadDataWithBaseURL("file:///android_res/", generatePage(), "text/html", "utf-8", null);
    webView.getSettings().setBuiltInZoomControls(true);
}

Important note: There are two details that you need to keep in mind, or it won't work.

You need to use the method webView.loadDataWithBaseURL(...), otherwise you can't access the local android ressources inside the HTML. This way the src attribute couldn't point to your image file.
You need the tag <meta name="viewport" content="..."> inside your HTML code, and it has to include target-densitydpi=device-dpi inside its content attribute. Otherwise the size of the image may still not match your viewport.

Note: You also can specify a minimal-scale inside the viewporttag, and this really affected my webview. The bad thing: At least on my Galaxy S3 mini running Jelly Bean 4.1.2 a minimal-scale of less than 1.0 had no effect.

Enable zoom in WebView android

In order to enable zoom on the webView, add the following code in onTuchEvent override method:

webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setSupportZoom(true);

If your webview goes to another url and you want to mantain the zoom level
use the webSettings class

webview.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

If you want a pre-defined zoom when webview loads use:

mWebView.setInitialScale(ZOOM_LEVEL);  // int value 50 = 50% -- 200 = 200%

It works pretty well for all device resolutions.

UPDATE: If any of those are working (weeeird...) try this:

public class Main extends Activity {
  private WebView myWebView;
  private static final FrameLayout.LayoutParams ZOOM_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT,Gravity.BOTTOM);

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.webview);
    this.myWebView = (WebView) this.findViewById(R.id.webView);

    FrameLayout mContentView = (FrameLayout) getWindow().
    getDecorView().findViewById(android.R.id.content);
    final View zoom = this.myWebView.getZoomControls();
    mContentView.addView(zoom, ZOOM_PARAMS);
    zoom.setVisibility(View.GONE);

    this.myWebView.loadUrl("http://www.facebook.com");
  }
}

From this question.

Webview zoom out programmatically

you can handle zoom percent like this:

mWebView.setInitialScale(ZOOM_LEVEL);

which ZOOM_LEVEL is zoom percentage number

How to enable zoom controls and pinch zoom in a WebView?

Strange. Inside OnCreate method, I'm using

webView.getSettings().setBuiltInZoomControls(true);

And it's working fine here.
Anything particular in your webview ?