Cara Membuat SearchView dengan Kotlin: Panduan Lengkap untuk Android Developer

Fitur pencarian adalah elemen krusial dalam hampir setiap aplikasi Android modern. Dari daftar kontak hingga katalog produk, kemampuan untuk menemukan informasi dengan cepat meningkatkan pengalaman pengguna secara signifikan. Di Android, salah satu komponen UI yang paling umum digunakan untuk fungsionalitas pencarian adalah SearchView.

Sebagai seorang developer Android, Anda mungkin sering berhadapan dengan kebutuhan untuk mengimplementasikan fungsionalitas ini. Masalah yang sering muncul adalah bagaimana mengintegrasikan SearchView dengan baik, mengelola input pengguna, dan melakukan filter data secara efisien, terutama saat berhadapan dengan data dinamis seperti yang ditampilkan dalam RecyclerView.

Artikel ini akan memandu Anda secara mendalam tentang cara membuat dan mengimplementasikan SearchView menggunakan Kotlin. Kita akan membahas dari dasar penambahan ke layout hingga logik filtering data yang efektif, memastikan aplikasi Anda memiliki fitur pencarian yang responsif dan intuitif. Mari kita selami bagaimana developer modern mengintegrasikan fitur esensial ini.

Persiapan Awal

Sebelum kita mulai, pastikan Anda memiliki lingkungan pengembangan yang siap:

• Android Studio: Versi terbaru akan selalu lebih baik.
• Pengetahuan Dasar Kotlin: Pemahaman sintaks dasar dan konsep OOP di Kotlin.
• Pengetahuan Dasar Android: Pemahaman tentang Activity, Fragment, Layout XML, dan RecyclerView akan sangat membantu.

Kita akan memulai dengan proyek Android kosong dan menambahkan komponen yang diperlukan.

Menambahkan SearchView ke Layout Aplikasi

Langkah pertama adalah menambahkan SearchView ke layout XML Activity atau Fragment Anda. SearchView biasanya diletakkan di Toolbar atau AppBar agar mudah diakses oleh pengguna. Namun, untuk kesederhanaan, kita akan menempatkannya langsung di layout utama.

Struktur Layout XML

Buka file layout Activity utama Anda (misalnya, activity_main.xml). Kita akan menambahkan SearchView dan RecyclerView di dalam LinearLayout atau ConstraintLayout.

Contoh penambahan SearchView:

Pertama, pastikan Anda menggunakan namespace yang benar. Kemudian, definisikan SearchView. Anda bisa menyesuaikan atributnya sesuai kebutuhan, seperti android:iconifiedByDefault untuk menentukan apakah SearchView ikonified (terkecil) secara default atau langsung terbuka.

Di dalam file activity_main.xml, tambahkan kode seperti ini:

• Definisikan SearchView dengan ID unik (misalnya, @+id/search_view).
• Setel android:layout_width="match_parent" agar memenuhi lebar parent.
• Setel android:layout_height="wrap_content".
• Untuk tampilan yang lebih rapi, Anda bisa menambahkan margin atau padding.

Di bawah SearchView, kita akan menambahkan RecyclerView untuk menampilkan daftar item yang akan kita filter. Berikan RecyclerView ID yang unik juga, misalnya @+id/recycler_view.

Contoh Layout XML (activity_main.xml):

Bayangkan struktur XML-nya kurang lebih seperti ini:

• ConstraintLayout sebagai root layout.
• SearchView dengan id="@+id/search_view", diatur agar berada di bagian atas.
• RecyclerView dengan id="@+id/recycler_view", diatur agar berada di bawah SearchView dan memenuhi sisa ruang.

Pastikan SearchView menggunakan implementasi dari AndroidX, yaitu androidx.appcompat.widget.SearchView, bukan android.widget.SearchView untuk kompatibilitas yang lebih baik.

Menginisialisasi dan Mengelola SearchView di Kotlin

Setelah SearchView ditambahkan ke layout, langkah selanjutnya adalah menginisialisasinya di kode Kotlin Anda dan menambahkan listener untuk menangani input pencarian.

Data Model dan Adapter untuk RecyclerView

Agar SearchView memiliki sesuatu untuk difilter, kita akan membuat model data sederhana dan RecyclerView.Adapter.

Data Model (Item.kt):

Buat kelas data bernama Item. Kelas ini bisa memiliki properti seperti id (Int) dan name (String).

RecyclerView Adapter (ItemAdapter.kt):

Buat RecyclerView.Adapter standar. Adapter ini akan memiliki konstruktor yang menerima daftar Item dan menyediakan metode untuk memperbarui daftar item (misalnya, metode updateList) setelah proses filtering.

• Buat ViewHolder untuk menampung tampilan satu item (misalnya, TextView untuk menampilkan nama item).
• Implementasikan metode onCreateViewHolder, onBindViewHolder, dan getItemCount.
• Tambahkan properti private var items = mutableListOf() untuk menyimpan daftar saat ini.
• Buat fungsi fun updateList(newList: List) yang akan mengupdate properti items dan memanggil notifyDataSetChanged().

Menginisialisasi di MainActivity (MainActivity.kt)

Di dalam MainActivity.kt, setelah layout di-inflate, kita perlu:

1. Mendapatkan referensi ke SearchView dan RecyclerView menggunakan findViewById.
2. Menyiapkan RecyclerView dengan LinearLayoutManager dan ItemAdapter.
3. Menambahkan data dummy ke adapter.
4. Mengatur OnQueryTextListener untuk SearchView.

Contoh langkah-langkah dalam MainActivity.kt:

• Di dalam metode onCreate, inisialisasi searchView dan recyclerView.
• Siapkan daftar item dummy, misalnya “Apple”, “Banana”, “Cherry”, “Date”, “Elderberry”.
• Inisialisasi ItemAdapter dengan daftar item ini dan atur ke recyclerView.

Mengimplementasikan OnQueryTextListener

Ini adalah bagian inti dari fungsionalitas pencarian. OnQueryTextListener memiliki dua metode yang perlu diimplementasikan:

• onQueryTextSubmit(query: String?): Boolean: Dipanggil ketika pengguna menekan tombol “submit” pada keyboard (biasanya ikon kaca pembesar).
• onQueryTextChange(newText: String?): Boolean: Dipanggil setiap kali teks dalam SearchView berubah. Ini adalah tempat kita akan melakukan filter data secara real-time.

Anda bisa mengatur listener ini ke SearchView dengan memanggil searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {}). Di dalam objek anonim ini, implementasikan kedua metode.

Logika Filtering Data

Di metode onQueryTextChange, kita akan mengambil teks pencarian yang baru, melakukan filter pada daftar item asli, dan kemudian memperbarui RecyclerView dengan hasil filter.

• Ambil newText. Pastikan untuk menanganinya sebagai string yang tidak null dan ubah menjadi huruf kecil untuk pencarian case-insensitive.
• Buat daftar baru (filteredList).
• Iterasi melalui daftar item asli Anda. Jika nama item (setelah diubah ke huruf kecil) mengandung newText (setelah diubah ke huruf kecil), tambahkan item tersebut ke filteredList.
• Setelah filtering selesai, panggil metode updateList pada ItemAdapter Anda dengan filteredList yang baru.
• Metode onQueryTextSubmit bisa digunakan untuk menyembunyikan keyboard atau melakukan tindakan lain setelah pencarian selesai. Untuk contoh ini, kita bisa mengembalikannya sebagai false.

Dengan cara ini, setiap kali pengguna mengetik satu huruf, daftar di RecyclerView akan langsung diperbarui, memberikan pengalaman pencarian yang dinamis.

Menangani Query Submission dan Close

Metode onQueryTextSubmit dipanggil ketika pengguna secara eksplisit “mengirimkan” pencarian, biasanya dengan menekan tombol Enter atau ikon pencarian pada keyboard. Anda bisa menggunakannya untuk menyimpan riwayat pencarian, menavigasi ke layar hasil, atau menyembunyikan keyboard.

Untuk menyembunyikan keyboard secara manual:

• Dapatkan InputMethodManager.
• Panggil hideSoftInputFromWindow pada currentFocus?.windowToken.

Selain itu, SearchView juga memiliki listener untuk event “close”, yaitu searchView.setOnCloseListener. Ini berguna jika Anda ingin mengembalikan daftar ke kondisi semula (tidak terfilter) ketika pengguna menutup SearchView.

• Di dalam onClose, Anda bisa memanggil adapter.updateList(originalList) untuk menampilkan semua item lagi.

Best Practices untuk SearchView

Mengimplementasikan SearchView tidak hanya tentang membuat fungsionalitasnya berjalan, tetapi juga tentang memberikan pengalaman pengguna yang optimal.

1. Debouncing Input Pencarian

Jika Anda memiliki daftar yang sangat besar, memfilter data setiap kali pengguna mengetik satu huruf dapat memakan banyak sumber daya dan membuat UI terasa lambat. Teknik debouncing dapat membantu. Ini berarti Anda hanya akan memicu proses filter setelah pengguna berhenti mengetik selama jangka waktu tertentu (misalnya, 300-500 milidetik).

Implementasi debouncing bisa dilakukan dengan Handler atau, yang lebih modern, dengan Coroutines dan Flow di Kotlin. Ini akan secara signifikan mengurangi jumlah pembaruan RecyclerView yang tidak perlu.

2. Pencarian Case-Insensitive dan Trim Whitespace

Selalu ubah input pencarian dan teks yang difilter menjadi huruf kecil (.lowercase()) agar pencarian tidak sensitif terhadap huruf besar/kecil. Selain itu, gunakan .trim() untuk menghapus spasi di awal dan akhir input pencarian agar hasil lebih akurat.

3. Memberikan Feedback Visual

Saat data difilter, jika proses memakan waktu, pertimbangkan untuk menampilkan ProgressBar. Jika tidak ada hasil, tampilkan pesan seperti “Tidak ada hasil ditemukan” agar pengguna tahu bahwa pencarian telah selesai dan tidak ada kecocokan.

4. Mempertahankan Status Pencarian

Jika Activity/Fragment di-recreate (misalnya karena perubahan orientasi), pastikan SearchView mempertahankan teks pencarian terakhir. Anda bisa menyimpan teks di ViewModel atau menggunakan onSaveInstanceState.

5. Membedakan antara onQueryTextSubmit dan onQueryTextChange

Pahami perbedaan fungsionalitas keduanya. onQueryTextChange untuk real-time filtering, sedangkan onQueryTextSubmit untuk aksi final atau pencarian “resmi”.

Masalah yang Sering Terjadi

Dalam praktiknya, mengimplementasikan SearchView terkadang tidak semulus yang dibayangkan. Berikut beberapa masalah umum yang sering dihadapi developer:

1. SearchView Tidak Terbuka Otomatis

• Gejala: SearchView muncul sebagai ikon kaca pembesar dan tidak langsung membuka kolom input teks saat Activity dimulai.
• Penyebab: Atribut android:iconifiedByDefault="true" (yang merupakan default) membuat SearchView dimulai dalam mode ikon.
• Solusi: Setel searchView.setIconifiedByDefault(false) di kode Kotlin Anda atau android:iconifiedByDefault="false" di XML. Anda mungkin juga perlu memanggil searchView.requestFocusFromTouch() untuk langsung memunculkan keyboard.

2. Performa Filtering Lambat pada Dataset Besar

• Gejala: Aplikasi terasa ‘hang’ atau lambat saat pengguna mengetik, terutama jika daftar item sangat banyak.
• Penyebab: Melakukan operasi filtering pada thread UI untuk setiap perubahan teks dapat memblokir UI.
• Solusi:
  1. Debouncing: Seperti yang dijelaskan di Best Practices, tunda eksekusi filter sampai jeda pengetikan.
  2. Background Thread: Lakukan filtering di background thread (menggunakan Coroutines atau RxJava) agar UI tetap responsif.
  3. Optimasi Algoritma: Untuk dataset yang sangat besar, pertimbangkan struktur data yang lebih efisien atau algoritma pencarian yang lebih cepat.

3. RecyclerView Tidak Diperbarui Setelah Filtering

• Gejala: Logika filtering sudah benar, tetapi tampilan RecyclerView tidak berubah.
• Penyebab: Lupa memanggil adapter.notifyDataSetChanged() atau adapter.notifyItemRangeChanged() setelah memperbarui daftar di adapter.
• Solusi: Pastikan metode updateList di adapter Anda memanggil notifyDataSetChanged() setelah properti daftar item di dalamnya diperbarui. Jika Anda menggunakan DiffUtil untuk optimasi, pastikan Anda memanggil DiffResult.dispatchUpdatesTo(adapter).

4. Keyboard Tidak Menutup Otomatis

• Gejala: Setelah pencarian selesai atau pengguna menekan “submit”, keyboard virtual tetap terbuka.
• Penyebab: Android tidak selalu secara otomatis menyembunyikan keyboard setelah interaksi SearchView.
• Solusi: Panggil kode untuk menyembunyikan keyboard secara manual di onQueryTextSubmit atau ketika Anda merasa keyboard sudah tidak diperlukan.

5. Masalah Kompatibilitas SearchView

• Gejala: SearchView tidak berfungsi dengan baik atau terlihat aneh pada versi Android yang berbeda.
• Penyebab: Menggunakan android.widget.SearchView bukan androidx.appcompat.widget.SearchView, atau masalah tema/style.
• Solusi: Selalu gunakan androidx.appcompat.widget.SearchView untuk kompatibilitas terbaik. Pastikan tema aplikasi Anda konsisten dan tidak ada gaya yang bertentangan.

Pengalaman dan Pertimbangan Praktis

Sebagai seorang developer yang telah beberapa kali mengimplementasikan SearchView di berbagai proyek, ada beberapa pertimbangan yang sering muncul:

Kapan Menggunakan SearchView Built-in?

SearchView dari AndroidX sangat cocok untuk kebutuhan pencarian sederhana hingga menengah di mana Anda ingin memfilter daftar di layar yang sama. Misalnya, daftar kontak, daftar pengaturan, atau daftar item statis.

Dalam pengujian saya, untuk daftar hingga ribuan item, SearchView dengan debouncing dan filtering di background thread sudah lebih dari cukup dan memberikan pengalaman yang responsif.

Keterbatasan dan Trade-off

Meskipun powerful, SearchView built-in memiliki keterbatasan. Jika Anda membutuhkan fungsionalitas pencarian yang sangat kompleks, seperti:

• Pencarian lintas kategori atau data model yang berbeda.
• Pencarian dengan autocomplete yang berasal dari server (server-side search).
• Pencarian dengan riwayat yang kompleks dan saran pencarian yang dipersonalisasi.

Maka Anda mungkin perlu membangun UI pencarian kustom atau menggunakan solusi yang lebih canggih yang terintegrasi dengan backend Anda. SearchView lebih fokus pada UI, sedangkan logika pencarian yang kompleks seringkali membutuhkan arsitektur data yang berbeda.

Alternatif untuk Pencarian

Tergantung pada kebutuhan, ada alternatif lain:

• Custom Search Bar: Menggunakan EditText biasa dengan ikon kaca pembesar dan tombol “Clear” untuk kontrol yang lebih granular atas tampilan dan perilaku.
• Material Design Search Component: Google Material Design menyediakan komponen pencarian yang lebih kaya dan terintegrasi dengan AppBar, yang mungkin lebih cocok untuk aplikasi dengan estetika Material.
• Server-Side Search: Untuk dataset yang sangat besar (jutaan data), filtering di sisi klien tidak praktis. Anda perlu mengirim query ke API backend dan menampilkan hasilnya. Dalam kasus ini, SearchView hanya akan menjadi input teks ke API tersebut.

Di project skala kecil hingga menengah, SearchView adalah pilihan yang solid dan cepat diimplementasikan. Namun, saat project berkembang, penting untuk mengevaluasi kembali apakah SearchView masih menjadi solusi terbaik atau perlu beralih ke pendekatan yang lebih skalabel.

FAQ

Apa perbedaan antara android.widget.SearchView dan androidx.appcompat.widget.SearchView?

androidx.appcompat.widget.SearchView adalah versi SearchView yang disediakan oleh AndroidX (Android Jetpack) yang kompatibel dengan berbagai versi Android, mulai dari API level lama hingga terbaru. Sebaliknya, android.widget.SearchView adalah versi lama yang hanya berfungsi dengan baik pada API level tertentu. Selalu direkomendasikan untuk menggunakan versi AndroidX untuk kompatibilitas dan fitur terbaru.

Bagaimana cara mengubah warna ikon SearchView?

Anda bisa mengubah warna ikon dan teks SearchView melalui styling di tema aplikasi Anda atau dengan memanipulasi tampilan internal SearchView secara programatis (misalnya, mengakses ImageView dari ikon pencarian atau tombol tutup). Pendekatan styling melalui tema atau atribut seperti app:queryBackground, app:searchIcon, dll., adalah yang paling bersih.

Apakah saya bisa menempatkan SearchView di Toolbar?

Ya, ini adalah praktik umum. Anda bisa menempatkan SearchView sebagai item menu di Toolbar. Anda perlu membuat file menu XML, menempatkan item SearchView di sana dengan app:actionViewClass="androidx.appcompat.widget.SearchView", dan meng-inflate menu tersebut di Activity atau Fragment Anda. Setelah itu, Anda bisa mendapatkan referensi SearchView dari MenuItem.

Bagaimana cara menyimpan riwayat pencarian?

Untuk menyimpan riwayat pencarian, Anda bisa menggunakan SharedPreferences untuk menyimpan daftar string pencarian yang baru saja digunakan. Ketika pengguna memulai pencarian, Anda bisa menampilkan saran dari riwayat ini. Saat onQueryTextSubmit dipanggil, tambahkan query ke daftar riwayat Anda.

Bisakah SearchView menampilkan saran pencarian?

Ya, SearchView mendukung saran pencarian (suggestions) melalui setSuggestionsAdapter(). Anda perlu menyediakan CursorAdapter kustom yang akan mengisi saran dari sumber data Anda (misalnya, dari riwayat pencarian lokal atau dari API server). Ini sangat berguna untuk meningkatkan pengalaman pengguna.

Kesimpulan

Mengimplementasikan SearchView dengan Kotlin adalah keterampilan fundamental bagi setiap developer Android. Dengan memahami cara menambahkannya ke layout, mengelola input pengguna melalui OnQueryTextListener, dan menerapkan logika filtering yang efisien, Anda dapat secara signifikan meningkatkan kegunaan aplikasi Anda.

Selalu ingat untuk mengikuti best practices seperti debouncing dan filtering di background thread untuk menjaga performa aplikasi tetap optimal, terutama saat berhadapan dengan dataset yang besar. Pertimbangkan juga pengalaman pengguna secara keseluruhan, termasuk feedback visual dan penanganan kasus tanpa hasil.

Dengan panduan ini, Anda kini memiliki bekal untuk mengintegrasikan fitur pencarian yang responsif dan intuitif ke dalam aplikasi Android Anda, membuat informasi lebih mudah diakses oleh pengguna. Jangan takut untuk bereksperimen dengan styling dan fungsionalitas tambahan untuk membuat SearchView Anda semakin powerful.

TAGS: SearchView, Kotlin, Android Development, Android UI, RecyclerView, Filtering, Mobile App, Developer Tools, UI/UX

---

Baca Juga

• Panduan Lengkap Belajar Coding untuk Pemula hingga Profesional