PENDAHULUAN
Alert Dialaog merupakan kotak pesan yang tampil di sebuah halaman desain. Kotak ini memberikan opsi kepada user untuk memilih. Maksimal opsi yang diberikan kepada user adalah tiga yang terdiri dari opsi Cancel, No dan Yes. Alert memberikan kesempatan kepada user untuk meninjau ulang tindakan yang di lakukan oleh alert.
Alert biasanya terdiri dari:
- Title => Berisikan judul alert
- Massge => Pesan Alert
- Opsi=> Pilihan yang di tawarkan oleh alert
Oke kali ini kita akan mencoba mempraktekkan pembuatan alert di android studio. Silakan buka aplikasi android dan buat projek baru. dengan nama latihanalert dan language:Kotlin. Ada 2 tindakan yang kita lakukan yaitu membuat desain dan membuat program.
Kasus yang kita angkat kali ini adalah membuat alert untuk memberikan peringatan kepada user terhadap aksi tombol Out/Keluar yang di tekan oleh User. Mari kita mulai.
Desain XML
Pastinya langkah pertama kita buat terlebih dahulu desain tatap muka android supaya user bisa berinteraksi dengan sistem. Desain ini kita buat di file activity_main.xml. Desain ini kita gunakan layout Relative dan kita masukkan komponen Button. Perhatikan code berikut:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
tools:context=".MainActivity">
<Button
android:id="@+id/btn_keluar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/black"
android:drawableTop="@drawable/out_24"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="Keluar"/>
</RelativeLayout>
Code di atas terdapat komponen Button. Perhatikan bahwa komponen ini kita beri identitas dengan nama "btn_kembali" yang berguna untuk mengenali komponen ini di program nantinya.
Program
Silahkan buka file MainActivity.kt. Kita akan membuat program alert disini. Terlebih dahulu kita kenali komponen button yang ada di desain yang kita buat tadi. Jangan lupa kita berikan action terhadap komponen button tersebut. Perhatikan code berikut:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var btnKeluar:Button = findViewById(R.id.btn_keluar)
btnKeluar.setOnClickListener(object : View.OnClickListener{
override fun onClick(v: View?) {
showDialog()
}
})
}
Terdapat sebuah function showDialog() di dalam fun onClick yang errir. Ini di sebabkan kita belum memiliki function. Jadi klik showDialog() tersebut dan pilih "Create Function ShowDialog()" untuk membuat function. Secara otomatis sebuah function akan di buat. Di dalam function inilah kita akan membuat desain alert. Perhatikan cede berikut:
}
Alert memiliki Title, Massage dan opsion. Sekarang mari kita buat title dan massagee alert kita. Perhatikan code berikut:
fun showDialog() {
val builder = AlertDialog.Builder(this)
builder.setTitle("PERINGATAN !") => Tampilan Title Alert
builder.setMessage("Apakah Kamu Ingin Keluar ?") => Isi Pesan
builder.setCancelable(false)
}
Selanjutnya kita tambahkan opsi. Ada 2 jenis opsi yang kita tambahkan:
- setPositiveButton() => Membuat tombol untuk melanjutkan aksi
- setNegativeButton() => Membatalkan aksi.
Berikut kode lengkapnya pada function showDialog:
fun showDialog() {
val builder = AlertDialog.Builder(this)
builder.setTitle("PERINGATAN !")
builder.setMessage("Apakah Kamu Ingin Keluar ?")
builder.setCancelable(false)
builder.setPositiveButton("YA") {
dialog, which -> finish()
}
builder.setNegativeButton("TIDAK") {
dialog, which -> dialog.cancel()
}
val alertDialog = builder.create()
alertDialog.show()
}
Jalankan program anda dan coba klik tombol Keluar yang ada di tampilan android tersebut :
