SearchView in Toolbar

In this Android tip, I am going to show you how to display a searchview in the toolbar. Unlike actionbar, toolbar can be used anywhere in your interface and it is highly customizable. The SearchView and Toolbar to be used here are in support library. This is to make sure that it works in Android API lower than Lollipop.
Because the toolbar is part of material design, you need to apply a material theme to your application. In the res/values directory, you open the styles.xml file then add the example material theme as shown below.

<style name="MyTheme" parent="MyTheme.Base">

   </style>

   <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

      <item name="windowNoTitle">true</item>

      <item name="windowActionBar">false</item>

      <item name="colorPrimary">#2196F3</item>

      <item name="colorPrimaryDark">#1976D2</item>

      <item name="colorAccent">#FF4081</item>

   </style>

In AndroidManifest.xml file, you add the theme to the tag like this:
..............
android:theme="@style/MyTheme"
>
Now we are going to add a toolbar to your application. In the activity_main.xml file you add a toolbar.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   android:paddingLeft="0dp"

   android:paddingRight="0dp"

   android:paddingTop="0dp"

   android:paddingBottom="0dp"

   tools:context=".MainActivity"

   android:orientation="vertical"

   >

        <android.support.v7.widget.Toolbar           xmlns:android="http://schemas.android.com/apk/res/android"

           xmlns:app="http://schemas.android.com/apk/res-auto"

           android:id="@+id/toolbar"

           android:layout_width="match_parent"

           android:layout_height="wrap_content"

           android:minHeight="?attr/actionBarSize"

           android:background="?attr/colorPrimary"           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"



           />

</RelativeLayout>

You can display the toolbar at anywhere on your activity's interface. If you want to show it at the location of an actionbar, in the MainActivity class, you write code as below:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

// Replace actionbar by toolbar

if (toolbar != null) {

        setSupportActionBar(toolbar);

  }

To display the searchview on the toolbar, in the res/menu/menu_main.xml file, you add a SearchView widget from the support library.
<menu 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" tools:context=".MainActivity">

   <item android:id="@+id/action_settings" android:title="@string/action_settings"

      android:orderInCategory="100" app:showAsAction="never" />

   <item

      android:id="@+id/action_search"

      android:icon="@android:drawable/ic_menu_search"

      app:showAsAction="always"

      app:actionViewClass="android.support.v7.widget.SearchView"

      android:title="Search"/>

</menu>

In the OnCreateOptonMenu of the MainActivity class, you inflate the menu and assign values to the properties of the SearchView as below:
public boolean onCreateOptionsMenu(Menu menu) {

      // Inflate the menu; this adds items to the action bar if it is present.

      //getMenuInflater().inflate(R.menu.menu_main, menu);

      MenuInflater inflater = getMenuInflater();

      inflater.inflate(R.menu.menu_main, menu);

      // Get the SearchView and set the searchable configuration

      SearchManager searchManager = (SearchManager) getSystemService(MainActivity.this.SEARCH_SERVICE);

      //MenuItem searchItem=menu.findItem(R.id.searchitem);

      //SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

      final SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();

      //searchView.setBackgroundColor(Color.parseColor("#086A87"));

      // Sets the SearchableInfo for this SearchView

      searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

      //expand the search widget

      searchView.setIconifiedByDefault(false);

      // Show the submit button

      searchView.setSubmitButtonEnabled(true);

     

      return true;

   }

Run the application. You will get the output as the screenshot below:
searchview in toolbar

Posted by: Dara | post date: 05-11-2016 | Subject: Android Apps Development

write programming tip

This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.