Android Adding SearchView To ActionBar

 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 .
file : main_menu.xml
<?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


Just and empty 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


  1. Inside onCreate function set the above defined XML Layout 
  2. Override the onCreateOptionsMenu fun of Activity and set the above defined xml layout using menuInflater .
  3. Get the reference of menu item and call getView and then type cast it androidx.appcompat.widget.SearchView.
  4. 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
    	}
    })
     

  5. 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 

file : MainActivity.kt
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