Cara Menerapkan Pencarian SearchView pada Toolbar Android

  • Post
    codeorayo
    Keymaster
    none
    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 

    [img]https://4.bp.blogspot.com/-vg6Ju60l6jc/VvfWbSWPARI/AAAAAAAAFLI/MnHlLSNuEm4DwLTyBlhw2oO1-TTP7zyQw/s1600/android-studio-tutorial-development-apps-by-okedroid.png[/img]

    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.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=187]https://3.bp.blogspot.com/-8y5cif24DTU/V0e6FO-pdeI/AAAAAAAAFeU/5jGghtT0ESckLTfZc25PwUuy69ShdUAMACLcB/s320/Resource-tpye-folder-xml-android-studio.png[/img][/td]
    [td]Membuat folder xml[/td]

    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


  • http://schemas.android.com/apk/res/android“

  •             android:label=”@string/app_name”

  •             android:hint=”@string/search_hint”

  •            >



  • 3. Lalu pada folder manifest > AndroidManifest.xml. 

    Kalian setting seperti baris instruksi (codingan ) berikut:

    AndroidManifest.xml. 


  •          xmlns:android=”http://schemas.android.com/apk/res/android“>

  •  

  •     

  •        android:allowBackup=”true”

  •        android:icon=”@mipmap/ic_launcher”

  •        android:label=”@string/app_name”

  •        android:launchMode=”singleTop”

  •        android:supportsRtl=”true”

  •        android:theme=”@style/AppTheme”>

  •         

  •             

  •                 

  •                 

  •                 

  •                 

  •  

  •             

  •  

  •  

  •             

  •                android:name=”android.app.searchable”

  •                android:resource=”@xml/seachable” />

  •            

  •         

  •  

  •     

  •  




  • Quote:

     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

                      

    Kedalam Activity yang sedang dipakai.

    Dan juga kita perlu mendefiniskan konfigurasi searchable dari folder xml.

                                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:

[table]

[tr]

[/tr]

[tr]

[/tr]

[/table]

[td][img width=320,height=191]https://4.bp.blogspot.com/-f4fAgp01HeA/Vs7Mrq_czbI/AAAAAAAAEwA/moHKxCKXRqY/s320/android-resource-directory-studio.png[/img][/td]
[td]Android Resource directory
[/td]

 Pilih menu lalu pilih tombol OK.

[table]

[tr]

[/tr]

[tr]

[/tr]

[/table]

[td][img width=320,height=186]https://1.bp.blogspot.com/-mr5IgxN88sg/Vudg7h8vDjI/AAAAAAAAFD4/K_zoAzUNao8pe34Pc9mTfxmhBlFi4Zvsw/s320/menu-android-resource-directory.png[/img][/td]
[td]Buat folder menu resource
[/td]

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

menu_search.xml

  • http://schemas.android.com/apk/res/android“
  •       xmlns:app =”http://schemas.android.com/apk/res-auto

  •       xmlns:tools=”http://schemas.android.com/tools

  •       tools:context=”.MainActivity”>

  •  

  •  

  •     

  •           android:title=”@string/search_hint”

  •           android:icon=”@drawable/ic_search”

  •           app:actionViewClass=”android.support.v7.widget.SearchView”

  •           app:showAsAction=”ifRoom|collapseActionView”

  •     />

  •  


  • 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


  •     xmlns:android=”http://schemas.android.com/apk/res/android

  •     xmlns:tools=”http://schemas.android.com/tools

  •     android:layout_width=”match_parent”

  •     android:layout_height=”match_parent”

  •     android:paddingBottom=”@dimen/activity_vertical_margin”

  •     android:paddingLeft=”@dimen/activity_horizontal_margin”

  •     android:paddingRight=”@dimen/activity_horizontal_margin”

  •     android:paddingTop=”@dimen/activity_vertical_margin”

  •     tools:context=”com.okedroid.searchviewtoolbar.MainActivity”>

  •  

  •  

  •     

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:textAppearance=”?android:attr/textAppearanceMedium”

  •         android:text=”Medium Text”

  •         android:id=”@+id/textView”

  •         android:layout_alignParentTop=”true” android:layout_centerHorizontal=”true”/>



  • 6.  Pada file class MainActivty.java

    Disini kita menerapkan fungsi dari SearchView 

    MainActivty.java

  • package com.okedroid.searchviewtoolbar;

  •  

  • import android.os.Bundle;

  • import android.support.v4.view.MenuItemCompat;

  • import android.support.v7.app.AppCompatActivity;

  • import android.support.v7.widget.SearchView;

  • import android.view.Menu;

  • import android.view.MenuInflater;

  • import android.view.MenuItem;

  • import android.widget.TextView;

  •  

  • public class MainActivity extends AppCompatActivity {

  •     private TextView textView;

  •     //deklarasikan widget textview

  •  

  •  

  •     @Override

  •     protected void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •         setContentView(R.layout.activity_main);

  •  

  •  

  •         textView = (TextView) findViewById(R.id.textView);

  •       //membuat obyek dari widget textview

  •  

  •  

  •  

  •  

  •  

  •     }

  •  

  •     public boolean onCreateOptionsMenu(Menu menu) {

  •         MenuInflater inflater = getMenuInflater();

  •         inflater.inflate(R.menu.menu_search, menu);

  •         MenuItem searchItem = menu.findItem(R.id.search);

  •         final SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

  •         searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

  •             @Override

  •             public boolean onQueryTextSubmit(String query) {

  •                 // lakukan query disini

  •                 textView.setText(“Hasil pencarian Query :” + query);

  •  

  •                 searchView.clearFocus();

  •  

  •                 return true;

  •             }

  •  

  •             @Override

  •             public boolean onQueryTextChange(String newText) {

  •                 return false;

  •             }

  •         });

  •         return super.onCreateOptionsMenu(menu);

  •     }

  •  

  • }


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

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
    • You must be logged in to reply to this topic.