Android Enable Zoom and Pinch Controls in Webview

Question

I'm trying to get zoom controls to display along with pinch to zoom to work in an android webview. Largely referencing this SO.

Right now I have these being set in the onCreate method:

this._webView.getSettings().setBuiltInZoomControls(true);
this._webView.getSettings().setDisplayZoomControls(true);
this._webView.getSettings().setSupportZoom(true);

But nothing appears and the Zoom controls don't appear. I've also tried without setSupportZoom but that didn't seem to help.

As far as I can tell my webview is not wrapped in a scroll view but it is a subclass of Webview:

class MyWebView extends WebView {
        public MyWebView(Context context) {
            super(context);
        }

        @Override
        public void goBack() {

            super.goBack();
        }

    }

So I end up creating it like this:

if (this._webView == null) {
            this._webView = new MyWebView(this);
            this._webView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            this._webView.getSettings().setJavaScriptEnabled(true);
            this._webView.setWebChromeClient(new WebChromeClient());
            this._webView.setWebViewClient(new WebViewClient());
            this._webView.getSettings().setBuiltInZoomControls(true);
            this._webView.getSettings().setDisplayZoomControls(true);
            this._webView.getSettings().setSupportZoom(true);
            this._webView.loadUrl(this._baseUrl);
        }

Any ideas where I'm going wrong?

Thanks!

EDIT:

In onCreate I do this:

 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(1);
    getWindow().setFlags(1024, 1024);

    RelativeLayout my_layout = generateLayout();

    initUI();

    setContentView(my_layout);
}

In generateLayout we create the initial layout and create the holder for the webView:

private RelativeLayout generateLayout() {
    RelativeLayout my_layout = new RelativeLayout(this);
    my_layout.setId(this.generateViewId());
    my_layout.setLayoutParams(new RelativeLayout.LayoutParams(
            RelativeLayout.LayoutParams.MATCH_PARENT,
            RelativeLayout.LayoutParams.MATCH_PARENT));

    ... more layout stuff

    FrameLayout webViewPlaceholder = new FrameLayout(this);
    this._webViewPlaceholder = webViewPlaceholder;
    webViewPlaceholder.setId(this.generateViewId());
    webViewPlaceholder.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
    RelativeLayout.LayoutParams webViewPlaceholderLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
    webViewPlaceholderLayoutParams.addRule(RelativeLayout.BELOW, rlHeader.getId());
    webViewPlaceholder.setLayoutParams(webViewPlaceholderLayoutParams);

    my_layout.addView(webViewPlaceholder);
 }

Then in initUI we create the webView itself:

@SuppressLint({"SetJavaScriptEnabled"})
protected void initUI() {
    if (this._webView == null) {
        this._webView = new MyWebView(this);
        this._webView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        this._webView.getSettings().setJavaScriptEnabled(true);
        this._webView.setWebChromeClient(new WebChromeClient());
        this._webView.setWebViewClient(new WebViewClient());

        this._webView.getSettings().setSupportZoom(true);
        this._webView.getSettings().setBuiltInZoomControls(true);
        this._webView.getSettings().setDisplayZoomControls(true);

        this._webView.loadUrl(this._baseUrl);

    } else {
        if (this._webView.getProgress() >= 100) {
            this._progressIndicatorView.setVisibility(View.INVISIBLE);
        }
        setNavigationButtonsState();
    }
    this._webViewPlaceholder.addView(this._webView);
}

I think you are not getting a reference to the webview. Try to use the webview as a layout view, not dynamically created — Valdio Veliu
Do you add this._webView to your layout? RootView should add webview into its layout. — user6796845
I add a FrameLayout to the main RelativeLayout and then add this._webView to that. The main layout is programmatically created. Do you want to see the code? — Tom Hammond
@TomHammond plz check my code i'm using WebViewClient, and my code working perfectly. — Rucha Bhatt Joshi

Rucha Bhatt Joshi Rucha Bhatt Joshi · Accepted Answer · 2017-06-06T10:59:40

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>

Android Enable Zoom and Pinch Controls in Webview

3 Answers