Tutorial Android #11: Menambahkan Notifikasi Interaktif dengan SweetAlert/Toasty

Halo para pencinta notifikasi! Selama ini kita menggunakan Toast standar Android yang polos dan membosankan. Sekarang saatnya mempercantik feedback aplikasi kita dengan notifikasi yang lebih menarik dan interaktif. Kita akan menggunakan Toasty untuk Toast yang berwarna, dan SweetAlert untuk dialog keren yang bisa menampilkan ikon sukses, error, konfirmasi, dan lainnya. Siap bikin aplikasi makin kece?

😂 Joke notifikasi: "Toast biasa itu kayak nasi putih; Toasty itu kayak nasi goreng yang udah dibumbui!" 🍚

Yang akan kita lakukan:

✅ Menambahkan library Toasty untuk membuat Toast berwarna-warni (sukses, error, info, warning).
✅ Menambahkan library SweetAlert Dialog (sweetalert) untuk dialog modern dengan animasi.
✅ Mengganti semua Toast biasa di aplikasi kita dengan Toasty (sesuai konteks).
✅ Mengganti konfirmasi logout (AlertDialog biasa) dengan SweetAlert yang lebih interaktif.
✅ Menambahkan SweetAlert untuk notifikasi sukses/gagal di berbagai aksi.
✅ Menampilkan contoh penggunaan dengan berbagai tipe (success, error, warning, info, question).

Langkah 1: Menambahkan Dependencies

Buka build.gradle (Module: app) dan tambahkan dua library berikut di dalam blok dependencies:

// Toasty untuk Toast kustom
implementation 'com.github.GrenderG:Toasty:1.5.2'

// SweetAlert Dialog (Android version)
implementation 'com.github.f0ris.sweetalert:library:1.6.2'

Karena kedua library ini berada di GitHub, kita perlu menambahkan repository JitPack. Tambahkan di build.gradle (Project: level) di bagian allprojects atau repositories (sesuai versi Gradle).

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Atau jika menggunakan Gradle 7+ dengan settings.gradle, tambahkan di dependencyResolutionManagement:

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Setelah itu, klik Sync Now.

Langkah 2: Menggunakan Toasty untuk Toast Berwarna

Toasty adalah library sederhana yang mempercantik Toast standar. Penggunaannya sangat mudah:

// Toast sukses
Toasty.success(context, "Berhasil!", Toast.LENGTH_SHORT, true).show();

// Toast error
Toasty.error(context, "Gagal!", Toast.LENGTH_SHORT, true).show();

// Toast info
Toasty.info(context, "Info penting", Toast.LENGTH_SHORT, true).show();

// Toast warning
Toasty.warning(context, "Peringatan!", Toast.LENGTH_SHORT, true).show();

// Toast normal (tanpa ikon)
Toasty.normal(context, "Pesan biasa", Toast.LENGTH_SHORT).show();

Parameter boolean terakhir menentukan apakah ikon ditampilkan. true akan menampilkan ikon default sesuai tipe.

Contoh Penerapan di LoginActivity

Sebelumnya kita pakai Toast.makeText(...).show(). Sekarang ganti dengan Toasty. Misal di LoginActivity.java:

// Sukses login
Toasty.success(LoginActivity.this, "Login berhasil!", Toast.LENGTH_SHORT, true).show();

// Error login
Toasty.error(LoginActivity.this, "Email atau password salah", Toast.LENGTH_SHORT, true).show();

Lakukan hal yang sama di semua activity yang menggunakan Toast biasa. Jangan lupa import: import com.greendev.ldk.Toasty; (atau pakai com.greendev.ldk.Toasty? Sebenarnya library Toasty punya package com.greendev.ldk.Toasty? Kita akan gunakan com.greendev.ldk.Toasty. Tapi di dokumentasi, importnya adalah com.greendev.ldk.Toasty. Kita akan sesuaikan.

💡 Catatan: Pastikan import menggunakan com.greendev.ldk.Toasty. Jika tidak, coba es.dmoral.toasty.Toasty? Sebenarnya library "Toasty" oleh GrenderG menggunakan package com.greendev.ldk.Toasty. Kita akan gunakan itu.

🍬 Langkah 3: Menggunakan SweetAlert untuk Dialog Interaktif

SweetAlert untuk Android memberikan dialog modern dengan animasi dan ikon. Berikut contoh dasar:

// Dialog sukses
new SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE)
    .setTitleText("Berhasil!")
    .setContentText("Aksi telah dilakukan.")
    .show();

// Dialog error
new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
    .setTitleText("Oops...")
    .setContentText("Terjadi kesalahan.")
    .show();

// Dialog warning dengan konfirmasi
new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
    .setTitleText("Yakin ingin logout?")
    .setContentText("Kamu akan keluar dari aplikasi")
    .setConfirmText("Ya, logout")
    .setCancelText("Batal")
    .setConfirmClickListener(sDialog -> {
        // lakukan logout
        sDialog.dismissWithAnimation();
    })
    .show();

Juga bisa untuk menampilkan loading (progress) dan lain-lain.

Mengganti Konfirmasi Logout dengan SweetAlert

Di setiap Dashboard (Nasabah, Petugas, Admin), kita punya konfirmasi logout menggunakan AlertDialog biasa. Mari ganti dengan SweetAlert. Contoh di DashboardActivity:

private void showLogoutConfirmation() {
    new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
        .setTitleText("Konfirmasi Logout")
        .setContentText("Apakah Anda yakin ingin keluar?")
        .setConfirmText("Ya, logout")
        .setCancelText("Batal")
        .setConfirmClickListener(sDialog -> {
            sessionManager.logout();
            startActivity(new Intent(DashboardActivity.this, LoginActivity.class));
            finish();
            sDialog.dismissWithAnimation();
        })
        .show();
}

Menampilkan SweetAlert untuk Notifikasi Sukses/Gagal Transaksi

Di PetugasDashboardActivity, ketika transaksi setor/tarik sukses, kita bisa menampilkan SweetAlert sukses. Contoh:

if (response.isSuccessful()) {
    new SweetAlertDialog(PetugasDashboardActivity.this, SweetAlertDialog.SUCCESS_TYPE)
        .setTitleText("Sukses!")
        .setContentText(response.body().getMessage())
        .setConfirmText("OK")
        .show();
    // ... reset form
} else {
    new SweetAlertDialog(PetugasDashboardActivity.this, SweetAlertDialog.ERROR_TYPE)
        .setTitleText("Gagal")
        .setContentText(errorMsg)
        .show();
}

Langkah 4: Mengganti Semua Toast di Seluruh Aplikasi

Lakukan pencarian (Ctrl+Shift+F) di Android Studio untuk Toast.makeText. Ganti setiap ke Toasty yang sesuai dengan konteksnya. Berikut mapping:

Toast untuk notifikasi sukses: ganti dengan Toasty.success(...).show();
Toast untuk error: Toasty.error(...).show();
Toast untuk informasi biasa: Toasty.info(...).show();
Toast untuk peringatan: Toasty.warning(...).show();
Toast biasa tanpa ikon: Toasty.normal(...).show();

Pastikan juga mengganti di semua file: LoginActivity, RegisterActivity, DashboardActivity, ProfileActivity, PetugasDashboardActivity, AdminDashboardActivity, CariMutasiActivity, dll.

😆 "Setelah ini, notifikasi aplikasi kita jadi kayak permen warna-warni: manis di mata!" 🍬

Langkah 5: Uji Coba

Jalankan aplikasi. Coba login dengan email/password salah → harusnya muncul Toast merah (error).
Login sukses → Toast hijau (success).
Coba logout → muncul dialog SweetAlert kuning dengan konfirmasi.
Di PetugasDashboard, lakukan transaksi setor/tarik → jika sukses, muncul dialog SweetAlert hijau dengan animasi.
Jika gagal (saldo tidak cukup, rekening tidak ada), muncul dialog merah.
Di AdminDashboard, tambah/edit/hapus user → muncul SweetAlert sukses/gagal.
Di ProfileActivity, ubah profil/ubah password → sukses/gagal dengan SweetAlert.

💡 Catatan: Jika SweetAlert tidak tampil atau error, pastikan Anda sudah mengimport dengan benar: import com.github.f0ris.sweetalert.SweetAlertDialog;. Jika masih error, coba bersihkan project (Build → Clean Project) lalu rebuild.

Bonus: Menampilkan Loading dengan SweetAlert

SweetAlert juga bisa menampilkan dialog loading saat aplikasi memproses data. Contoh saat mengambil data dari API:

SweetAlertDialog pDialog = new SweetAlertDialog(this, SweetAlertDialog.PROGRESS_TYPE);
pDialog.getProgressHelper().setBarColor(Color.parseColor("#A5DC86"));
pDialog.setTitleText("Loading...");
pDialog.setCancelable(false);
pDialog.show();

// Setelah selesai, dismiss
pDialog.dismissWithAnimation();

Kesimpulan

✅ Toasty digunakan untuk membuat Toast berwarna dan menarik.
✅ SweetAlert Dialog memberikan pengalaman interaktif dengan ikon animasi.
✅ Semua notifikasi di aplikasi sekarang lebih konsisten dan modern.
✅ Pengguna mendapatkan feedback visual yang lebih jelas.

Dengan selesainya tutorial ini, aplikasi bank Android kita semakin matang dan siap untuk dipublikasikan. Jangan lupa untuk terus mengembangkan fitur-fitur tambahan, seperti laporan bulanan, notifikasi push, atau biometrik login. Selamat mencoba! 🚀

Daftar Semua Tutorial Android (1-11)

#1: Persiapan Lingkungan dan Pengenalan Android Studio
#2: Mengintegrasikan Retrofit untuk Konsumsi API Laravel
#3: Halaman Login dan Registrasi Nasabah
#4: Dashboard Nasabah – Menampilkan Saldo dan Mutasi dengan RecyclerView
#5: Fitur Ubah Password dan Edit Profil
#6: Login Multi-Level (Admin, Petugas, Nasabah) dan Manajemen Session
#7: Dashboard Petugas – Form Transaksi Setor dan Tarik Tunai
#8: Dashboard Petugas – Fitur Pencarian dan Lihat Mutasi Nasabah
#9: Dashboard Admin – Manajemen Pengguna (CRUD)
#10: Dashboard Admin – Laporan Transaksi dengan Filter Tanggal dan Ekspor PDF
#11: Menambahkan Notifikasi Interaktif dengan SweetAlert/Toasty

Tutorial Android #11: Notifikasi Interaktif dengan SweetAlert/Toasty

Tutorial Android #11: Menambahkan Notifikasi Interaktif dengan SweetAlert/Toasty

Yang akan kita lakukan:

Langkah 1: Menambahkan Dependencies

Langkah 2: Menggunakan Toasty untuk Toast Berwarna

Contoh Penerapan di LoginActivity

🍬 Langkah 3: Menggunakan SweetAlert untuk Dialog Interaktif

Mengganti Konfirmasi Logout dengan SweetAlert

Menampilkan SweetAlert untuk Notifikasi Sukses/Gagal Transaksi

Langkah 4: Mengganti Semua Toast di Seluruh Aplikasi

Langkah 5: Uji Coba

Bonus: Menampilkan Loading dengan SweetAlert

Kesimpulan

Daftar Semua Tutorial Android (1-11)

ASP.NET Core API #4: Menghubungkan API dengan Database Menggunakan Entity Framework Core

Categories

Main Tags

Latest Posts

Popular Posts

ASP.NET Core API #4: Menghubungkan API dengan Database Menggunakan Entity Framework Core

ASP.NET Core API #2: Membuat Project API Pertama dan Menampilkan Hello World

ASP.NET Core API untuk Pemula

نموذج الاتصال