No Internet Dialog – With Code

Published by Kapil Mohan on January 28, 2019January 28, 2019

Dialog for displaying when internet is not available.

Preview
Gradle
Manifest
InternetDialog.java
XML
Values
drawables

Add dependency for support and card view, we are currently using v27.

    implementation 'com.android.support:support-v4:27.1.1'
    implementation 'com.android.support:cardview-v7:27.1.1'

Include permission for internet and network state, skip if already added.

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

Java class for handling displaying InternetDialog, if you want only designs skip this step

package com.appsnipp.internetdialog;

import android.app.Dialog;
import android.content.Context;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.view.View;

/**
 * Created by kapil on 03/11/18.
 */

public class InternetDialog {
    private Context context;

    public InternetDialog(){

    }
    public InternetDialog(Context context){
        this.context = context;
    }

    public void showNoInternetDialog(){
        final Dialog dialog1 = new Dialog(context, R.style.df_dialog);
        dialog1.setContentView(R.layout.dialog_no_internet);
        dialog1.setCancelable(true);
        dialog1.setCanceledOnTouchOutside(true);
        dialog1.findViewById(R.id.btnSpinAndWinRedeem).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog1.dismiss();
            }
        });
        dialog1.show();
    }
    public  boolean getInternetStatus() {

        ConnectivityManager cm = (ConnectivityManager)context.getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo activeNetwork = cm.getActiveNetworkInfo();
        boolean isConnected = activeNetwork != null &&
                activeNetwork.isConnectedOrConnecting();

        if(!isConnected) {
            //show no internet dialog
            showNoInternetDialog();
        }
        return isConnected;
    }


}

Invoke getInternetStatus() from this class to display noInternetDialog when internet is not available.

Place the below code in any activity.

        // CALL getInternetStatus() function to check for internet and display error dialog
        if(new InternetDialog(this).getInternetStatus()){
            Toast.makeText(this, "INTERNET VALIDATION PASSED", Toast.LENGTH_SHORT).show();
        }

create an xml file named dialog_no_internet.xml

dialog_no_internet.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"
    style="@style/df_dialog_layout"
    android:id="@+id/dialogParent">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="16dp"
        android:elevation="10dp"
        app:cardBackgroundColor="@color/whiteCardColor"
        android:gravity="center">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_margin="20dp">


            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/no_internet_image"
                android:layout_gravity="center"/>

            <TextView
                style="@style/homeHeading"
                android:textColor="@color/blackTextColor"
                android:textSize="@dimen/headerTextSize"
                android:text="No Internet"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"/>

            <TextView
                android:id="@+id/spinAndWinReward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                style="@style/learnhubTitleText"
                android:textStyle="normal"
                android:textSize="14dp"
                android:text="Please check your connection status and try again"/>

            <Button
                android:id="@+id/btnSpinAndWinRedeem"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Close"
                android:layout_marginTop="20dp"
                android:textColor="@color/whiteTextColor"
                android:background="@drawable/onboarding_button"/>

        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

Include these values on corresponding files.

colors.xml

    <color name="df_transparent_black_background">#80000000</color>
    <color name="whiteCardColor">#fff</color>
    <color name="whiteTextColor">#fff</color>
    <color name="blackTextColor">#000</color>

dimens.xml

   <dimen name="headerTextSize">22sp</dimen>
    <dimen name="contentTextSize">16dp</dimen>

styles.xml


    <!--styles for internet dialog-->

    <style name="parent">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="viewParent">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="df_dialog_layout">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:orientation">vertical</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:padding">10dp</item>
    </style>

    <style name="df_dialog">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:windowBackground">@color/df_transparent_black_background</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:layout_centerInParent">true</item>
    </style>

    <style name="homeHeading" parent="viewParent">
        <item name="android:textSize">@dimen/headerTextSize</item>
        <item name="android:textColor">@color/whiteTextColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="learnhubTitleText" parent="parent">
        <item name="android:textSize">@dimen/contentTextSize</item>
        <item name="android:textColor">@color/blackTextColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <!--styles for internet dialog ends here-->

download drawables and place it in drawables folder.

Download Drawables

<!————-or do it manually ————>

Create a file in drawables folder as onboarding_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="10dp"
        />
    <gradient
        android:angle="0"
        android:centerX="35%"
        android:startColor="#0248F9"
        android:endColor="#7838F4"
        android:type="linear"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="266dp"
        android:height="46dp"
        />
</shape>

download no internet image and place it in drawables folder. (click to save image)