Membuat Notifikasi atau Dialog No Internet Connecting di Android Studio

Membuat Notifikasi atau Dialog No Internet Connecting di Android Studio

Membuat Notifikasi atau Dialog No Internet Connecting di Android Studio
Membuat Notifikasi atau Dialog No Internet Connecting di Android Studio

Hallo sobat ruangcoder, artikel kali ini tentang Membuat Notifikasi atau Dialog No Internet Connecting di Android Studio, sudahkah sobat tau how to show no internet connection dialog in android studio, atau dalam bahasa indonesia nya bagaiaman cara memunculkan notifikasi tidak ada koneksi, nah pada kesempatan kali ini admin akan memberikan tutorial android studio untuk pemula ,  dimana tutorial kali ini kita akan membuat no internet connection dialog menggunakan android studio , bagi kalian yang sudah sering melihat notifikasi atau muncul gambar dan lain macam sebagainya, seperti T-Rex di google chrome saat kita dalam kondisi tidak menggunakan internet, bagi sobat yang penasaran bagaimana sih membuatnya, nah admin akan memberikannya, dari kata - kata nya pun sudah jelas ya apa itu No Internet Connection Dialog, jadi admin tidak perlu menjelaskannya lagi. Oke dari pada banyak basa - basi langsung saja kita buat, yuk mari disimak tutorialnya how to show no internet connection dialog in android studio.

Membuat Notifikasi atau Dialog No Internet Connecting di Android Studio :


Tentunya langkah yang pertama ini adalah membuka Android Studio, setelah membuka Android Studio kalian, silahkan buat project baru , disini saya tidak memberikan penjelasan membuat project baru nya ya , karena yang pastinya sobat sudah paham lah membuat project baru, yasudah admin jelaskan dengan ketikkan saja ya , karena maklum , spek laptop kentang , buat SS project android agar riweh hahah,

saat terbuka android studio sobat klik -> Start a new Android Studio project -> pilih Empty Activity -> kasih nama project tersebut dengan nama "InternetDialog" kemudian, langsung Finish saja. Lalu sobat tunggu sampai Gradle dll nya selesai di Synchrone , tunggu saja, admin anggep sobat sudah selesai, jadi kita lanjut

Nah setelah kebuka silahkan sobat import library untuk internet dialog ini dengan cara, ke Gradle Scripts ->build.gradle(Module: app) inget loh yang module:app, kemudian sobat masukkan codingan dibawah ini dan terakhir Synch Now biasanya ada di Pojok Kanan atas.



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

Setelah itu sobat ketik codingan dibawah ini , dimana codingan ini yang nantinya berfungi untuk mengakses internet. sobat bisa ketikan codingan yang ada dibawah ya.



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

Langkah selanjutnya adalah kita membuat design dimana nanti akan muncul notifikasi internet no dialog nya, tapi sebelum itu silahkan sobat download gambar dibawah ini , dimana gambar dibawah ini, yang nantinya buat notifikasi tersebut, dan kalo sobat tertarik ini kan belum bergerak gambarnya , kalau ingin bergerak silahkan komentar, nanti admin buatkan versi yang animasinya.


Silahkan sobat download gambar diatas ini , dan sobat letakan di res -> drawable sobat bisa lihat gambar dibawah ini untuk peletakannya :



Langkah selanjutnya adalah kita membuat terlebih dahulu untuk codingan java nya , lalu sobat berinama dengan nama "InternetDialog"dan "InternetDialogActivity"jadi disini kita langsung membuat 2 file java sekaligus , sobat bisa lihat gambar dibawah ini.


Lalu sobat ketikkan codingan yang pertama yaitu untuk file java "InternetDialog" sobat bisa ketik codingan yang ada dibawah ini, lagi dan lagi ,pada bagian codingan line pertama, yang package itu gak usah diketik , biarkan saja, jadi sobat ketik codingan dari mulai import dan seterusnya.



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


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;
    }


}

Sebelum lanjut ke codingan yang ke dua , admin akan menjelaskan , bagaimana cara memanggil notifikasi internet dialog disetiap class kita, jadi tidak hanya muncul di 1 class saja, jadi misal kalian punya 2 class cukup letakkan codingan dibawah ini ,di class maksudnya di file .java nya ya jangan di .xml nya

  // 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();
        }


Nah codingan diatas ini lah yang sobat ketikkan di setiap class sobat dimana fungsinya memanggil fungsi class InternetDialog agar memunculkan notifikasi atau pesan nya.oke dirasa sobat paham lah ya.

Lanjut pada codingan yang kedua yaitu pada codingan "InternetDialogActivity" silahkan sobat ketikkan codingan dibawah ini :

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class InternetDialogActivity extends AppCompatActivity {

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

        // 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();
        }
    }
}

Codingan diatas hanya sebagai contoh pemanggilan di class yang berbeda ,untuk memunculkannya , seperti yang admin sudah jelaskan diatas ya.

Nah tugas kita sekarang adalah membuat design XML nya silahkan sobat buat file XML yang baru , dengan nama "dialog_no_internet.xml" seperti gambar dibawah ini. disitu nampak sudah kelihatan hasilnya , karena pada langkah sebelumnya kita telah memasukkan gambar di drawable.



<?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>

Kemudian sobat buat file XML yang kedua yaitu "activity_internet_dialog" file XML ini yang nanti nya akan muncul notifikasi sebelumnya , kalao file xml yang sebelumnya , itu buat proses design dan fungsi daripada notifikasi tersebut, jadi pada file xml kali ini , hanya sebagai contoh gimana munculnya , jadi sobat bisa letakkan codingan class / java yang untuk memanggil notifikasi nya , di class sobat , tidak perlu menambahkan file xml ini , karena ini hanya untuk bahan pembelajaran , jadi saya membuatnya. jadi paham loh ya

Class InternetDialog = membuat fungsi notifikasi
Class InternetDialogActivity = memanggil fungsi notifikasi
XML dialog_no_internet.xml = design notifikasi
XML activity_internet_dialog.xml = tempat memunculkan design notifikasi yang telah dipanggil pada classnya yaitu class InternetDialogActivity 

jadi cukup jelas bukan , sesuaikan saja , oke langsung saja kita buat XML activity_internet_dialog tidak perlu di coding , biar default hello world saja , kan cuma sebagai contoh hahaha. buat memunculkan notifikasi nya , kalau sobat dalam kondisi internet muncul Hello World nya , kalau kondisi tidak dalam internet muncul lah notifikasi nya.

Kemudian kita akan mendesign layoutnya biar lebih cantik , sobat ke folder res -> values -> silahkan sobat tambahkan codingan dibawah ini pada masing - masing file XML nya .


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>

Terakhir 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-->

Sudah selesai deh , silahkan sobat jalankan dengan Emulator sobat , maaf dan sekali lagi maaf admin tidak memberikan demo running programnya , cuy seperti penjelasan diatas laptop admin kentang , nge lag , waktu tutorial sebelumnya bikin crud , itu 4jam buat bikin artikel 4jam lama di screenshot , karena nge lag bro hahaha, jadi sobat jalankan sendiri aja ya, dan semoga bermanfaat artikel kali ini, apabila ingin bertanya sobat tinggalkan komentar saja, dan see you di artikel selanjutnya.

Anda mungkin menyukai postingan ini