Belajar Membuat Halaman Settings pada Aplikasi Android

Setiap Aplikasi yang kita install dan gunakan ,biasanya terdapat halaman settings ,dibagian menu yang disediakan oleh developer itu sendiri. Halaman settings berguna untuk memodifikasi fitur dan perilaku yang terdapat pada aplikasi tersebut.  Salah satu contoh kasusnya , seperti yang terdapat pada Aplikasi WhatsApp. Pada aplikasi tersebut , terdapat  halaman Setting ,yang berfungsi untuk merubah icon photo profil , status saat ini , nama akun dan notifikasi , dan lain sebagainya. Nah ,pada tutorial belajar android kali ini ,kita akan mencoba membuat contoh halaman setting sederhana ,pada Aplikasi Android ,dengan menggunakan Android Studio. Berikut mari kita simak lebih lanjut :

1. Pertama-tama , pastinya kita buka program Android Studio ,yang ada di Komputer atau Laptop kita.

2. Sebenarnya ,saat kita ingin membuat project baru. Sudah tersedia template untuk Settings Activity ,di Android Studio. Namun ,disini kita akan mencoba membuatnya secara manual. Jadi kita menggunakan Empty Activity ,seperti biasanya.

Add an Activity to Mobile

3. Disini untuk mengatur konten tampilan, halaman setting mempunyai file xml tersendiri . Kita mengaturnya pada folder res -> xml -> file xml , jadi bukan  folder res -> layout - file xml .

Untuk membuat folder xml ,kita bisa lakukan dengan cara klik kanan pada folder res -> New -> pilih Android resource directory.

Android resource directory

Lalu pada bagian resource type , pilih xml. Jika sudah pilih tombol OK.

New Resource Directory

Untuk membuat file xmlnya , kita klik kanan pada folder xml  -> New -> pilih XML resource file.

XML resource file

Pada bagian new resource file ,kita beri nama halaman_settings , pada kolom file name. Atau kalian juga bisa tentukan namanya sendiri. Jika sudah pilih tombol OK.

New Resource File

4. Sama halnya saat kita , ingin mendesign layout xml.  Pada halaman_settings.xml , kita juga dapat mendesign tampilanya. Namun , khusus untuk komponen view yang tersedia pada bagian Setttings.


Contoh tampilanya kira-kira akan seperti ini:

halaman_settings.xml

strings.xml



Contoh Code XML:

Penjelasan :

Seperti yang kalian lihat ,pada contoh code diatas. Kita dapat membuat kategori dengan menggunakan  PreferenceCategory dengan atribut title ,yang valuenya berisi judul dari setiap kategori.

Lalu kita dapat menggunakan komponen view, seperti switch dan checkbox ,dengan menggunakan SwitchPreference dan CheckBoxPreference.

Terdapat atribut defaultvalue , yang digunakan untuk menentukan nilai tampilan awal , saat Aplikasi di jalankan pertama kali. Lalu terdapat atribut key , yang akan digunakan untuk  , mengambil nilai dari komponen view pada layout xml ,saat kita coding pada bagian file java. Sama seperti fungsi dari atribut onClick , pada button di layout.xml.

Untuk membuat menu text ,kita bisa menggunakan Preference , dan juga atribut summary ,untuk isi ringkasan dari menu tersebut.



5. Selanjutnya kita buat Activity baru ,yang digunakan untuk memuat Fragment dari Halaman Settings. Dengan cara klik kanan pada package , pilih New  -> Activity -> Empty Activity.

Empty Activity

Lalu pada bagian Configure Activity kalian bisa beri nama  pada Activity,  yaitu  SettingsActivity dan layout activity_settings . Jika sudah pilih tombol Finish.

Configure Activity

6. Karena kita disini , akan mengakses halaman setting ,lewat menu setting pada pojok kanan layar Aplikasi. Untuk itu , kita buat terlebih dahulu menu layout , dengan cara klik kanan pada folder res -> pilih New - > Android resource file.

Android resource file

Pada bagian New resource file , kita beri nama file menu_main ,dan juga pilih resource type Menu.  Jika sudah pilih tombol OK.

Menu New Resource file

7. Disini juga kita bisa mengatur design , pada  menu_main.xml . 


Contoh tampilanya  akan seperti ini:

menu_main.xml

Contoh code xml:



Penjelasan :

Pada contoh code diatas ,untuk membuat menu ,kita bisa menggunakan komponen Item ,dengan atribut seperti id  sebagai identifier , orderInCategory untuk urutan menu ketika ditampilkan , dan showsAction , untuk bentuk tampilan menu.



8. Setelah itu , kita buat Fragment baru , yang akan kita gunakan untuk coding logic , pada halaman settings.xml.


Klik kanan pada package  , lalu pilih New  -> Fragment - > Fragment(Blank).

New Fragment

Pada bagian Configure Component , kita isi nama fragment , beserta layout yang akan ditampilkan.
Jika sudah pilih tombol Finish.

Configure Component

9. Pada MainActivity.java , disini kita akan membuat option menu , yang digunakan untuk mengakses halaman settings. Berikut contoh codenya :



Contoh Code :



Penjelasan :


Pada contoh code diatas , method override onCreateOptionsMenu() ,digunakan untuk membuat option menu yang dimana,  diambil dari menu layout ,yang telah kita buat sebelumnya.


Nah , jika method override onOptionsItemSelected , digunakan untuk mengakses berdasarkan id ,  dan menampilkan aksi ,ketika salah satu option menu dipilih. Sebagai  contoh code diatas ,kita akan membuka Activity baru yaitu SettingsActivity ,  dengan menggunakan objek Intent.



Untuk layout activity_main.xml  ,kalian boleh isi apa saja. Karena disini kita tidak fokus pada layout ini.


10. Kemudian ,kita lanjut ke file java SettingsActivity , dan juga layout activity_settings.

Karena disini kita akan menggunakan Fragment , sebagai tumpuan untuk tampilan dan logic dari halaman settings. Pada layout activity_settings , kita cukup gunakan FrameLayout sebagai root layout.


activity_settings.xml



SettingsActivity.java



Penjelasan:

Pada contoh code diatas ,kita menggunakan getFragmentManager() , untuk mengambil nilai dari objek FragmentManager , untuk mengatur objek Fragment. Untuk mulai menangani Fragment ,kita gunakan method  .beginTransaction() . Disini kita gunakan replace() , untuk menggantikan layout dari activity_settings.xml ,  sebagai fragment baru yang akan di akses ,yaitu SettingsFragment().  Lalu method commit() untuk memasangnya.


12. Setelah itu , kita lanjut ke bagian Fragment baru ,yang telah kita buat sebelumnya,  yaitu SettingsFragment. Berikut contoh codenya :



SettingsFragment



Penjelasan :

Pada contoh code diatas , kita mewarisi (extends) class PreferenceFragment , yang dimana SettingsFragment , dikhususkan untuk memuat objek-objek , yang digunakan untuk halaman settings.

Salah satu perbedaannya dengan Fragment biasa yang kita buat , disini kita menggunakan method override onCreate , yang didalamnya terdapat method addPreferencesFromResource , dan juga method  settingPref().

Method addPreferencesFromResource , digunakan untuk menampilkan layout xml yang telah kita buat, yang berlokasi di folder resource -> xml - file halaman_settings.xml. Jadi disini kita tidak menggunakan fragment_settings.xml


Method   settingPref()  , sebagai method kosong yang tidak mengembalikan nilai . Digunakan untuk membuat objek , dan melakukan listener , pada tiap komponen view dari halaman settings, yang telah di definisikan sebelumnya.

Disini kita membuat 3 objek , seperti  aboutPref  , checkboxPref , dan switchPref.  Ketiganya akan mengambil key ,yang telah didefinisikan sebelumnya ,pada strings.xml , yang berlokasi di folder resource -> values.

Pada objek  aboutPref  kita menggunakan  setOnPreferenceClickListener . Digunakan untuk menampilkan aksi ketika , komponen view dipilih. Sebagai contoh disini akan menampilkan pesan text toast.

Pada objek checkboxPref dan switchPref. Keduanya menggunakan  .setOnPreferenceChangeListener.  Digunakan untuk menampilkan aksi ,pada setiap perubahan dari nilai true dan false. Seperti contoh , ketika Switch atau Checbox , dipilih akan menampilkan pesan text hidup yang bernilai true. Sebaliknya jika tidak ,  akan menampilkan pesan text mati yang bernilai false.

13. Terakhir , karena kita ingin menampilkan tombol navigasi back pada toolbar , maka kita tambahkan atribut parentActivityName pada .SettingsActivity , dalam AndroidManifest.xml.




14. Setelah selesai semua,  sekarang kita coba jalankan Aplikasinya. Hasilnya kira-kira akan seperti di video berikut :

Location:

Share :