Skip to content Skip to sidebar Skip to footer

Cara Menerapkan Pencarian SearchView pada Toolbar Android

SearchView  adalah salah satu komponen widget  yang digunakan oleh user (pengguna) , untuk memasukan dan menquery pencarian dari list kumpulan  data. SearchView ini digunakan untuk menambahkan fungsi pencarian ke dalam Aplikasi yang kalian buat. SearchView akan menerima ,(query) dari user (pengguna) ketika melakukan pencarian dan akan menampilkan tampilan hasil pencarian, ke dalam bentuk view ,contohnya seperti widget TextView.

Toolbar adalah sebuah komponen antar muka yang merupakan bagian dari material design di Android.Yang juga merupakan pengganti kelanjutan dari versi terdahulu yaitu Action Bar, Toolbar terdiri dari navagasi icon,menu ,setting dll. Untuk menggunakan dan menerapkan toolbar kalian bisa menggunakan nya dari library v21 (Appcompat) sampai versi terbaru sekarang.Nah disini lah kelebihan  Android Studio karna sudah support v21 dari awal  dirilis versi 1.0 


Cara Menerapkan Pencarian SearchView pada Toolbar Android



Pada tutorial belajar android kali ini, kita akan mencoba membuat dan menerapkanya fungsi pencarian dari widget SearchView ke dalam Toolbar(Action Bar) Android. Lalu hasil dari query pencarian akan di tampilkan dalam bentuk widget TextView.



1. Pertama buka project Android Studio kalian.


2. Yang perlu kita buat pertama kali yaitu , kita mengkonfigurasikan Searchable ke dalam folder  (res > xml > searchable.xml.)

Kalian bisa membuat folder xml nya dengan cara: klik kanan pada folder res lalu pilih New > Android resource directory.

Lalu tentukan folder xml pada Resource type.


Membuat folder xml di Android Studio
Membuat folder xml

Kemudian buat xml resource file dengan cara pilih New pada folder xml , lalu konfigurasikan nama dan isi dengan baris instruksi (codingan ) dibawah:

File ini digunakan untuk pendefenisian ,Search View ke dalam file AndroidManifest.xml

searchable.xml



3. Lalu pada folder manifest > AndroidManifest.xml. 

Kalian setting seperti baris instruksi (codingan ) berikut:

AndroidManifest.xml. 


Perlu kalian ketahui disini  saya menggunakan Activity bawaan yaitu MainActvity untuk menggunakan fungsi pencarian SearchView.
Fungsi dari android:launchMode="singleTop"  yaitu ketika kita melakukan pencarian kita tidak memanggil Activity lain, hanya memanggil atau Activity saat ini yang sedang di pakai. Jika kalian ingin menerapkanya pada Activity baru atau Activity lain. kalian hanya perlu menerapkan tag  android:launchMode="singleTop"  kedalam Activity baru atau yang kalian ingin terapkan.
Serta  kita harus menerapkan tag <intent filter >
   <action android:name="android.intent.action.SEARCH" />                <category android:name="android.intent.category.DEFAULT" />
Kedalam Activity yang sedang dipakai.
Dan juga kita perlu mendefiniskan konfigurasi searchable dari folder xml.
            <meta-data                android:name="android.app.searchable"                android:resource="@xml/seachable" />

Nah untuk menerapkan fungsi pencarian SearchView kurang lebih sebagai dasarnya seperti itu.




4. Membuat folder menu


Secara default (bawaan) jika kita memilih Empty Activity , tidak disertakan folder menu di resource ,jadi kita akan membuatnya secara manual dengan cara:

Pada folder  res di struktur project Android Studio kalian, klik kanan lalu pilih New > pilih  Android Resource Directory  seperti pada gambar di bawah:


Android Resource directory di Android Studio
Android Resource directory



 Pilih menu lalu pilih tombol OK.


Buat folder menu resource
Buat folder menu resource

Buat file xmlnya saya memberikan nama menu_search.xml (Terserah kalian )  pada file menu. Salin baris intruksi (codingan ) di bawah :

menu_search.xml


Oh ya pada folder drawable kalian perlu isikan gambar atau iconya , disini saya menggunakan gambar vector dengan nama ic_search.

Untuk tips membuat vector di Android Studio , kalian bisa membaca artikel tips sebelumny :



5.  Pada file layout activity_main.xml

Disini kita menerapkan widget TextView untuk menampilkan hasil pencarian query.

activity_main.xml



6.  Pada file class MainActivty.java


Disini kita menerapkan fungsi dari SearchView 


MainActivty.java


7. Setelah itu kita coba jalankan Aplikasinya lewat Android Studio.

Hasil lebih jelasnya bisa dilihat di Demo App berikut  :



Demikian Tutorial Cara Menerapkan Pencarian SearchView pada Toolbar Android. Perlu kalian ingat disini saya membuat fungsi dasarnya saja dari pencarian SearchView pada Toolbar Android. Untuk next level seperti SearchView di Reycler Viewn, di database , atau yang lain-lain, mungkin saya akan post tutorialnya nanti 


Post a Comment for "Cara Menerapkan Pencarian SearchView pada Toolbar Android"