Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Menampilkan Dialog Desain Material di App Android

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Meyria (you can also view the original English article)

Tim desain material di Google mendefinisikan fungsionalitas dialog di Android sebagai berikut:

Dialog menginformasikan pengguna tentang tugas tertentu dan mungkin berisi informasi penting, memerlukan keputusan, atau melibatkan banyak tugas.

Sekarang Anda sudah mengerti dialog apa yang digunakan, sekarang saatnya untuk mempelajari bagaimana cara menampilkannya. Dalam tutorial ini, saya akan membawa Anda melalui proses untuk menampilkan berbagai jenis dialog desain material di Android. Kami akan membahas dialog berikut:

  • waspada
  • pilihan tunggal dan ganda
  • ime dan pemetik tanggal
  • dialog sheet bawah
  • dialog layar penuh

Contoh proyek untuk tutorial ini dapat ditemukan di repo GitHub agar mudah Anda ikuti.

1. Alert Dialog

Menurut dokumentasi resmi Google material design:

Lansiran adalah gangguan mendesak, memerlukan pengakuan, yang menginformasikan pengguna tentang suatu situasi.

Membuat Dialog Siaga

Pastikan Anda menyertakan artefak appcompat terbaru di file build.gradle Anda (modul aplikasi). Tingkat API minimum yang didukung adalah Android 4.0 (tingkat API 14).

Hal berikutnya adalah membuat instance dari AlertDialog.Builder.

Di sana kami membuat sebuah instance dari AlertDialog.Builder dan mulai mengkonfigurasi instance tersebut dengan memanggil beberapa metode penyetel di dalamnya. Perhatikan bahwa kami menggunakan AlertDialog dari artefak dukungan Android.

Berikut adalah rincian metode penyetel yang kami sebut pada instance AlertDialog.Builder.

  • setTitle(): atur teks yang akan ditampilkan di bilah judul dialog.
  • setMessage(): atur pesan yang akan ditampilkan di dialog.
  • setPositiveButton(): argumen pertama yang diberikan adalah teks yang ditunjukkan pada tombol positif, sedangkan argumen kedua adalah pendengar yang dipanggil saat tombol positif diklik.
  • setNegativeButton(): argumen pertama yang diberikan adalah teks yang ditunjukkan pada tombol negatif, sedangkan argumen kedua adalah pendengar yang dipanggil saat tombol negatif diklik.

Perhatikan bahwa AlertDialog.Builder memiliki setView() untuk mengatur tampilan tata letak khusus Anda ke dalamnya.

Untuk menampilkan dialog kita di layar, kita hanya memanggil show().

Alert dialog

Ada metode setter lain yang disebut setNeutralButton(). Memanggil metode ini akan menambahkan tombol lain di sisi kiri dialog. Untuk memanggil metode ini, kita harus melewati String yang akan berfungsi sebagai tombol text, dan juga pendengar yang dipanggil saat tombol disadap.

Alert dialog with neutral button

Perhatikan bahwa menyentuh di luar dialog akan secara otomatis menolaknya. Untuk mencegah hal itu terjadi, Anda harus memanggil setCanceledOnTouchOutside() pada instance AlertDialog dan memberikan false sebagai argumen.

Untuk mencegah penolakan dialog dengan menekan tombol BACK, Anda harus memanggil setCancelable() pada instance AlertDialog dan memberikan false kepadanya sebagai argumen.

Styling sebuah Alert Dialog

Ini cukup mudah untuk menyesuaikan dialog kita. Kami hanya membuat custom style pada styles.xml resource. Amati bahwa orang tua gaya ini adalah Theme.AppCompat.Light.Dialog.Alert. Dengan kata lain, gaya ini mewarisi beberapa atribut gaya dari induknya.

Kita mulai menyesuaikan gaya dialog dengan menetapkan nilai atribut yang akan diterapkan pada dialog-misalnya, kita dapat mengubah warna tombol dialog menjadi @android: color /holo_orange_dark dan juga mengatur latar belakang dialog ke custom drawable di folder resource drawable kami (android:windowBackground diset ke @drawable/background_dialog).

Berikut adalah file resource background_dialog.xml saya.

Di sini kami membuat InsetDrawable yang memungkinkan kami menambahkan insets di sembarang sisi ShapeDrawable. Kami membuat bentuk persegi panjang menggunakan tag <shape>. Kami mengatur atribut:shape dari tag <shape> ke rectangle (nilai lain yang mungkin adalah line, oval, ring). Kita memiliki tag anak <corners> yang menentukan radius sudut persegi panjang. Untuk isi yang padat, kami menambahkan tag <solid> dengan atribut android:color yang menunjukkan warna apa yang akan digunakan. Akhirnya, kita memberi garis batas dengan menggunakan tag <stroke> pada  <shape>.

Untuk menerapkan gaya ini pada dialog, kami hanya meneruskan gaya kustom ke parameter kedua di konstruktor AlertDialog.Builder.

Alert dialog with custom style

2. Dialog Konfirmasi

Menurut dokumentasi material desain:

Dialog konfirmasi mengharuskan pengguna untuk secara eksplisit mengkonfirmasi pilihan mereka sebelum opsi dilakukan. Misalnya, pengguna dapat mendengarkan beberapa nada dering namun hanya melakukan seleksi terakhir saat menyentuh 'OK.'

Berbagai jenis dialog konfirmasi berikut tersedia:

  • dialog pilihan ganda
  • dialog pilihan tunggal
  • pemetik tanggal
  • pemetik waktu

Dialog Pilihan Berganda

Kami menggunakan dialog pilihan ganda saat kami ingin pengguna memilih lebih dari satu item dalam sebuah dialog. Dalam dialog pilihan ganda, daftar pilihan ditampilkan bagi pengguna untuk dipilih.

Untuk membuat dialog pilihan ganda, kami hanya memanggil metode setter setMultiChoiceItems() pada instance AlertDialog.Builder. Di dalam metode ini, kita melewatkan sebuah Array tipe String sebagai parameter pertama. Inilah array saya, terletak di file sumber array /values/arrays.xml.

Parameter kedua ke metode setMultiChoiceItems() menerima sebuah array yang berisi item yang dicentang. Nilai setiap elemen dalam array CheckItems sesuai dengan setiap nilai dalam array multiChoiceItems. Kami menggunakan array checkedItems kami (semua nilainya false secara default) untuk membuat semua item tidak dicentang secara default. Dengan kata lain, item pertama "Dark Knight" tidak dicentang karena elemen pertama dalam array checkedItems adaah false, dan seterusnya. Jika elemen pertama dalam array checkedItems benar, maka "Dark Knight" akan diperiksa.

Perhatikan bahwa array ini checkedItems diperbarui saat kita memilih atau klik pada item yang ditampilkan—misalnya, jika pengguna memilih "The Shawshank Redemption", memanggil checkedItems[1] akan mengembalian true.

Parameter terakhir menerima sebuah instance dari OnMultiChoiceClickListener. Di sini kita cukup membuat kelas anonim dan mengesampingkan onClick(). Kami mendapatkan sebuah instance dari dialog yang ditunjukkan pada parameter pertama. Pada parameter kedua, kita mendapatkan indeks dari item yang dipilih. Akhirnya, pada parameter terakhir, kita mengetahui apakah item yang dipilih telah diperiksa atau tidak.

Multichoice dialog

Dialog Pilihan Tunggal

Dalam dialog pilihan tunggal, tidak seperti dialog pilihan ganda, hanya satu item yang dapat dipilih.

Untuk membuat dialog pilihan tunggal, kita hanya memanggil setSingleChoiceItems() setter pada instance AlertDialog.Builder. Di dalam metode ini, kita juga melewatkan sebuah Array dengan tipe String sebagai parameter pertama. Inilah array yang kami lewati, yang terletak di file sumber array: /values/arrays.xml.

Parameter kedua dari setSingleChoiceItems() digunakan untuk menentukan item mana yang dicentang. Parameter terakhir di onClick() memberi kita indeks item yang dipilih-misalnya memilih item Female, nilai selectedIndex akan menjadi 1.

Single choice dialog

Date Picker Dialog

Ini adalah pemetik dialog yang digunakan untuk memilih satu tanggal.

Untuk memulai, kami akan membuat instance bidang Calender di MainActivity dan menginisialisasinya.

Di sini kita memanggil Calendar.getInstance() untuk mendapatkan waktu sekarang (di zona waktu default) dan set ke bidang mCalendar.

Untuk menampilkan dialog pemetik tanggal, kami membuat sebuah instance dari DatePickerDialog. Berikut adalah penjelasan tentang definisi parameter saat membuat instance dari tipe ini.

  • Parameter pertama menerima konteks orang tua—misalnya, dalam Activity, Anda menggunakan this, saat berada dalam Fragment, Anda menghubungi getActivity().
  • Parameter kedua menerima pendengar tipe OnDateSetListener. Pendengar ini onDateSet() dipanggil saat pengguna menyetel tanggalnya. Di dalam metode ini, kita mendapatkan tahun yang dipilih, bulan yang dipilih tahun ini, dan juga hari yang dipilih dalam bulan tersebut.
  • Parameter ketiga adalah tahun yang dipilih.
  • Parameter keempat adalah bulan yang dipilih pertama kali (0-11).
  • Parameter terakhir adalah hari yang dipilih pada awal bulan (1-31).

Akhirnya, kita memanggil metode show() contoh DatePickerDialog untuk menampilkannya di layar saat ini.

Date picker dialog

Menetapkan Tema Khusus

Ini cukup mudah untuk menyesuaikan tema dialog pemetik tanggal (mirip dengan yang kami lakukan pada dialog lansiran).

Secara singkat, Anda membuat custom drawable, membuat custom style atau theme, dan kemudian menerapkan theme tersebut saat membuat instance DatePickerDialog pada parameter kedua.

Time Picker Dialog

Dialog pemetik waktu memungkinkan pengguna memilih waktu, dan menyesuaikan pengaturan waktu yang diinginkan pengguna, yaitu format 12 jam atau 24 jam.

Seperti yang dapat Anda lihat pada kode di bawah ini, membuat TimePickerDialog sangat mirip dengan membuat DatePickerDialog. Saat membuat instance dari TimePickerDialog, kami meneruskan parameter berikut:

  • Parameter pertama menerima konteks induk.
  • Parameter kedua menerima instance OnTimeSetListener yang berfungsi sebagai pendengar.
  • Parameter ketiga adalah jam awal hari.
  • Parameter keempat adalah menit awal.
  • Parameter terakhir adalah mengatur apakah kita menginginkan tampilan dalam format 24 jam atau AM / PM.

Metode onTimeSet() dipanggil setiap kali pengguna memilih waktu. Di dalam metode ini, kita mendapatkan sebuah instance dari TimePicker, jam yang dipilih pada hari yang dipilih, dan juga menit yang dipilih.

Untuk menampilkan dialog ini, kita tetap memanggil metode show().

Time picker dialog

Pemetik waktu dapat ditata dengan cara yang mirip dengan dialog pemetik tanggal.

3. Dialog Bottom Sheet

Menurut dokumentasi resmi Google material desain:

Lembaran bawah meluncur dari bagian bawah layar untuk menampilkan lebih banyak konten.

Untuk mulai menggunakan dialog sheet bawah, Anda harus mengimpor artifak dukungan desain—jadi kunjungi file build.gradle modul aplikasi Anda untuk mengimpornya.

Pastikan aktivitas atau fragmen untuk dialog sheet bawah akan muncul—tata letak orang tuanya adalah CoordinatorLayout.

Di sini kita juga memiliki FrameLayout yang akan berfungsi sebagai wadah untuk lembaran bawah kita. Perhatikan bahwa salah satu atribut FrameLayout ini adalah app:layout_behavior, yang nilainya adalah sumber string khusus yang memetakan ke android.support.design.widget.BottomSheetBehavior. Ini akan memungkinkan FrameLayout kita tampil sebagai lembaran bawah. Perhatikan bahwa jika Anda tidak menyertakan atribut ini, aplikasi Anda akan mogok.

Di sini kami mendeklarasikan sebuah instance dari BottomSheetDialog sebagai lapangan ke MainActivity.java kami dan menginisialisasinya dalam metode onCreate() aktivitas kami.

Dalam kode sebelumnya, kami menggeser tata letak lembaran bawah kami R.layout.bottom_sheet_dialog. Kami menyetel pendengar untuk tombol Cancel dan Ok di bagian bawah_sheet_dialog.xml. Saat tombol Cancel diklik, kita cukup mengabaikan dialog.

Kami kemudian menginisialisasi bidang mBottomSheetDialog kami dan mengatur tampilan menggunakan setContentView(). Akhirnya, kita memanggil show() method untuk menampilkannya di layar.

Berikut adalah bottom_sheet_dialog.xml saya:

Bottom sheet dialog

Pastikan Anda memeriksa How to Use Bottom Sheets With the Design Support Library oleh Paul Trebilcox-Ruiz di sini, di Envato Tuts + untuk mempelajari lebih lanjut tentang lembaran botttom.

Paul Trebilcox-Ruiz

Menurut dokumentasi Google resmi material desain:

Dialog layar penuh mengelompokkan serangkaian tugas (seperti membuat entri kalender) sebelum dilakukan atau dibuang. Tidak ada pilihan yang disimpan sampai 'Save' disentuh. Menyentuh 'X' membuang semua perubahan dan keluar dari dialog.

Sekarang mari kita lihat cara membuat dialog layar penuh. Pertama, pastikan Anda menyertakan artefak dukungan Android v4 di modul aplikasi Anda build.gradle. Ini diperlukan untuk mendukung Android 4.0 (tingkat API 14) dan yang lebih baru.

Selanjutnya, kita akan membuat FullscreenDialogFragment yang memperluas kelas super DialogFragment.

Di sini kita mengganti onCreateView() (seperti yang akan kita lakukan dengan Fragment biasa). Di dalam metode ini, kami hanya mengembang dan mengembalikan tata letak (R.layout.full_screen_dialog) yang akan berfungsi sebagai tampilan khusus untuk dialog. Kami mengatur OnClickListener pada ImageButton (R.id.button_close) yang akan menutup dialog saat diklik.

Kami juga mengganti onCreateDialog() dan mengembalikan Dialog. Di dalam metode ini, Anda juga dapat mengembalikan AlertDialog yang dibuat menggunakan AlertDialog.Builder.

R.layout.full_screen_dialog kami terdiri dari sebuah label ImageButton, Button, dan beberapa TextView:

Di widget ImageButton, Anda akan melihat aplikasi atribut: app:srcCompat yang merujuk pada custom VectorDrawable (drawable/ic_close). Custom VectorDrawable ini menciptakan tombol X, yang menutup dialog layar penuh saat disadap.

Untuk menggunakan aplikasi ini: atribut app:srcCompat, pastikan Anda menyertakannya di file build.gradle Anda. Selanjutnya, konfigurasikan aplikasi Anda untuk menggunakan pustaka dukungan vektor dan tambahkan elemen vectorDrawables ke file build.gradle Anda di modul aplikasi.

Kami melakukan ini agar kami dapat mendukung semua versi platform Android kembali ke Android 2.1 (tingkat API 7+).

Akhirnya, untuk menampilkan FullscreenDialogFragment, kita cukup menggunakan FragmentTransaction untuk menambahkan fragmen kita ke UI.

Full screen dialog

5. Surviving Device Orientation

Perhatikan bahwa semua dialog yang dibahas di sini, kecuali dialog layar penuh, akan diberhentikan secara otomatis saat pengguna mengubah orientasi layar perangkat Android-dari potret menjadi lansekap (atau sebaliknya). Ini karena sistem Android telah menghancurkan dan menciptakan Activity sehingga sesuai dengan orientasi baru.

Agar kami dapat mempertahankan dialog di seluruh perubahan orientasi layar, kami harus membuat Fragment yang memperpanjang kelas super DialogFragment (seperti yang kami lakukan untuk contoh dialog layar penuh).

Mari kita lihat contoh sederhana untuk dialog lansiran.

Di sini, kita menciptakan sebuah kelas yang memperluas DialogFragment dan juga mengimplementasikan DialogInterface.OnClickListener. Karena kita menerapkan pendengar ini, kita harus mengganti metode onClick(). Perhatikan bahwa jika kita menekan tombol positif atau negatif, metode onClick() ini akan dipanggil.

Di dalam onCreateDialog() kita, kita membuat dan mengembalikan sebuah instance dari AlertDialog.

Kami juga telah mengganti:

  • onCancel(): ini disebut jika pengguna menekan tombol BACK untuk keluar dari dialog.
  • onDismiss(): ini disebut setiap kali dialog dipaksa keluar karena alasan apa pun (BACK atau klik tombol).

Untuk menampilkan dialog ini, kami hanya memanggil metode show() pada instance AlertDialogFragment kami.

Parameter pertama adalah instance dari FragmentManager. Parameter kedua adalah tag yang dapat digunakan untuk mengambil fragmen ini lagi nanti dari FragmentManager melalui findFragmentByTag().

Alert dialog on rotation

Sekarang, jika Anda mengubah orientasi perangkat dari potret menjadi lanskap (atau sebaliknya), dialog lansiran tidak akan dipecat.

Anda dapat mengikuti langkah-langkah serupa untuk jenis dialog lain untuk mempertahankan dialog selama putaran perangkat. Anda cukup membuat Fragment yang memperpanjang kelas super DialogFragment, dan Anda membuat dan mengembalikan dialog tertentu di onCreateDialog().

Dialog Kemajuan (tidak berlaku lagi)

Beberapa dari Anda mungkin pernah mendengar tentang ProgressDialog. Ini hanya menunjukkan dialog dengan indikator kemajuan di dalamnya. Saya tidak menyertakannya di sini, karena ProgressDialog sudah tidak berlaku lagi di tingkat API 26—karena ini dapat menyebabkan pengalaman pengguna yang buruk bagi pengguna Anda. Menurut dokumentasi resmi:

ProgressDialog adalah dialog modal, yang mencegah pengguna untuk berinteraksi dengan aplikasi. Alih-alih menggunakan kelas ini, Anda harus menggunakan indikator kemajuan seperti ProgressBar, yang dapat disematkan di UI aplikasi Anda. Sebagai alternatif, Anda dapat menggunakan notifikasi untuk memberi tahu pengguna tentang kemajuan tugas.

Kesimpulan

Dalam tutorial ini, Anda mempelajari berbagai cara untuk menampilkan dialog desain material di aplikasi Android. Kami membahas jenis dialog desain material berikut:

  • alerts
  • dialog pilihan tunggal dan ganda
  • waktu dan pemetik tanggal
  • dialog sheet bawah
  • dialog layar penuh

Anda juga belajar cara membuat gaya kustom untuk dialog dan membuat dialog Anda mempertahankan perubahan konfigurasi orientasi antara landscape dan portrait menggunakan DialogFragment.

Ini sangat disarankan Anda memeriksa panduan desain material resmi untuk dialog untuk belajar merancang dan menggunakan dialog di Android dengan benar.

Untuk mempelajari lebih lanjut tentang pengkodean untuk Android, lihat beberapa kursus dan tutorial kami yang lain di sini tentang Tinta Envato!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.