How to Enable Zoom Controls and Pinch Zoom in a Webview

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 ?

Android Enable Zoom and Pinch Controls in Webview

here's my code,

public class PdfViewActivity extends AppCompatActivity {

            private Toolbar mToolbar;
            private TextView mTxtTitleToolbar;
            private WebView mWebViewPdf;
            private String strUrl;

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_pdf_view);
                Intent intent = getIntent();
                strUrl = intent.getStringExtra("strUrl");
                setUI();
            }

            private void setUI() {
                mWebViewPdf = (WebView) findViewById(R.id.webview);
                mToolbar = (Toolbar) findViewById(R.id.toolbar);
                setSupportActionBar(mToolbar);
                getSupportActionBar().setDisplayHomeAsUpEnabled(true);
                getSupportActionBar().setHomeButtonEnabled(true);
                mTxtTitleToolbar = (TextView) findViewById(R.id.text_toolbar);
                mTxtTitleToolbar.setText("PDF");
                mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        finish();
                    }
                });
                loadWebView();
            }

            public void loadWebView() {
                mWebViewPdf.setWebViewClient(new myWebClient());
                mWebViewPdf.getSettings().setJavaScriptEnabled(true);
                mWebViewPdf.getSettings().setLoadWithOverviewMode(true);
                mWebViewPdf.getSettings().setUseWideViewPort(true);
                mWebViewPdf.getSettings().setBuiltInZoomControls(true);
                mWebViewPdf.getSettings().setDisplayZoomControls(false);
                mWebViewPdf.loadUrl("http://docs.google.com/gview?embedded=true&url="
+ strUrl.trim());
            }

            public class myWebClient extends WebViewClient {
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                }

                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return true;
                }

                @Override
                public void onPageFini`enter code here`shed(WebView view, String url) {
                    super.onPageFinished(view, url);
                }
            }
        }

xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:foo="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/rel_product_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/color_Black"
            app:contentInsetStart="@dimen/d_0"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:theme="@style/AppTheme.AppBarOverlay">

            <customview.CustomTextView
                android:id="@+id/text_toolbar"
                style="@style/TitleTextView"
                android:paddingRight="@dimen/d_40"
                foo:FontEnum="light" />

        </android.support.v7.widget.Toolbar>

    </RelativeLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/rel_product_detail"
        android:cacheColorHint="@color/transparent"
        android:fillViewport="true"
        android:scrollbars="none">

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

    </ScrollView> </RelativeLayout>

enable/disable zoom in Android WebView

I've looked at the source code for WebView and I concluded that there is no elegant way to accomplish what you are asking.

What I ended up doing was subclassing WebView and overriding OnTouchEvent.
In OnTouchEvent for ACTION_DOWN, I check how many pointers there are using MotionEvent.getPointerCount().
If there is more than one pointer, I call setSupportZoom(true), otherwise I call setSupportZoom(false). I then call the super.OnTouchEvent().

This will effectively disable zooming when scrolling (thus disabling the zoom controls) and enable zooming when the user is about to pinch zoom. Not a nice way of doing it, but it has worked well for me so far.

Note that getPointerCount() was introduced in 2.1 so you'll have to do some extra stuff if you support 1.6.

How to enable pinch zoom on a web view loading a url with pdf(Android)?

PDFs are notoriously difficult to interact with in Android. You could:

1.) Roll your own implementation of WebView that supports PDF

I don't recommend doing it this way. My typical logic is that if Google hasn't done it for a sufficiently long period of time, then it's either very difficult to do, or not very battery efficient. In any case, you may have to get your hands dirty with the Android NDK in order to make your implementation fast and efficient.

http://gurushya.com/customizing-android-webview/

2.) Convert your PDF to a series of bitmaps

For this option, you would need to parse the content of the webpage to find the necessary pdf, convert each slide of your PDF to a bitmap, and display each bitmap in a simple ImageSlider. I haven't had the time to try this method, but it seems like it may work (probably not very quickly though). This stackoverflow answer may help:

Need help to convert a Pdf page into Bitmap in Android Java

3.) Follow Convention - Recommended

This is likely your best option. Using Google Docs is somewhat of a hack. When you pass it a PDF, you're essentially opening up a javascript PDF reader with lousy mobile support. The typical way of handling PDF's in Android is by checking if the user has a PDF reader installed and opening the PDF with that if they do. That PDF reader will more than likely have a pinch to zoom functionality. Android is likely implemented this way for performance reasons and to work across a broader scope of devices.

Keep in mind that while your average iOS user may not be as used to this; Android users are quite comfortable opening files in other apps. Opening your PDF in a PDF reader gives the user the ability to choose which PDF reader to use. By doing so, you give the reader even more options than just pinch to zoom (such as indexed search, highlighting, quick navigation UI) depending on which app they have installed. If they don't have a PDF reader? Suggest a free one and link them to your Android store of choice!

Render a PDF file using Java on Android

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.

---

Related Topics