Membuat Custom Layout pada Alert Dialog Kotlin Android Studio

Membuat Custom Layout pada Alert Dialog Kotlin Android Studio - Assalamualaikum, setelah sekian lama vakum pada awal tahun 2022 ini Funtechsy ingin membagikan artikel tutorial android lagi. Pada artikel kali ini kita akan belajar bagaimana cara untuk menampilkan layout custom pada alert dialog di android studio kotlin. Alert Dialog merupakan sebuah widget / komponen yang bisa ditampilkan di aplikasi android. 

Biasanya, alert dialog ditujukan untuk menampilkan peringatan - peringatan, jendela konfirmasi, dan form pengisian data. Penggunaan alert dialog untuk mengisi form bisa dinilai lebih simple dibandingkan jika harus berpindah activity. Alert dialog bisa ditampilkan tanpa perlu berpindah activity.

Defaultnya, tampilan dari alert hanya berupa sebuah tampilan jendela terdiri dari Title, Message, dan Buttons ( Positive / Negative ).

Untuk membuat tampilan dari alert dialog sesuai dengan yang kita mau, kita perlu membuat custom layout sendiri kemudian men-setting dialog view. Bagaimana caranya Membuat Custom Layout pada Alert Dialog Kotlin Android Studio ?

Custom Layout Alert Dialog

Langkah pertama untuk Membuat Custom Layout pada Alert Dialog Kotlin Android Studio, yakni kita perlu membuat sebuah layout resource file.

Silahkan buka project android kalian di android studio, kemudian pada res / layout klik kanan -> new -> layout resource file

Beri nama, sesuaikan saja.

Kemudian, pada tutorial ini kita akan membuat sebuah layout form untuk menambahkan data mahasiswa

Kode

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="15dp"

    android:orientation="vertical"

    >

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:textAlignment="center"

        android:textSize="20sp"

        android:fontFamily="@font/poppins"

        android:textColor="@color/black"

        android:text="Tambah Mahasiswa"

        android:layout_marginBottom="15dp"

        />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:layout_marginBottom="15dp"

        >

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="NIM"

            />

        <EditText

            android:id="@+id/et_nim"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:layout_marginBottom="15dp"

        >

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="Nama"

            />

        <EditText

            android:id="@+id/et_nama"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:weightSum="4"

        android:layout_marginBottom="15dp"

        >

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="Prodi"

            />

        <Spinner

            android:id="@+id/sp_prodi"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            />

    </LinearLayout>

</LinearLayout>

Sehingga, tampilannya seperti berikut

Sampai sini, kita sudah berhasil membuat layout custom untuk form pada alert dialog kita. Mari lanjut ke bagian kotlin class nya.

 MainActivity

Skenario nya, ketika kita menekan tombol yang ada di aplikasi kita, baru akan muncul alert dialognya. Oleh karena itu, silahkan kalian buat on click listener pada button, kemudian panggil fungsi baru.

binding.fabAdd.setOnClickListener {
    addDialog()
}

Kemudian kalian buat fungsi baru bernama addDialog,

fun addDialog(){

        val dialogView   = layoutInflater.inflate(R.layout.dialog_add, null)

        // Inisiasi Element / Widget

        val et_nim       = dialogView.findViewById<EditText>(R.id.et_nim)

        val et_nama       = dialogView.findViewById<EditText>(R.id.et_nama)

        val sp_prodi     = dialogView.findViewById<Spinner>(R.id.sp_prodi)

        //Inisiasi Alert Dialog

        val alertBuilder = AlertDialog.Builder(this)

        alertBuilder.setView( dialogView )

        alertBuilder.setPositiveButton("Tambah", DialogInterface.OnClickListener {

                dialogInterface, i ->

            val nim         = et_nim.text.toString().trim()

            val nama        = et_nama.text.toString().trim()

            val id_prodi    = sp_prodi.selectedItem.toString()

            dialogInterface.dismiss()

        })

        alertBuilder.setNegativeButton("Batal", DialogInterface.OnClickListener { dialogInterface, i -> dialogInterface.dismiss()  })        

        alertBuilder.create().show()

    }

Pada fungsi add dialog, kita buat variabel baru bernama dialogView yang assignment-nya berupa hasil inflate layout custom yang tadi kita buat.

val dialogView   = layoutInflater.inflate(R.layout.dialog_add, null)

Kemudian, kita definsikan widget yang ada di dialogView tersebut

// Inisiasi Element / Widget
val et_nim       = dialogView.findViewById<EditText>(R.id.et_nim)
val et_nama       = dialogView.findViewById<EditText>(R.id.et_nama)
val sp_prodi     = dialogView.findViewById<Spinner>(R.id.sp_prodi)

Selanjutnya inisiasi alert dialog nya,

val alertBuilder = AlertDialog.Builder(this)
alertBuilder.setView( dialogView )
alertBuilder.setPositiveButton("Tambah", DialogInterface.OnClickListener {
        dialogInterface, i ->
    val nim         = et_nim.text.toString().trim()
    val nama        = et_nama.text.toString().trim()
    val id_prodi    = sp_prodi.selectedItem.toString()

    dialogInterface.dismiss()
})
alertBuilder.setNegativeButton("Batal", DialogInterface.OnClickListener { 

dialogInterface, i -> dialogInterface.dismiss()  

})

alertBuilder.create().show()

Sampai sini, kita sudah berhasil menyelesaikan langkah langkah nya. Silahkan kalian build aplikasi kalian.

Hasil

Sekian ya untuk artikel  Membuat Custom Layout pada Alert Dialog Kotlin Android Studio kali ini, jika ada pertanyaan / error silahkan sampaikan di kolom komentar. Terima kasih :)

Share This :