Membuat Alert Dialog Keren Dengan Sweet Kotlin

 PENDAHULUAN

    Alert merupakan halaman yang ditampilkan di atas sebuah activity yang biasanya di gunakan untuk memberikan sebuah peringatan atau informasi. Tak jarang juga alert di gunakan untuk meminta kepastian kepada user.

    Nah, di sini kita akan membahas Alert Dialog dengan menggunakan library Alert sweet Dialog. Library ini bisa kita tambah dengan cara:

1. Buka build.gradle.kts(module:app)

2. Tambahkan code berikut di baris paling bawah di dalam clas dependecies. 

dependencies {
..........
implementation ("com.github.f0ris.sweetalert:library:1.6.2")
}

3. Klik tombol "Sync Now" pada pojok kanan atas halaman untuk mensingronkan library yang baru di buat. 

4. Tunggu proses download library selesai. Tentunya dalam proses ini anda dalam ke adaan online.

    

    Library ini juga menyediakan beberapa function untuk menyesuaikan tampilan progress dialog kita. Berikut function yang dapat kita tuliskan setelah kode SweetAlertDialog.getProgressHelper():

• resetCount()
• isSpinning()
• spin()
• stopSpinning()
• getProgress()
• setProgress(float progress)
• setInstantProgress(float progress)
• getCircleRadius()
• setCircleRadius(int circleRadius)
• getBarWidth()
• setBarWidth(int barWidth)
• getBarColor()
• setBarColor(int barColor)
• getRimWidth()
• setRimWidth(int rimWidth)
• getRimColor()
• setRimColor(int rimColor)
• getSpinSpeed()
• setSpinSpeed(float spinSpeed)

Konsep Membuat Alert
Nah setelah langkah di atas selesai kita lakukan. Mari kita praktekkan. Anda dapat membuka halaman activity_main.xml. Ganti layout menjadi LinearLayout dan orientasi vertical. Karean alert biasanya mengikuti action, maka kita tambah komponen button. Perhatikan code berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="15dp"
tools:context=".MainActivity">

<Button
android:id="@+id/btn_alert"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ALERT"/>

</LinearLayout>

Sekarang masuk ke halaman MainActivity.kt. Kita akan mengetikkan script untuk menangani alert. Perhatikan code berikut:

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val btnAlert:Button = findViewById(R.id.btn_alert)

btnAlert.setOnClickListener{
SweetAlertDialog(this)
.setTitleText("ALERT") => memberikan Judul Pada Alert
.setContentText("Assalamualaikum W.W") => Isi alert
.show()
}
}

        Nah, code di atas merupakan konsep dari pembuatan alert. Nah sekarang kita akan memodifikasi alert tersebut dengan berbagai Model.  Model alert tersebut dapat anda lihat pada gambar berikut:

Jadi anda dapat mengganti code di atas dengan code sebagai berikut untuk membuat berbagai alert:

1. Membuat Tombol Pilihan

SweetAlertDialog(this)
.setTitleText("SELAMATA DATANG")
.setContentText("Apa anda ingin Lanjut!")
.setConfirmText("Ya!").setConfirmClickListener {
sDialog -> sDialog.dismissWithAnimation()
}
.setCancelButton("Tidak") {
sDialog -> sDialog.dismissWithAnimation()
}
.show()

    Code di atas akan menampilkan piliha "YA" atau "Tidak". Anda dapat mengisi implementasinya dengan yang lain, seperti memanggil halaman lain atau toash.

2. Proses Alert

btnAlert.setOnClickListener{
val pDialog = SweetAlertDialog(this, SweetAlertDialog.PROGRESS_TYPE)
pDialog.titleText = "Loading"
pDialog.setCancelable(false)
pDialog.show()
}

    Menampilkan loading

3. Error Alert

SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
.setTitleText("Oops...")
.setContentText("Beberapa Data Salah!")
.show()

4. Succes Alert

SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE)
.setTitleText("Good job!")
.setContentText("You clicked the button!")
.show()

5. Warning Alert

SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
.setTitleText("Peringatan")
.setContentText("Apa anda ingin Lanjut!")
.setConfirmText("Ya!").setConfirmClickListener {
sDialog -> sDialog.dismissWithAnimation()
}
.setCancelButton("Tidak") {
sDialog -> sDialog.dismissWithAnimation()
}
.show()

6. Costum Image

SweetAlertDialog(this, SweetAlertDialog.CUSTOM_IMAGE_TYPE)
.setTitleText("BAKSO!")
.setContentText("Bakso Om Rahman.")
.setCustomImage(R.drawable.bakso)
.show()

7. Input alert

val editText = EditText(this)
SweetAlertDialog(this, SweetAlertDialog.NORMAL_TYPE)
.setTitleText("Custom view")
.setConfirmText("Ok")
.setCustomView(editText)
.show()

8. Alert Bertingkat

SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
.setTitleText("Apa Kamu Yakin?")
.setContentText("Silahkan Lanjutkan!")
.setConfirmText("Yes!")
.setConfirmClickListener { sDialog ->
sDialog
.setTitleText("Anda Berhasil!")
.setContentText("Selamat Datang Di App Kami!")
.setConfirmText("OK")
.setConfirmClickListener(null)
.changeAlertType(SweetAlertDialog.SUCCESS_TYPE)
}
.show()

9. Enabled Button

val disabledBtnDialog = SweetAlertDialog(this, SweetAlertDialog.NORMAL_TYPE)
.setTitleText("Aler Enabled")
.setContentText("Disabled button dialog")
.setConfirmText("Confirm")
.setCancelText("Cancel")

disabledBtnDialog.setOnShowListener {
disabledBtnDialog.getButton(SweetAlertDialog.BUTTON_CONFIRM).isEnabled = false
}
disabledBtnDialog.show()

Nah itulah bermacam-macam alert yang di dapat anda modifikasi menjadi tampilan alert yang lebih menarik. Selamat mencoba dan selamat berinofasi. Terimakasih

Pentutup