Check Internet Connection in Android App | Webview App Development Series Part 12

Hi Everyone, Let's continue with our webview app development series. The last post I have shown you How to upload files in Android Webview App. Till now we have added Progress Bar, Progress Dialog, Splash Screen, Pull to Refresh, Download, Upload and also some different functionality in our Webview App.

Today I am going to you How to check internet connection in our Webview App and also How to show no internet connection dialog when the internet connection is off.

First, we will design the layout in "activity_main.xml" file for showing no internet connection on our app.

For that, First of all, I will take a Relative layout inside our LinearLayout. Inside relative layout, we will take an Imageview, a Texview and a Button.

In "ImageView" we will show our image. First I will copy my image and will paste onto "drawable" folder. Then we will write below code in activity_main.xml below the SwipeRefreshLayout which we have taken when we have done Pull to Refresh in our Webview App.

Code:

Then Below "ImageView" will take a TextView. Inside that textview we will display our text like "No Internet Connection". For that, we will take width, height, text alignment, text color, margin, id.

Code:

After that, We will take a button, the button text will "Retry" and will take id, height, margin and so on.

Code:

So the whole code will be in activity_main.xml is with SwipeRefreshLayout :

Code:

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/swipe"
        >

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

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nointernet"
        >
        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:id="@+id/netimg"
            android:layout_centerHorizontal="true"
            android:src="@drawable/nointernet"
            android:layout_marginTop="15dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/text"
            android:text="No internet connection"
            android:layout_below="@+id/netimg"
            android:textAlignment="center"
            android:textSize="25dp"
            android:layout_marginTop="10dp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnRetry"
            android:layout_below="@id/text"
            android:layout_centerHorizontal="true"
            android:background="@color/colorAccent"
            android:text="retry"
            android:textSize="15dp"
            android:textColor="@android:color/white"
            android:layout_marginTop="25dp"
            />
    </RelativeLayout>
</Linearlayout>

We have finished writing code in activity_main.xml.Now we will move to the "MainActivity.java". First, we will declare a Relative layout called "relativeLayout" and a button called "NointernetBtn".

Code:

After that, we will initialize them in onCreate.

Code:

Now we will write a function below onCreate. Inside that function, we will write conditions as if our mobile data is connected, then load our website in webview.

Else if wifi is connected then also load our website. Else show our no internet design what we have designed in the relative layout on activity_main.xml.

Code:

public void internetcheck(){

        ConnectivityManager connectivityManager = (ConnectivityManager) this.getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo mobiledata = connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_MOBILE);
        NetworkInfo wifi = connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI);

        if(mobiledata.isConnected()){
            web.setVisibility(View.VISIBLE);
            swipeRefreshLayout.setVisibility(View.VISIBLE);
            relativeLayout.setVisibility(View.GONE);
            web.reload();


        }

        else if(wifi.isConnected()){

            web.setVisibility(View.VISIBLE);
            swipeRefreshLayout.setVisibility(View.VISIBLE);
            relativeLayout.setVisibility(View.GONE);
            web.reload();
        }

        else{

            web.setVisibility(View.GONE);
            swipeRefreshLayout.setVisibility(View.GONE);
            relativeLayout.setVisibility(View.VISIBLE);

        }
    }

Now we will call our function "internetcheck()" in onCreate. After that, you can run your webview project, turn off your mobile data and then check you will see when mobile data or wifi is not connected it is showing our No internet page instead of the default error page.

Code:

Now we will write code for the "Retry" button in oncreate below where we have initialized our relative layout and button.

Code:

Now if you run your project again and click on the retry button, it will reload your website. As you can see we have written code for internet connection checking and it's working. And also if we click on the Retry button it is also successfully working.

But we have not fully done yet. If you notice suppose your Webview App is running then you just turn off your internet connection you will see it's showing you default error page not showing your custom error design. Because we have written function "internetcheck()", it will just check one time when our app will start. So, we will solve this problem also.

For that, We will call the override method "onReceivedError" in "WebViewClient". Inside it, will call internetcheck() function.

Code:

So the overall code will be in "MainActivity.java" with SwiperefreshLayout is:

Code:

package com.ss.tweetpost;

import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.content.Context;



public class MainActivity extends AppCompatActivity {
    private WebView web;
   String webUrl = "http://tweettools.trickssoftware.com/";

    private SwipeRefreshLayout swipeRefreshLayout;

    RelativeLayout relativeLayout;
    Button NointernetBtn;

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

        web = (WebView) findViewById(R.id.myweb);
        web.loadUrl(webUrl);
        WebSettings mywebsettings = web.getSettings();
        mywebsettings.setJavaScriptEnabled(true);

        web.setWebViewClient(new WebViewClient(){
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                internetcheck();
                super.onReceivedError(view, request, error);
            }
        });

        //improve webview performance
        web.getSettings().setLoadsImagesAutomatically(true);
        web.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
        web.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        web.getSettings().setAppCacheEnabled(true);
        web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        mywebsettings.setDomStorageEnabled(true);
        mywebsettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        mywebsettings.setUseWideViewPort(true);
        mywebsettings.setSavePassword(true);
        mywebsettings.setSaveFormData(true);
        mywebsettings.setEnableSmoothTransition(true);
        web.loadUrl(webUrl);


        //pull to refresh

        swipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swipe);

        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                swipeRefreshLayout.setRefreshing(true);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        swipeRefreshLayout.setRefreshing(false);
                        web.reload();
                    }
                },2000);
            }
        });

        swipeRefreshLayout.setColorSchemeColors(
                getResources().getColor(android.R.color.holo_blue_dark),
                getResources().getColor(android.R.color.holo_orange_dark),
                getResources().getColor(android.R.color.holo_green_dark),
                getResources().getColor(android.R.color.holo_red_dark)


        );

        //internet connection check

        NointernetBtn = (Button) findViewById(R.id.btnRetry);
        relativeLayout = (RelativeLayout) findViewById(R.id.nointernet);

        internetcheck();

        NointernetBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                internetcheck();
            }
        });



    }


    @Override
    public void onBackPressed() {
        if(web.canGoBack()){

            web.goBack();
        }
        else {

            super.onBackPressed();
        }
    }

    public void internetcheck(){

        ConnectivityManager connectivityManager = (ConnectivityManager) this.getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo mobiledata = connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_MOBILE);
        NetworkInfo wifi = connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI);

        if(mobiledata.isConnected()){
            web.setVisibility(View.VISIBLE);
            swipeRefreshLayout.setVisibility(View.VISIBLE);
            relativeLayout.setVisibility(View.GONE);
            web.reload();


        }

        else if(wifi.isConnected()){

            web.setVisibility(View.VISIBLE);
            swipeRefreshLayout.setVisibility(View.VISIBLE);
            relativeLayout.setVisibility(View.GONE);
            web.reload();
        }

        else{

            web.setVisibility(View.GONE);
            swipeRefreshLayout.setVisibility(View.GONE);
            relativeLayout.setVisibility(View.VISIBLE);

        }


    }

}

That's it. We have done it successfully. In the Next Post, I will show you how to implement AdMob ads in Webview app. Stay tuned, Thanks.