top of page

Membuat Fitur Pencarian pada Fragment yang Memiliki Beberapa Tab/ViewPager

  • M Faisal Mazidnianto
  • May 18, 2017
  • 2 min read

Fitur pencarian adalah fitur yang cukup berguna karena kita dapat mencari satu atau beberapa objek di dalam sekumpulan banyak objek secara cepat sehingga fitur ini banyak digunakan di berbagai aplikasi berbasis mobile app. Pada post lain yang berjudul "Easy to Search in RecycleView" teman saya telah membicarakan bagaimana membuat fitur search pada recycleview, namun disitu teman saya hanya membuat fitur search pada fragment biasa. Oleh karena itu, pada kesempatan ini saya ingin memberitahu bagaimana cara membuat fitur pencarian pada fragment yang terdapat viewpager atau terdapat beberapa tab fragment didalamnya.

Pada tutorial kali ini saya akan memberikan contoh pada fragment yang memiliki ke dua tab fragment.

Berikut ini adalah hasil yang diharapkan setelah mengikuti tutorial ini

Pertama

Kalian harus membuat icon search sesuai yang kalian inginkan, kemudian kalian taruh di folder drawable

Kedua

Kalian harus membuat file .xml pada folder menu yang mana file tersebut berisi sebagai berikut

Ketiga

tambahkan method setFilter pada adapter yang kalian gunakan seperti dibawah in

Keempat

Kalian harus meng-overide method onCreateOptionsMenu pada ke dua tab fragment tersebut menjadi seperti dibawah

1) Pada fragment pertama (riwayatBarangKeluar)

2) Pada fragment kedua (riwayatBarangMasuk)

Pada contoh di atas saya ingin pencarian dilakukan seiring pengguna mengetik kata kunci sehingga saya mengubah onQueryTextChange dan membuat onQueryTextSubmit me-return nilai false, jika kalian ingin pencarian dilakukan saat pengguna telah menekan enter maka kalian harus mengubah onQueryTextSubmit dan membuat onQueryTextChange me-return nilai false

Kelima

Pada onCreateView di masing-masing tab fragment panggil method setHasOptionMenu seperti dibawah agar tombol search dapat ditampilkan pada toolbar

Keenam

Kalian implementasi dari fitur pencarian tersebut dengan membuat method filter sehingga apabila pengguna mengetik suatu kata kunci maka yang ditampilkan hanya baris-baris yang kontennya terdapat kata kunci tersebut.

1) Pada fragment pertama (riwayatBarangKeluar), karena yang ditampilkan pada baris-baris yang terdapat pada riwayat barang keluar adalah nama barang, kode pemesanan, dan tanggal keluar, maka saya hanya mem-filter kata kunci berdasarkan ketiga aspek tersebut

2) Pada fragment kedua (riwayatBarangMasuk), karena yang ditampilkan pada baris-baris yang terdapat pada riwayat barang masuk adalah nama barang, kode pemesanan, dan tanggal masuk, maka saya hanya mem-filter kata kunci berdasarkan ketiga aspek tersebut

Demikian tutorial dari saya, semoga bermanfaat.

Salam,

M Faisal Mazidnianto


Comments


© 2017 by GoodangCode

Subscribe for Goodang Team Updates!

bottom of page