WebView no Internet connection dialog Android Studio

Hello developers, in this tutorial I will show you how to add WebView no Internet connection dialog with a reload button Android Studio. If you want to add a dialog when user try to use WebView without internet connection, then follow the steps given below. Hope this project will help you.

WebView no Internet connection Android Studio

MainActivity.java

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.os.StrictMode;
import android.view.LayoutInflater;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.material.dialog.MaterialAlertDialogBuilder;

public class MainActivity extends AppCompatActivity {

    WebView webView;



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

        webView = findViewById(R.id.webView);

        webView.loadUrl("https://developers.flashzon.com");


        webView.setWebViewClient(new WebViewClient() {

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {

                if(!isNetworkAvailable()) {
                    showNoInternetDialog();
                }

                super.onReceivedError(view, request, error);
            }
        });




    }

    private void showNoInternetDialog() {

        MaterialAlertDialogBuilder materialAlertDialogBuilder = new MaterialAlertDialogBuilder(MainActivity.this);
        LayoutInflater inflater = this.getLayoutInflater();
        final View dialogView = inflater.inflate(R.layout.no_internet_layout, null);
        materialAlertDialogBuilder.setView(dialogView);
        AlertDialog alertDialog = materialAlertDialogBuilder.create();
        alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
        Button reloadButton = dialogView.findViewById(R.id.reloadButton);


        reloadButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)  {

                webView.reload();
                alertDialog.cancel();
            }

        });

        // You can add this line for dialog not cancelable
       // alertDialog.setCancelable(false);

        alertDialog.show();

    }

    private boolean isNetworkAvailable() {
        android.net.ConnectivityManager connectivityManager = (android.net.ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
        return activeNetworkInfo != null && activeNetworkInfo.isConnected();

    }



}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity">

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


</LinearLayout>

no_internet_layout.xml

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


    <androidx.cardview.widget.CardView
        android:layout_width="280dp"
        app:cardCornerRadius="10dp"
        android:layout_height="wrap_content">


        <LinearLayout
            android:layout_width="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:layout_height="wrap_content">


            <ImageView
                android:layout_width="80dp"
                android:src="@drawable/ic_baseline_public_off_24"
                android:layout_margin="20dp"
                android:layout_height="80dp"/>


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="No Connection"
                android:textSize="16sp"
                android:textStyle="bold"/>


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginTop="10dp"
                android:text="Please check your internet connection"/>


            <Button
                android:id="@+id/reloadButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="30dp"
                android:backgroundTint="#00897B"
                android:text="RELOAD"/>

        </LinearLayout>


    </androidx.cardview.widget.CardView>

</LinearLayout>

Add below Vector Asset file ic_baseline_public_off_24.xml in the res/drawable folder. This is the image which is showing in the dialog. You can also add different image.

ic_baseline_public_off_24.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M11,8.17L6.49,3.66C8.07,2.61 9.96,2 12,2c5.52,0 10,4.48 10,10c0,2.04 -0.61,3.93 -1.66,5.51l-1.46,-1.46C19.59,14.87 20,13.48 20,12c0,-3.35 -2.07,-6.22 -5,-7.41V5c0,1.1 -0.9,2 -2,2h-2V8.17zM21.19,21.19l-1.41,1.41l-2.27,-2.27C15.93,21.39 14.04,22 12,22C6.48,22 2,17.52 2,12c0,-2.04 0.61,-3.93 1.66,-5.51L1.39,4.22l1.41,-1.41L21.19,21.19zM11,18c-1.1,0 -2,-0.9 -2,-2v-1l-4.79,-4.79C4.08,10.79 4,11.38 4,12c0,4.08 3.05,7.44 7,7.93V18z"/>
</vector>

Also dont froget to add Internet permission and Access Network state permission in the AndroidManifest.xml file.

Required Permissions

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

Thank you for visiting our site and hope you find your solution. If you face any problem related to Android Studio then you can contect me. I will try to help you as soon as possible. Thank You