How to enable WebView Zoom in Android

How to enable WebView Zoom in Android

In this article, we are going to learn about How to enable WebView Zoom. We are going to use our old article code for this article. Below is the URL for the old article. Android WebView Display Loading Progress Bar and Percentage. Special permission required for the Internet. Add following line AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

In our main activity layout file, we have a WebView, Progress Bar, and TextView. We are using ProgressBar and TextView for loading progress and percentage. Below is the code for activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.vlemonn.java.blog.loadingpercentage.MainActivity">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="0dp"
        android:id="@+id/llProgressContainer"
        android:orientation="vertical"
        android:visibility="gone"
        app:layout_constraintRight_toRightOf="parent">

        <ProgressBar
            android:id="@+id/progressBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            style="?android:attr/progressBarStyleHorizontal"
            />
        <TextView android:id="@+id/tvLoadingPercentage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <WebView
        android:id="@+id/webView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintTop_toBottomOf="@+id/llProgressContainer"
        android:layout_marginRight="0dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp">

    </WebView>

</android.support.constraint.ConstraintLayout>

Now it's time to modify our MainActivity.java class file. Below is the code for MainActivity.java file.

package com.vlemonn.java.blog.loadingpercentage;

        import android.graphics.Bitmap;
        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.view.View;
        import android.webkit.WebChromeClient;
        import android.webkit.WebSettings;
        import android.webkit.WebView;
        import android.webkit.WebViewClient;
        import android.widget.LinearLayout;
        import android.widget.ProgressBar;
        import android.widget.TextView;

public class MainActivity extends AppCompatActivity {


    ProgressBar progressBar;
    WebView webView;
    String url="https://androidtutorialfun.com";
    TextView textView;
    LinearLayout llProgressContainer;

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


        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        webView = (WebView) findViewById(R.id.webView);
        textView = (TextView) findViewById(R.id.tvLoadingPercentage);
        llProgressContainer = (LinearLayout) findViewById(R.id.llProgressContainer);

        webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                progressBar.setProgress(progress);
                textView.setText(progress+" %");
            }
        });

        webView.setWebViewClient(new MyWebViewClient());
        WebSettings browserSetting = webView.getSettings();


        /*
            Step 1:
            void setSupportZoom (boolean support)
                Sets whether the WebView should support zooming using its on-screen zoom controls and gestures.
                The particular zoom mechanisms that should be used can be set with setBuiltInZoomControls(boolean).
                This setting does not affect zooming performed using the zoomIn() and zoomOut() methods. The default is true.

            Parameters
                boolean: whether the WebView should support zoom

            Source: Android Official Website
            More Details: https://vlemonn.com

        */
        webView.getSettings().setSupportZoom(true);

        /*
            Step 2:
            void setBuiltInZoomControls (boolean enabled)
                Sets whether the WebView should use its built-in zoom mechanisms. The built-in zoom
                mechanisms comprise on-screen
                zoom controls, which are displayed over the WebView's content, and the use of a
                pinch gesture to control zooming. Whether or not these on-screen controls are
                displayed can be set with setDisplayZoomControls(boolean). The default is false.

                The built-in mechanisms are the only currently supported zoom mechanisms, so it is recommended that this setting is always enabled.

            Parameters
                boolean: whether the WebView should use its built-in zoom mechanisms

            Source: Android Official Website
            More Details: https://vlemonn.com

        */
        webView.getSettings().setBuiltInZoomControls(true);

        /*
            Step 3:
            setDisplayZoomControls

            void setBuiltInZoomControls (boolean enabled)

            Sets whether the WebView should use its built-in zoom mechanisms. The built-in zoom
            mechanisms comprise on-screen zoom controls, which are displayed over the WebView's
            content, and the use of a pinch gesture to control zooming. Whether or not these
            on-screen controls are displayed can be set with setDisplayZoomControls(boolean).
            The default is false.

            The built-in mechanisms are the only currently supported zoom mechanisms, so it is
            recommended that this setting is always enabled.

            Parameters
                boolean: whether the WebView should use its built-in zoom mechanisms

            Source: Android Official Website
            More Details: https://vlemonn.com

        */
        webView.getSettings().setDisplayZoomControls(true);

        browserSetting.setJavaScriptEnabled(true);
        webView.loadUrl(url);

    }

    private class MyWebViewClient extends WebViewClient {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            //progressBar.setVisibility(View.VISIBLE);
            llProgressContainer.setVisibility(View.VISIBLE);
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //progressBar.setVisibility(View.VISIBLE);
            view.loadUrl(url);
            return true;
            //return super.shouldOverrideUrlLoading(view, url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            llProgressContainer.setVisibility(View.GONE);
            //progressBar.setVisibility(View.GONE);
        }
    }

    @Override
    public void onBackPressed() {
        //super.onBackPressed();
        /*
        * Check this blog post to learn about how to control WebView Back Press
        * https://vlemonn.com/blog/android/how-to-control-back-button-in-android/
        * */

    }
}

Finally, the color.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#333333</color>
    <color name="colorPrimaryDark">#1d1d1d</color>
    <color name="colorAccent">#e3c800</color>
    <color name="colorProgress">#7ad61d</color>
</resources>

Execute our app. Below are the different images.

 

 

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share