How to prevent tap on webpage during webview loading?

Question

i created a webview inside my Android app with the following acitivity:

public class WebPageOpener extends Activity {
    private WebView webView;

    @SuppressLint({ "SetJavaScriptEnabled", "DefaultLocale" })
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        Bundle extras = getIntent().getExtras();
        String url = extras.getString("url");

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

        webView.setWebViewClient(new MyBrowser());

        // settings
        WebSettings webSettings = webView.getSettings();
        webSettings.setSaveFormData(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setLoadsImagesAutomatically(true);
        webSettings.setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        webView.loadUrl(url);
    }

    private class MyBrowser extends WebViewClient {
        final ProgressBar progressBar = (ProgressBar) findViewById(R.id.ProgressBar);

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

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        Log.d("TAG", url);
        progressBar.setVisibility(View.VISIBLE);
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        Log.d("TAG", "failed: " + failingUrl + ", error code: " + errorCode + " [" + description + "]");
    }

    public void onPageFinished(WebView view, String url) {
        progressBar.setVisibility(View.GONE);
    }
    }
}

Here is the related XML:

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

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

    <ProgressBar
        android:id="@+id/ProgressBar"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleLarge"
        android:visibility="gone"/>
</RelativeLayout>

I would avoid that users can tap on any buttons or image inside the webpage untill the webpage finish to load. In other words users can interact with webpage only when progress bar disappears. Any way?

If your showing progress bar when loading webpage then obviously your preventing tap on webpage — Pankaj, Nov 26 '15 at 10:39
You can try `webView.setClickable(true/false);` in respective methods — Akshay Bhat 'AB', Nov 26 '15 at 10:42
@Clairvoyant maybe you are right, but users can still scroll... — smartmouse, Nov 26 '15 at 10:42
@AkshayBhat: i did as you told me, but i can still scroll on the page during progressbar animation — smartmouse, Nov 26 '15 at 10:44
then what you can do is to set `webSettings.setSupportZoom(true);` and `webSettings.setBuiltInZoomControls(true);` in `onPageFinished` method. — Pankaj, Nov 26 '15 at 10:45
@AkshayBhat: no, it is not inside scrollview (i added it in my question) — smartmouse, Nov 26 '15 at 10:49
@Clairvoyant: i can't use webSettings in the inner class. How do you do that? — smartmouse, Nov 26 '15 at 10:54
@Survivor: i do not need it because the progressbar is still there while i scroll on the page — smartmouse, Nov 26 '15 at 10:55
Make a constructor and which will pass `webviewclient` obj to `MyBrowser ` class. — Pankaj, Nov 26 '15 at 11:09

score 0 · Answer 1 · answered Nov 26 '15 at 14:17

I solved my problem. The trick is casting the progress bar to RelativeLayout, instead of ProgressBar, and then set its click listener to null in onPageStarted() method of WebViewClient class.

Here is my working solution:

private class MyBrowser extends WebViewClient {
    final RelativeLayout progressBar = (RelativeLayout) findViewById(R.id.progressBarLayout);

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

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        Log.d("TAG", url);
        progressBar.setOnClickListener(null);
        progressBar.setVisibility(View.VISIBLE);
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        Log.d("TAG", "failed: " + failingUrl + ", error code: " + errorCode + " [" + description + "]");
    }

    public void onPageFinished(WebView view, String url) {
        progressBar.setVisibility(View.GONE);
    }
}

Here is the related XML:

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

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

    <RelativeLayout
        android:id="@+id/progressBarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" >

        <ProgressBar
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>
</RelativeLayout>

You can see my changes comparing the code i posted in my question. Anyway it is just two rows...

How to prevent tap on webpage during webview loading?

1 Answers1