Welcome to this post.
Android Material Search view tutorial. In this tutorial, we going to make a project and Implement A search view on the toolbar.
For search view, I use a 3rd party library
Material SearchView
Note: If you don't want to use 3rd party library see this post,
Android Material SearchView with Recent Search Suggestions
Let's start-
Before starting, see a screenshot-
 |
| Material Search View |
we have to do with this project-
1. we set search view on the toolbar.
2. Filter RecyclerView with text input
3. voice search
some bonus- In this project,
1. use SQL database for store data2. use the content provider to access data.
3. use Loaders for load data(Curser loaders).
Let's Start- First, add this line to your build.gradle file and sync gradle.
compile 'br.com.mauker.materialsearchview:materialsearchview:1.2.2'
Now go to on your style.xml file and below style-
<style name="MaterialSearchViewStyle">
<item name="searchBackground">@color/white_ish</item>
<item name="searchVoiceIcon">@drawable/ic_action_voice_search</item>
<item name="searchCloseIcon">@drawable/ic_action_navigation_close</item>
<item name="searchBackIcon">@drawable/ic_action_navigation_arrow_back</item>
<item name="searchSuggestionBackground">@color/search_layover_bg</item>
<item name="searchBarHeight">?attr/actionBarSize</item>
<item name="voiceHintPrompt">@string/hint_prompt</item>
<item name="android:textColor">@color/black</item>
<item name="android:textColorHint">@color/gray_50</item>
<item name="android:hint">@string/search_hint</item>
<item name="android:inputType">textCapWords</item>
</style>
OK, now time to add a toolbar to the layout. In this case, I add on activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
tools:context=".MainActivity"
android:background="@color/colorPrimary"
android:layout_marginBottom="2dp"
android:elevation="6dp">
<!-- don't forget to set elevation or it look like old action bar-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<br.com.mauker.materialsearchview.MaterialSearchView
android:id="@+id/search_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="@style/MaterialSearchViewStyle"/>
</RelativeLayout>
Note: I will provide GitHub link to this project later in this post
Now add a menu button on menu.xml-
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_search"
android:orderInCategory="100"
android:title="@string/abc_search_hint"
app:showAsAction="always" />
options menu looks like:
 |
| Material Search View (options menu) |
Now time to write java code- In this case MainActivity.java
MaterialSearchView searchView;
and again this view on onCreate-
searchView = (MaterialSearchView) findViewById(R.id.search_view);
now set all search operation I created a private method and call it on Oncreate-
In this method, we add three listeners to the search view-
1. setOnQueryTextListener
2. setSearchViewListener
3. setOnVoiceClickedListener In listener
1. setOnQueryTextListener is fired when we type text in the search view. In this listener, we have to override two methods name-
i. onQueryTextSubmit
ii. onQueryTextChange
i.
onQueryTextSubmit is called when we put the query data with submit button.
after submit-
* build a URI
* call getContentResolver and query database and save it on cursor variable.
* if the cursor is not null and cursor data is more than 0 we have data(Call cursor.getCount())
* so we go to the details activity with intent and set this URI with intent
*close search view
ii.
onQueryTextChange is called every time when you write.
So we have to set-
* we are going to update recycler view with type text
* we check the text length is greater than zero
* then we create a selection string variable for cursor query. we use SQL LIKE statement not where statement.
String selection = MainWordDBContract.Entry.COLUMN_WORD +" like ? ";
* add also selection Argument-
String[] selectionArg = new String[]{newText+"%"};
* same way to get cursor and same condition for update UI as onQueryTextSubmit
Let's see the code-
searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
Uri uri = MainWordDBContract.Entry.buildUriWithWord(query.toUpperCase());
Cursor cursor = getContentResolver().query(uri,
MainActivity.projection,null,null,null);
if (cursor != null && cursor.getCount() > 0){
Intent intent = new Intent(MainActivity.this,
DetailsActivity.class);
intent.setData(uri);
startActivity(intent);
searchView.closeSearch();
searchView.setCloseOnTintClick(false);
}
if (cursor != null){
cursor.close();
}
return true;
}
@Override
public boolean onQueryTextChange(String newText) {
if (newText.length() > 0){
String selection = MainWordDBContract.Entry.COLUMN_WORD +" like ? ";
//if you are try to search from any position of word
//then use
//String[] selectionArg = new String[]{"%"+newText+"%"};
//if you try to search from start of word the use this line
String[] selectionArg = new String[]{newText+"%"};
Cursor cursor = getContentResolver().query(MainWordDBContract.Entry.CONTENT_URI,
MainActivity.projection,selection,selectionArg,null);
if (cursor != null && cursor.getCount() > 0){
mAdapter.swapCursor(cursor);
}
return true;
} else {
return false;
}
}
});
Now add the setSearchViewListener listener and there are also two methods.
* if search view is open then hide the fab
* if searchView close the show the fab again Code-
searchView.setSearchViewListener(new MaterialSearchView.SearchViewListener() {
@Override
public void onSearchViewOpened() {
fab.hide();
}
@Override
public void onSearchViewClosed() {
fab.show();
}
});
On the last, we have added setOnVoiceClickedListener if you are using this option. for this, I write another method name askSpeechInput so let's see the code one by one- the listener-
searchView.setOnVoiceClickedListener(new MaterialSearchView.OnVoiceClickedListener() {
@Override
public void onVoiceClicked() {
askSpeechInput();
}
});
method-
private void askSpeechInput() {
Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault());
intent.putExtra(RecognizerIntent.EXTRA_PROMPT,
"Speak your desire word");
try {
startActivityForResult(intent, MaterialSearchView.REQUEST_VOICE);
} catch (ActivityNotFoundException a) {
a.printStackTrace();
slet("Activity not found", a);
Toast.makeText(this, "Sorry Speech To Text is not " +
"supported in your device", Toast.LENGTH_SHORT).show();
}
}
one more method to go. we are now overriding onActivityResult for getting voice input-
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == MaterialSearchView.REQUEST_VOICE && resultCode == RESULT_OK) {
ArrayList<String> matches = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
if (matches != null && matches.size() > 0) {
String searchWrd = matches.get(0);
if (!TextUtils.isEmpty(searchWrd)) {
//Todo more accure on settings
searchView.setQuery(searchWrd, false);
Uri uri = MainWordDBContract.Entry.buildUriWithWord(searchWrd.toUpperCase());
Cursor cursor = getContentResolver().query(uri,
MainActivity.projection,null,null,null);
if (cursor != null && cursor.getCount() > 0){
Intent intent = new Intent(MainActivity.this, DetailsActivity.class);
intent.setData(uri);
startActivity(intent);
searchView.closeSearch();
searchView.setCloseOnTintClick(false);
}
if (cursor != null){
cursor.close();
}
}
}
return;
}
super.onActivityResult(requestCode, resultCode, data);
}
voice search screen short:
 |
| Material Search View (voice search) |
add this line onResume method
searchView.activityResumed();
and last one-
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
switch (item.getItemId()) {
case R.id.action_search:
// Open the search view on the menu item click.
searchView.openSearch();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Now run your app and see the material search view
It will work fine.
Note: If you don't want to use 3rd party library to add search functionality, see this post.
Android Material SearchView with Recent Search Suggestions
Thank you for reading
Happy coding
