Sử dụng SearchView trong Toolbar Android

Sử dụng SearchView trong Toolbar Android

Hướng dẫn này minh họa cách thêm thanh tìm kiếm (SearchView) vào Toolbar/ActionBar để lọc dữ liệu ListView.

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    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>

Bước 3: Tạo menu (res/menu/menu.xml)

Chuột phải res → New → Android Resource Directory → Resource type: menu. Tạo file 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="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>

Bước 4: Cấu hình dữ liệu (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>

Bước 5: Code 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;
    ArrayAdapter adapter;
    ListView listView;
    TextView emptyView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar); // Quan trọng: Set Toolbar làm 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) {
                adapter.getFilter().filter(newText);
                return true;
            }
        });
        
        return super.onCreateOptionsMenu(menu);
    }
}

Bước 6: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, chạy app. Toolbar hiển thị biểu tượng tìm kiếm. Nhấn vào để mở SearchView, gõ tên tháng để lọc ListView real-time.

Tùy chỉnh SearchView

// Thay đổi màu chữ gợi ý
searchView.setQueryHint("Tìm kiếm...");

// Thay đổi màu text nhập
int searchTextId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
TextView searchText = searchView.findViewById(searchTextId);
searchText.setTextColor(Color.WHITE);
searchText.setHintTextColor(Color.LTGRAY);