วิธีใช้ SearchView ใน Toolbar บน Android

บทความนี้สาธิตวิธีเพิ่ม SearchView ใน Toolbar/ActionBar เพื่อค้นหาข้อมูลใน ListView แบบ Real-time

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project

ขั้นตอนที่ 2: Layout (activity_main.xml)

ใช้ Toolbar + ListView + Empty View:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        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/ThemeOverlay.AppCompat.Dark" />

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar" />

    <TextView
        android:id="@+id/emptyView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="No Results"
        android:textSize="20sp"
        android:visibility="gone" />

</RelativeLayout>

ขั้นตอนที่ 3: Menu Resource (res/menu/menu.xml)

คลิกขวา res → New → Android Resource Directory → Type: menu → สร้าง menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/appSearchBar"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom|collapseActionView" />

</menu>

ขั้นตอนที่ 4: String Array (res/values/strings.xml)

<resources>
    <string name="app_name">Sample</string>
    <string-array name="months_array">
        <item>January</item>
        <item>February</item>
        <item>March</item>
        <item>April</item>
        <item>May</item>
        <item>June</item>
        <item>July</item>
        <item>August</item>
        <item>September</item>
        <item>October</item>
        <item>November</item>
        <item>December</item>
    </string-array>
</resources>

ขั้นตอนที่ 5: MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    ListView listView;
    TextView emptyView;
    ArrayAdapter<String> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar); // สำคัญ: ต้องเซ็ต Toolbar เป็น ActionBar

        listView = findViewById(R.id.listView);
        emptyView = findViewById(R.id.emptyView);

        adapter = new ArrayAdapter<>(this,
                android.R.layout.simple_list_item_1,
                getResources().getStringArray(R.array.months_array));

        listView.setAdapter(adapter);
        listView.setEmptyView(emptyView);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);

        MenuItem searchItem = menu.findItem(R.id.appSearchBar);
        SearchView searchView = (SearchView) searchItem.getActionView();
        searchView.setQueryHint("Search months...");

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // Filter แบบ Real-time
                adapter.getFilter().filter(newText);
                return true;
            }
        });

        return super.onCreateOptionsMenu(menu);
    }
}

จุดสำคัญ

1. setSupportActionBar(toolbar) - ต้องเรียกใน onCreate
2. app:actionViewClass ใน menu.xml - ระบุ SearchView class
3. app:showAsAction="ifRoom|collapseActionView" - แสดงใน Toolbar และยุบได้
4. adapter.getFilter().filter(text) - ใช้ Filter built-in ของ ArrayAdapter

การปรับแต่ง SearchView (Customization)

// เปลี่ยนสีข้อความ Hint
searchView.setQueryHint("ค้นหา...");

// เปลี่ยนสีไอคอนและข้อความ
int searchIconId = searchView.getContext().getResources().getIdentifier("android:id/search_button", null, null);
ImageView searchIcon = searchView.findViewById(searchIconId);
searchIcon.setColorFilter(Color.WHITE);

// Auto focus และเปิดคีย์บอร์ด
searchView.setIconified(false);
searchView.requestFocusFromTouch();

RecyclerView Version (แนะนำสำหรับโปรเจกต์ใหม่)

ใช้ Filterable interface ใน Adapter แบบ Custom เพื่อควบคุม Logic การค้นหาเอง