Custom ToolBar dan SearchView Filter RecyclerView

https://github.com/kzu404/ToolBar-dan-SearchView

Sumber: Material Design

Custom Toolbar Android Studio

Kali ini kita akan membahas 2 sekaligus tutorial dalam Android Studio yaitu, Custom ToolBar dan SearchView Filter RecyclerView dikarnakan kedua hal ini sering digunakan bersamaan.

Pada dasarnya setiap aplikasi yang kita bikin akan memiliki yang namanya ActionBar atau AppBar, dengan adanya AppBar yang diterapkan secara baik akan memberikan user experience yang baik pula.  AppBar biasanya miliki icon aplikasi atau hamburger menu, nama aplikasi atau Activity, icon search dan menu lainnya.

Apa itu toolbar? toolbar merupakan sebuah viewgroup pengganti dari ActionBar yang fleksibel sehingga lebih baik karna dapat kita custom sendiri.

Latihan

Option Menu

Kali ini kita tidak perlu membuat project baru melainkan kita akan menlanjutkan dengan project dari Tutorial Android Studio RecyclerView Kotlin karna kita tidak hanya akan menambahkan Custom Toolbar melainkan juga fitur SearchView Filter RecyclerView.

Custom ToolBar dan SearchView Filter RecyclerView

Buka kembali project Latihan RecyclerView sebelumnya lalu klik kanan pada folder res > New > Android Resource Directory > pilih type Menu kemudian OK, setelah itu akan terbuat sebuah folder baru bernama menu pada di dalam folder res.

Buatlah file menu.xml pada folder menu dengan cara klik kanan > Menu Resource File dan beri nama menu, setelah selesai sesuaikan dengan kode yang akan saya sediakan dibawah. Jika ada error pada menu.xml bagian android:icon itu dikarenakan belum menambahkan icon pada drawable , silahkan klik kanan pada folder drawable > vector asset > klik pada clip art kemudian pilih icon yang di inginkan dan sesuaikan namanya.

Custom ToolBar dan SearchView Filter RecyclerView

Sekarang saatnya kita mengubah main_activity.xml untuk menambahkan Toolbar silahkan sesuaikan kodenya seperti dibawah, kemudian buka class MainActivity dan sesuaikan juga kodenya. Jika mengininkan warna seperti yang saya buat silahkan tambahkan kode warna pada file colors.xml di dalam folder value dan sesuaikan juga pada file themes.xml pada folder theme.

SearchView Filter RecyclerView

Jika semua tahap sudah di lakukan dengan benar project kali ini sudah selesai namun kita akan membuat fitur Search pada RecyclerView kita hanya akan menambahkan sedikit kode pada bagian MainActivity dan FoodAdapter berikut adalah kodenya:

UI Custom ToolBar dan Filter SearchView Recyclerview

Penjelasan

Pada class MainActivity terdapat kode setSupportActionBar(bind.toolbar) yang bertujuan mengganti ActionBar default ke ToolBar, selain itu kita juga mengubah menjadi Theme.MaterialComponents.DayNight.NoActionBar pada file themes.xml untuk menghilangkan ActionBar defaultnya.

onCreateOptionsMenu berfungsi untuk menentukan file menu yang akan di tampilkan, dan juga letak dimana kita melakukan inisialisasi serta listener pada SearchView.

pada setOnQueryTextListener terdapat onQueryTextSubmit yang akan melakukan aksi saat terjadi sumbit pada SearchView sedangkan onQueryTextChange aksi saat terjadi perubahan input dalam SearchView.

onOptionsItemSelected adalah metode digunakan untuk menghandle aksi pada menu di ToolBar yang kita buat tadi, sebagai contoh disini saya hanya memunculkan Toast saat diklik kalian bisa menggantinya dengan Intent untuk berpindah ke Activity lain.

pada FoodAdapter terdapat fungsi baru yaitu getFilter() disinilah proses filter dilakukan, selain itu kita juga menggubah pada onBindViewHolder dan getItemCount agar hasil filter ditampilkan ke dalam RecyclerView.

Sejauh ini kalian telah berhasil membuat menambahkan ToolBar dan Option Menu serta Search pada RecyclerView, kedepannya kita akan mempelajari lebih banyak hal menarik lainnya tentang Android Studio.

Download Source Custom ToolBar dan SearchView Filter RecyclerView

Link referensi: