Beranda / Android Programming / Basic Android / Material Design

Cara Membuat Pencarian SearchView pada Toolbar Android

Oleh Wildan M Athoillah

Assalamualaikum Warahmatullahi Wabarakatuh.

SearchView adalah salah satu komponen widget yang digunakan untuk mencari suatu data dari list atau sekumpulan data didalam aplikasi. SearchView akan menerima, (query) dari user ketika melakukan pencarian dan akan menampilkan tampilan hasil pencarian, ke dalam bentuk view, contoh seperti pada TextView, ListView atau RecyclerView dan masih banyak lagi.


Pada tutorial ini kia akan belajar cara membuat SearchView dan menerapkannya pada Toobar. Toolbar adalah sebuah komponen bagian dari material design, merupakan pengganti kelanjutan dari versi terdahulu yaitu Action Bar. SearchView dapat memudahkan user/pengguna untuk mencari suatu data didalam database aplikasi.

Materi lainnya yang direkomenasikan:

A. Menyiapkan SearchView dan Membuat Menu

1) Pertama kita akan membuat sebuah icon search, yang nantinya akan kita terapkan pada Toolbar.  Klik kalan pada direktori res > new > Image Asset.

2) Ubah Icon Type menjadi Action Bar and Tab Icon, berinama icon tersebut, misalnya: "ic_search", pilih Clip Art, karena kita akan mengunakan icon bawaan android studio, klik pada icon Clip Art(yang ada gambar androidnya).

3) Pilih gambar Icon Search pada kategori Action, lalu klik OK..


Terakhir, sesuikan warna atau style dari icon tersebut. lalu klik next dan finish.

4) Berikutnya, buat sebuah menu ActionBar untuk kita terapkan pada Toolbar. Caranya klik kanan pada direktori res > new > Android resource file.

5) Berinama file tersebut lalu ubah Resource type menjadi Menu, Klik OK.


6) Lalu pada menu tersebut akan kita tambahkan item, yang nantinya digunakan untuk SearchView dan jangan lupa untuk memasukan icon yang sudah kita buat tadi:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/search"
          android:title="Cari"
          android:orderInCategory="1"
          android:icon="@drawable/ic_search"
          app:actionViewClass="android.support.v7.widget.SearchView"
          app:showAsAction="always|collapseActionView"/>

</menu>
B. Membuat Toolbar

1) Untuk membuat Toolbar, kita perlu menghilangkan TitleBar/ActionBar bawaannya terlebih dahulu, pertama kita akan mengedit stylenya, dengan cara buka file style.xml yanag berada pada direktori res > values > style.xml.

Saya sarankan, kalian edit menjadi seperti berikut ini:
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>
Nantinya, style AppTheme.NoActionBar akan kita terapkan pada MainActivity, lalu AppTheme.AppBarOverlay dan AppTheme.PopupOverlay akan kita terapkan pada Toolbar.

2) Buka file AndroidManifest.xml, tambahkan AppTheme.NoActionBar pada MainActivivty, seperti ini:
<activity android:name=".MainActivity"
          android:theme="@style/AppTheme.NoActionBar">
Dan jangan lupa untuk menambahkan kedaua library berikut ini pada file build.gradle, yang berada pada direktori app.
compile 'com.android.support:appcompat-v7:27.0.2'
compile 'com.android.support:design:27.0.2'
3) Selanjutnya kita akan membuat file Toolbarnya, buatlah layout baru, klik kanan pada direktori layout > new > Layout resource file, berinama file tersebut, misalnya "my_toolbar".

Edit kode xml pada layout toolbar, seperti berikut ini:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/AppTheme.AppBarOverlay"
    app:popupTheme="@style/AppTheme.PopupOverlay">

</android.support.v7.widget.Toolbar>
4) Berikutnya kita akan mengedit layout pada file actvity_main.xml. disini kita akan menembahkan Toolbar yang sudah dibuat tadi, selain itu juga, kita akan menambahkan komponen pendukung seperti TextView. TextView tersebut akan kita gunakan untuk menampilkan hasil pencarian dari SearchView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.searchviewexample.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:elevation="4dp"
        tools:targetApi="lollipop">

        <include
            android:id="@+id/toolbar"
            layout="@layout/my_toolbar" />

    </android.support.design.widget.AppBarLayout>

    <TextView
        android:id="@+id/outout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Hasil Pencarian"
        android:textSize="15sp"
        android:textStyle="bold" />

</LinearLayout>
Selanjutnya buka file MainActiviy.java pada project kalian, masukan source code berikut ini:
package android.cianjur.developer.net.searchviewexample;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.support.v7.widget.SearchView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private TextView Hasil;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        Hasil = findViewById(R.id.outout);
    }

    //Code Program pada Method dibawah ini akan Berjalan saat Option Menu Dibuat
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //Memanggil/Memasang menu item pada toolbar dari layout menu_bar.xml
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_bar, menu);
        MenuItem searchIem = menu.findItem(R.id.search);
        final SearchView searchView = (SearchView) searchIem.getActionView();
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public boolean onQueryTextSubmit(String query) {
                Hasil.setText("Hasil Pencarian: "+query);
                Toast.makeText(getApplicationContext(),query, Toast.LENGTH_SHORT).show();

                searchView.clearFocus();
                return true;
            }

            @Override
            public boolean onQueryTextChange(String s) {
                return false;
            }
        });
        return true;
    }
}
Penjealsan:

Pertama kita menginisialisasi Toolbar menggunakan fungsi setSupportActionBar().

Pada method onCreateOptionsMenu(), kita mendefinisikan menu yang sudah kita buat tadi, menggunakan fungsi getMenuInflater().inflate().

Setelah itu, kita menginisialisasi MenuItem yang akan digunakan sebagai SearchView, dengan menggunakan funsi setOnQueryTextListener(), fungsi ini digunakan untuk memprses permintaan data (query) dari user.

Didalm fungsi tersebut terdapat sebuah method. bernama onQueryTextSubmit(), yang dijalankan ketika user, mengsubmit data pada SearchView, pada contoh ini, kita menampilkan hasilnya pada TextView dan Toast.

Demo:



Projectnya bisa kalian download di Github Saya.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan. Pada tutorial selanjunya, kita akan belajar Cara Menerapkan SearchView dengan ListView.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.