The app bar, also known as the action bar, is one of the most important design elements in your app's activities, it allows users to quickly understand how to operate your app and have a great experience .
Android SearchView widget provides a user interface for the user to enter a search query and submit a request to a search provider .
In this tutorial we will see adding SearchView widget to actionBar thru option menu .
Vector Search Icon
Create Vector Search Icon in Android Studio
1. Menu
- Inside the res/menu/ create a xml file "menu_main.xml" .
- Inside menu for item tag set the actionViewClass property with androidx.appcompat.widget.SearchView class and set showAsAction property with ifRoom or collapseActionView .
<?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/action_search" android:icon="@drawable/ic_search_24" android:title="@string/app_name" app:actionViewClass="androidx.appcompat.widget.SearchView" app:showAsAction="ifRoom|collapseActionView" /> </menu>
2. XML Layout
file : activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" />
3. MainActivity
- Inside onCreate function set the above defined XML Layout
- Override the onCreateOptionsMenu fun of Activity and set the above defined xml layout using menuInflater .
- Get the reference of menu item and call getView and then type cast it androidx.appcompat.widget.SearchView.
- SearchView OnQueryTextListener
Set the OnQueryTextListener and override onQueryTextSubmit and onQueryTextChange
// search queryTextChange Listener searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener { override fun onQueryTextSubmit(p0: String?): Boolean { return true } override fun onQueryTextChange(query: String?): Boolean { Log.d("onQueryTextChange", "query: " + query) return true } })
- Search Menu Item Expand Collapse Callback
Note : MenuItemCompat.setOnActionExpandListener is deprecated instead MenuItem.setOnActionExpandListener
On Menu Item reference call setOnActionExpandListener and override onMenuItemActionCollapse and onMenuItemActionExpand
//Expand Collapse listener item.setOnActionExpandListener(object : MenuItem.OnActionExpandListener { override fun onMenuItemActionCollapse(p0: MenuItem?): Boolean { showToast("Action Collapse") return true } override fun onMenuItemActionExpand(p0: MenuItem?): Boolean { showToast("Action Expand") return true } })
Complete MainActivity
package com.tutorialsbuzz.toolbarsearch import android.os.Bundle import android.util.Log import android.view.Menu import android.view.MenuItem import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.appcompat.widget.SearchView class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } override fun onCreateOptionsMenu(menu: Menu?): Boolean { menuInflater.inflate(R.menu.menu_main, menu) val item = menu?.findItem(R.id.action_search); val searchView = item?.actionView as SearchView // search queryTextChange Listener searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener { override fun onQueryTextSubmit(p0: String?): Boolean { return true } override fun onQueryTextChange(query: String?): Boolean { Log.d("onQueryTextChange", "query: " + query) return true } }) //Expand Collapse listener item.setOnActionExpandListener(object : MenuItem.OnActionExpandListener { override fun onMenuItemActionCollapse(p0: MenuItem?): Boolean { showToast("Action Collapse") return true } override fun onMenuItemActionExpand(p0: MenuItem?): Boolean { showToast("Action Expand") return true } }) return super.onCreateOptionsMenu(menu) } private fun showToast(msg: String) { Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show() } }
No comments:
Post a Comment