Loading

Cara Mudah Custom AlertDialog Android

October 23, 2019     bagicode    

Hello coders, jumpa lagi bersama bagicode – tempat berbaginya koding. Udah lama gak nyatat biasanya bikin video dan dipublish di youtube, buat kalian yang belum tahu channel atau kanal kita bisa mampir disini untuk khusus mobile (dulu sih bahas semua, sekarang kita fokuskan ke mobile ya) dan disini untuk umum. Oke balik lagi ke tema di catatan kecil kali ini kami akan berbagi mengenai seluk beluk dari alertdialog di Android.

Apa itu AlertDialog?

Sesuai dengan namanya, alert dialog? view ini digunakan untuk menampilkan informasi peringatan seperti koneksi jaringan down, informasi user mau keluar dari system, informasi dari suatu aplikasi mirip seperti halaman about dan sebagainya. Alertdialog tampilannya seperti popup, tahu kan ya? itu loh muncul menutupi page sebelumnya dan transparan dengan warna background hitam serta tidak fullscreen ya. Baiklah biar lebih paham seperti ini kurang lebih bentuk dari alertdialog standart :

alert dialog androidgambar 1.0 screen alert dialog

Penjelasan :

  1. Title : Judul dari alertdialog
  2. Text Desc : Deskripsi dari alertdialog
  3. Cancel : Aksi untuk negative button
  4. Yes : Aksi untuk positife button

Dari ke 4 inti diatas yang textnya bisa kita set sendiri, ada lainnya juga yang bisa kita custom sendiri misalnya warna, arah dari mana munculnya si dialog, bisa di close tanpa harus menekan tombol positife danĀ  negatif dan paling penting kita bisa merubah semua posisi dan style dengan xml sendiri jika dibutuhkan. Gimana penasaran kan? yuk kita simak codenya terlebih dahulu

Code Standart (Seperti gambar 1 diatas)

var builder = AlertDialog.Builder(this)
builder.setTitle("Title")
builder.setMessage("Text Desc");
builder.setCancelable(false)
        .setPositiveButton("Yes"){dialog, which ->
            dialog.dismiss()
        }
    .setNegativeButton("Cancel"){dialog, which ->
        dialog.dismiss()
    }

var alertdialog = builder.create()
alertdialog.show()

Penjelasan

  1. Line inisialisasi alert dialog
  2. Line set Title untuk alert dialog
  3. Line set Message atau desc untuk alert dialog
  4. Line set Cancelable artinya alert dialog hanya akan hilang ketika user menekan yes atau cancel saja
  5. Line set onclick listener pada Yes
  6. Line set menutup dialog , dan
  7. Terakhir builder.create semua settingan di buat dan ditampilkan dengan .show()

Gimana nih coders, keren kan ? simple code bukan? nah sekarang untuk lebih asyik kita akan melakukan sedikit perubahaan atau custom dengan alertdialog kita ya. Apa perubahaannya ? berikut ini listnya ya :

  1. Memindahkan posisi alertdialog dari ditengah menjadi posisi atas.
  2. Menampilkan alertdialog dengan lebar menjadi fullscreen dan tinggi menyesuaikan isi.
  3. Menampilkan hanya tombol positife saja dan mengganti warna color menjadi sesuai yang kita inginkan.
  4. Tidak bisa close alert dialog kecuali user menekan tombol dismiss.
  5. Mengubah warna kotak yang tadinya putih menjadi warna yang kita inginkan.

Berikut ini gambar hasil jadinya :

alert dialog customgambar 1.1 alert dialog custom

Jika kita bandingkan gambar 1.0 dan 1.1 sudah keliatan ya perbedaannya, gimana menurut kalian suka yang mana nih? saya pribadi lebih suka hasil custom karna untuk alert dialog ini sangat mudah dibaca oleh user atau pengguna aplikasi. Kenapa? karna posisinya ada diatas dan tidak tertutup oleh apapun. Beda dengan yang standart muncul ditengah, bisa membuat kaget dan terkadang jika ukurannya tidak sesuai akan tertutup oleh keyboard.

Baiklah, itu aja pembahasan kita kali ini ya mengenai alert dialog. Bagi kalian yang penasaran dan permasalah terkait dengan catatan kecil ini, bisa komentar dibawah ya. Semoga bermanfaat dan tetap selalu stay di bagicode ya, untuk mendapatkan tutorial terbaru. See you guys sampai jumpa di tutorial selanjutnya.

Download Project

Note : hampir lupa code nya hihi

var builder = AlertDialog.Builder(this)
builder.setTitle("Error")
builder.setMessage("Hello ini adalah desc");
builder.setCancelable(false)
        .setPositiveButton("Dismiss"){dialog, which ->
            dialog.dismiss()
        }
var alertdialog = builder.create()
alertdialog.show()
alertdialog.window?.setGravity(Gravity.TOP)
alertdialog.window?.setBackgroundDrawableResource(R.color.colorPrimary)
alertdialog.window?.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

val buttonPositife = alertdialog.getButton(DialogInterface.BUTTON_POSITIVE)
buttonPositife.setTextColor(Color.YELLOW)
Categories: Tutorial Android, Tutorial Kotlin dan Android

Leave a Reply