Tutorial Membuat Custom Dialog di Android
Untuk kali ini pembahasannya akan lebih ringan daripada pembahasan sebelumnya, kali ini kita akan membahas mengenai :
1. Cara membuat custom dialog
2. Cara menampilkan custom dialog
3. Cara mengambil input dari custom dialog
Berikut adalah demo dari aplikasi kita saat sudah jadi nanti :
1. Membuat project android
Buatlah project baru android seperti biasa. Struktur project-nya adalah seperti ini :
Biarkan apa adanya terlebih dahulu. Sekarang kita buat layout xml yang baru.
2. Membuat layout custom dialog
Setelah layout xml untuk custom dialog sudah jadi, code-nya adalah seperti berikut :
3. Layout Main Activity
Sekarang kita masuk ke main_activity.xml, code-nya seperti ini :
4. Menginisiasi view Main Activity dan Custom Dialog
Code utuhnya adalah seperti ini :
Kita akan bahas terlebih dahulu code dari method initCustomDialog :
Pada baris ke-2, kita membuat instance Dialog dengan parameter MainActivity sebagai context.
Pada baris ke-3, kita meminta supaya dialog kita tidak usah diberikan title.
Pada baris ke-4, kita set untuk layout dari custom dialog.
Pada baris ke-5, kita set bahwa apabila kita kita menekan tombol back maka dialog kita akan hilang (dismiss).
Pada baris ke-7, kita inisiasi txtInputName yaitu editText yang ada pada dialog.
Pada baris ke-8, kita inisiasi btnInsertName yaitu Button yang ada pada dialog.
Code sisanya akan kita bahas nanti
5. Menampilkan custom dialog
Untuk menampilkan custom dialog, kita akan fokus pada method initViewComponents :
Perhatikan code mulai baris ke-4, yaitu baris untuk handling click pada btnOpenDialog. Untuk menampilkan custom dialog nya sangat sederhana, cukup dengan code pada baris ke-7, yaitu customDialog.show();
6. Mengambil input dari custom dialog
Untuk mengambil input dari custom dialog, kita kembali lagi ke code untuk method initCustomDialog() :
Kita fokus pada code baris ke-9, yaitu code untuk handling click pada button btnInsertName (yaitu button OK yang ada di dalam custom dialog).
Pada baris ke-12, kita mengambil text yang ada di dalam txtInputName dan kita masukkan ke variabel name.
Pada baris ke-13, kita set text dari txtName dengan variabel name di atas.
Pada baris ke-14, kita dismiss dialog-nya. Karena kita ingin ketika kita klik tombol OK yang ada di dialog, dialog nya juga hilang/dismiss.
7. SELESAI
Yup, sesederhana itu saja. Untuk yang ingin melihat code secara keseluruhannya, ada di repository github ini :
