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

Bagaimana Cara Kode Setting Screen di Aplikasi Android

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

Tim desain material di Google memberikan definisi yang jelas tentang setelan apa yang harus dilakukan di aplikasi Android Anda:

Setelan aplikasi memungkinkan pengguna menunjukkan preferensi tentang bagaimana aplikasi harus berjalan.

Mereka di Google juga menyatakan bahwa pengguna Anda harus menavigasi ke setelan aplikasi dari menu side navigation atau toolbar menu-dengan item berlabel Settings.

Termasuk setelan di aplikasi memberi pengguna kemampuan untuk mengontrol beberapa fungsi aplikasi Anda. Hal ini membuat pengguna Anda senang dan bukannya marah-karena mereka sekarang mengontrol bagaimana penerapannya.

Ini sangat disarankan untuk memberi akses ke setelan aplikasi. Ini akan memberikan user experience yang lebih baik bagi pengguna Anda, yang mengarah ke ulasan yang lebih baik di Google Play Store, yang kemudian menghasilkan jumlah unduhan aplikasi yang lebih tinggi (yang meningkatkan pendapatan).

Saya berasumsi bahwa Anda harus berinteraksi dengan setelan aplikasi pada perangkat Anda, misalnya dengan memilih nada dering default, atau dengan mengontrol privasi Anda di aplikasi. Hampir semua aplikasi terpopuler yang telah Anda unduh atau yang akan diunduh di Google Play Store menyertakan layar setelan untuk mengontrol perilaku aplikasi.

Contoh aplikasi populer yang memiliki layar pengaturan adalah aplikasi Android Chrome dari Google. Di layar setelan aplikasi ini, pengguna dapat memilih mesin telusur default, mengubah perilaku pemberitahuan, mengontrol privasi pengguna, dll. Anda dapat melihatnya sendiri dengan mendownload aplikasi Chrome dari Google Play Store (jika Anda belum memilikinya di perangkat). Tangkapan layar berikut berasal dari aplikasi Chrome, menampilkan layar setelan aplikasi.

Screenshot of Chrome app settings screen

Di postingan ini, Anda akan belajar membuat layar pengaturan aplikasi dari awal dan juga cara membaca nilai yang telah dipilih pengguna dari pengaturan aplikasi. Untuk bonus tambahan, Anda juga akan belajar cara menggunakan fitur template Android Studio untuk bootstrap cepat proyek Anda dengan layar pengaturan.

Sample proyek (di Kotlin) untuk tutorial ini dapat ditemukan di repo GitHub kami sehingga Anda dapat dengan mudah mengikuti.

Prasyarat

Untuk dapat mengikuti tutorial ini, Anda memerlukan:

1. Buat Proyek Android Studio

Jalankan Android Studio dan buat proyek baru (Anda bisa menamainya SettingsScreenDemo) dengan aktivitas kosong yang disebut SettingsActivity. Pastikan juga cek Include Kotlin support check box.

Android Studio create project screen

2. Membuat PreferenceFragment

Untuk mendukung API Level 11 (Honeycomb) dan di atas, kita bisa menggunakan PreferenceFragment. Kelas ini hanyalah Fragment yang menunjukkan hirarki objek Preference sebagai daftar.

Pada kode di atas, kami membuat nested class SettingsFragment di dalam SettingsActivity (karena kelas SetttingsFragment sangat kecil). Perhatikan bahwa class SettingsFragment kami memperluas superclass PreferenceFragment dan memiliki metode addPrerenceFromResource di dalam onCreate(). Dalam metode ini, kami memberikan ID referensi R.xml.preference XML pilihan untuk diluncurkan-saat Fragment dimuat. Akhirnya, kami meng-host Fragmen ke aktivitas dengan hanya menggunakan FragmentTransaction untuk menambahkannya ke UI-inside onCreate() SettingsActivity.

3. Membuat Preferences Kita

Buat file XML dan beri nama preferences.xml. Simpan file ini di dalam direktori res/xml di proyek aplikasi Anda. Perhatikan bahwa Anda dapat memberi nama file ini, tapi sangat disarankan untuk tetap menggunakan 'preferences' nama konvensional. Selain itu, Anda biasanya hanya memiliki satu file dalam sebuah proyek aplikasi.

Root node untuk file preferences.xml kami harus menjadi <PreferenceScreen> elemen. Di dalam elemen root ini, sekarang kita memiliki Preference individual kita. Berikut adalah atribut umum yang terkait dengan Preference:

  • android:key: atribut ini digunakan untuk mendapatkan nilai pada objek SharedPreferences.
  • android:title: menetapkan judul untuk Preference. Ini adalah teks tebal.
  • android:summary: set ringkasan untuk Preference (ini tidak diperlukan). Ini adalah faded text di bawah judul.
  • android:defaultValue: menetapkan nilai default untuk Preference.

Kami akan membahas setiap Preference yang telah kami definisikan di atas dengan segera. Perhatikan bahwa Anda juga dapat menambahkan atau menyesuaikan Preference melalui editor preferensi Android Studio - mirip dengan editor sumber layout yang sudah familiar. Anda dapat memilih untuk menambahkan/mengedit file XML preferensi Anda secara langsung dalam mode 'Teks' atau menggunakan UI drag and drop pada mode 'Desain'.

Android Studio preference editor

Seperti yang dapat Anda lihat, di editor ini, Anda dapat menarik dan melepas Preference di bagian palet (di sisi kiri). Setelah turun, Anda harus memilihnya dan memodifikasi atributnya di panel atribut (di sisi kanan) editor. Perhatikan bahwa secara default, kita diberi beberapa atribut untuk dimodifikasi. Untuk melihat atau memodifikasi semua atribut yang terkait dengan Preference yang dipilih, pastikan Anda mengklik tautan View all attributes di bagian bawah panel atribut. Ini sangat mirip dengan editor layout yang sudah Anda kenal.

Sekarang, mari kita melalui masing-masing entitas Preference yang kita miliki.

Checkbox Preference

CheckBoxPreference hanyalah widget CheckBox yang disertakan dalam layar preferensi. Preference ini mengembalikan nilai 'true' jika dicentang atau 'false' sebaliknya. Dengan kata lain, ia mengembalikan boolean tergantung pada keadaan widget.

CheckBoxPreferense

Atribut lain yang dapat Anda tambahkan ke CheckBoxPreference adalah:

  • android:summaryOff: menetapkan ringkasan untuk Preference di layar preferensi saat tidak dicentang.
  • android:summaryOn: menetapkan ringkasan untuk Preference di layar preferensi saat dicentang.
  • android:disableDependentsState: State (berlaku untuk on, atau false untuk off) yang menyebabkan dependents dinonaktifkan. Mungkin nilai boolean, seperti 'true' atau 'false'.

Switch Preference

SwitchPreference melakukan fungsi serupa dengan CheckBoxPreference. Ini menyediakan pilihan dua state  ('on' atau 'off') yang dapat diganti. Ini menggunakan widget Switch yang memungkinkan pengguna meluncur ke kiri ('off') dan kanan ('on'). Preference ini juga mencakup atribut yang dijelaskan untuk CheckBoxPreference di atas. Selain itu, ia memiliki atribut berikut:

  • android:switchTextOff: set teks yang digunakan pada switch itu sendiri saat berada dalam status 'off'.
  • android:switchTextOn: set teks yang digunakan pada switch itu sendiri saat berada di status 'on'.
SwitchPreference

EditText Preference

Preference ini, saat diklik, menunjukkan dialog agar pengguna memasukkan teks masukan. Ini menggunakan widget EditText termasuk semua atribut widget yang sudah familiar.

Perhatikan bahwa nilai yang tersimpan dalam SharedPreferences adalah string.

EditTextPreference

List Preference

Jenis Preference ini akan menampilkan daftar entri dalam dialog saat disadap. Di sini, Anda dapat menentukan sepasang sumber daya array-string dalam XML preferensi Anda. Sumber array-string ini hanya berisi kumpulan string. Sumber daya ini terletak pada res/values/arrays.xml.

Berikut adalah contoh kami ListPreference menggunakan sumber ini.

Kami menetapkan entri dan nilai entri menggunakan entri android:entries and android:entryValues ​​masing-masing.

  • android:entries: array yang dapat dibaca manusia untuk ditampilkan sebagai daftar.
  • android:entryValues: array untuk menemukan nilai yang akan disimpan untuk preferensi ketika entri dari entri yang dipilih.
ListPreference dialog when clicked

Misalnya, jika kita menggunakan jumlah menit dalam setiap durasi sebagai nilai masuk, saat pengguna memilih durasi waktu (misalnya 30 menit), nilai integer yang sesuai akan disimpan dalam SharedPreferences (misalnya 30).

MultiSelect List Preference

Yang ini mirip dengan ListPreference tapi bukannya memiliki tombol radio, kami memiliki check boxes. Dengan kata lain, pengguna dapat memilih beberapa item dalam dialog. Perhatikan bahwa hasilnya disimpan dalam 'rangkaian string' dalam SharedPreferences. Ini dapat diambil dengan menggunakan getStringSet().

Ringtone Preference

Saat RingtonePreference diketuk, sebuah dialog ditampilkan berisi daftar nada dering yang tersedia pada perangkat atau emulator.

  • android:showDefault: apakah opsi Default ringtone akan ditampilkan.
  • android:showSilent: apakah opsi Silent akan ditampilkan dalam daftar. Pengguna dapat memilih opsi ini jika mereka tidak ingin memutar nada dering apapun.
RingtonePreference

Perhatikan bahwa nilai yang tersimpan dalam SharedPreferences untuk preferensi ini adalah string khusus. String khusus ini adalah URI yang mengarah ke ContentProvider.

4. Membuat Setting Groups

Ini menjadi masalah saat Anda memiliki daftar preferensi atau pengaturan yang panjang, karena pengguna mungkin mengalami masalah dalam pemindaian atau pemahaman mereka. Untuk mengatasi masalah ini, kita bisa mengelompokkan preferensi kita. Lihatlah tangkapan layar aplikasi Chrome yang saya tunjukkan di awal lagi-perhatikan bahwa ini mengelompokkan preferensi menjadi dua kategori: Basics dan Advanced. Hal ini memudahkan pengguna untuk memahami preferensi dan untuk tidak membuat daftar sepertinya terlalu berlebihan.

Sekarang mari kita lihat betapa sederhananya melakukan tugas ini.

Kami hanya mengelilingi preferensi yang ingin kami kelompokkan dalam sebuah tag <PreferenceCategory> dan beri masing-masing kelompok judul menggunakan atribut android:title.

Preferences grouped with PreferenceCategory

5. Memulai Intent

Perhatikan bahwa mungkin membuka aktivitas hanya dengan mengklik item preferensi dari layar pengaturan. Ini bisa berguna saat Anda ingin membuka halaman web. Inilah kode untuk melakukan itu:

Di sini, kami menambahkan elemen <intent> di dalam elemen <Preference>.

  • android:action: set action untuk Intent (ini mirip dengan memanggil setAction() pada objek Intent).
  • android:targetClass: menetapkan bagian kelas dari nama komponen (sama seperti memanggil setComponent() pada objek Intent).
  • android:targetPackage: mengatur bagian paket dari nama komponen.
  • android:data: mengatur data untuk ditetapkan (sama seperti memanggil setData() pada objek Intent).

Untuk membuka halaman web, untuk contoh, Anda bisa menggunakan yang berikut ini:

6. Mengikat Ringkasan Preferensi dengan Nilai yang Dipilih

Sekarang mari kita lihat bagaimana cara memperbarui ringkasan preferensi dengan nilai yang dipilih oleh pengguna.

Di kelas ini, kami membuat metode pembantu yang disebut bindPreferenceSummaryToValue(), yang berada di dalam objek pendamping kami, untuk memperbarui teks ringkasan preferensi dengan nilai yang telah dipilih pengguna. Kami melewatinya objek Preference sebagai argumen. findPreference() akan mengembalikan Preference dengan menggunakan tombol Preference.

Kami memiliki variabel sBindPreferenceSummaryToValueListener yang merupakan instance dari Preference.OnPreferenceChangeListener. Ini hanyalah listener perubahan pilihan yang akan membantu kita memperbarui ringkasan preferensi dengan nilai yang telah dipilih pengguna. Kami memeriksa kasus khusus, seperti saat preferensi yang dipilih adalah RingtonePreference atau ListPreference. Untuk tipe preferensi tersebut, kami melakukan beberapa penanganan khusus untuk mendapatkan ringkasan string. Jika preferensi tidak (seperti EditTextPreference), kami hanya mengatur ringkasan ke nilai string preferensi.

Di dalam bindPreferenceSummaryToValue(), kami mengatur listener perubahan preferensi dengan memanggil onPreferenceChangeListener (di Java, itu setOnPreferenceChangeListener sebagai gantinya) pada objek Preference.

Sekarang jalankan proyek lagi untuk melihat bagaimana semuanya berjalan!

Settings screen showing changed summary in response to selection

7. Mengambil Nilai Preferensi

Untuk mulai mendapatkan nilai preferensi untuk layar pengaturan, kita memanggil getDefaultSharedPreference() yang ada di dalam kelas PreferenceManager melewatinya objek Context dari preferensi yang nilainya diinginkan. Perhatikan bahwa kami mendapatkan nilai dari SharedPreferences default untuk aplikasi kami.

Anda memanggil metode pengambil yang sesuai untuk tipe yang ingin kami ambil nilainya dari dalam SharedPreferences. Anda melewatinya sebagai argumen pertama, dan nilai defaultnya adalah argumen kedua.

8. Bonus: Menggunakan Template Android Studio

Sekarang setelah Anda mengetahui tentang API yang terlibat untuk membuat layar pengaturan dari awal di Android, saya akan menunjukkan jalan pintas yang akan membuatnya lebih cepat waktu berikutnya. Anda bisa memilih untuk menggunakan template daripada mengkodekan layar pengaturan dari awal.

Android Studio menyediakan template kode yang mengikuti praktik desain dan pengembangan terbaik Android. Template kode yang ada ini (tersedia di Java dan Kotlin) dapat membantu Anda memulai proyek Anda dengan cepat. Salah satu template tersebut bisa digunakan untuk membuat setting layar.

Untuk menggunakan fitur praktis ini untuk sebuah proyek baru, pertama jalankan Android Studio.

Android Studios Create Android Project dialog

Masukkan nama aplikasi dan klik tombol Next. Anda dapat meninggalkan defaultnya seperti pada dialog Target Android Devices.

Klik tombol Next lagi.

Android studios Add an Activity to Mobile dialog

Dalam dialog Add a Activity to Mobile, scroll ke bawah dan pilih Settings Activity. Klik tombol Next setelah itu.

Android Studios Configure Activity dialog

Pada dialog terakhir, Anda bisa mengganti nama Activity name, nama atau judul layout jika Anda mau. Akhirnya, klik tombol Finish untuk menerima semua konfigurasi.

Android Studio kini telah membantu kami membuat proyek dengan setting activity. Benar-benar keren! Anda sangat disarankan untuk mengeksplorasi kode yang dihasilkan.

Anda juga bisa menggunakan template untuk proyek Android Studio yang sudah ada. Cukup masuk ke File > New > Activity > Settings Activity.

Navigation flow to creating a new settings activity in Android Studio

Perhatikan bahwa template yang disertakan dengan Android Studio bagus untuk layout sederhana dan membuat aplikasi dasar, namun jika Anda ingin benar-benar memulai aplikasi Anda, Anda mungkin mempertimbangkan beberapa template aplikasi yang tersedia dari Envato Market.

Mereka menghemat waktu untuk developer berpengalaman, membantu mereka memotong seluk beluk pembuatan aplikasi dari nol dan memfokuskan minat mereka alih-alih pada bagian unik dan disesuaikan untuk membuat aplikasi baru.

Kesimpulan

Dalam tutorial ini, Anda belajar bagaimana membuat setting aplikasi di Android dari awal. Kami juga menjelajahi cara mudah dan cepat menggunakan template Android Studio untuk membuat setelan aplikasi.

Saya sangat merekomendasikan untuk memeriksa pedoman desain materi resmi untuk settings untuk mengetahui lebih lanjut tentang cara merancang dan menggunakan setelan di Android dengan benar. Juga, lihat panduan API resmi untuk mempelajari lebih lanjut tentang API lain untuk membuat aktivitas pengaturan.

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


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.