Material SearchBar Android

Material Design Search Bar for Android

This beautiful and easy to use library will help to add Lollipop Material Design SearchView in your project.

See our Wiki

How to use

to include SearchBar to your project:

add this code to the the project level build.gradle file

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

add the dependency to the the app level build.gradle file

dependencies {
    implementation 'com.github.mancj:MaterialSearchBar:X.X.X'
}

then add SearchBar to your activity:

<com.mancj.materialsearchbar.MaterialSearchBar
    style="@style/MaterialSearchBarLight"
    app:mt_speechMode="true"
    app:mt_hint="Custom hint"
    app:mt_maxSuggestionsCount="10"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/searchBar" ></com.mancj.materialsearchbar.MaterialSearchBar>

MaterialSearchBar has the following xml attributes:

public methods:

• addTextChangeListener(TextWatcher textWatcher)
• clearSuggestions()
• closeSearch()
• openSearch()
• getLastSuggestions()
• getMenu()
• getText()
• hideSuggestionList()
• inflateMenu(int menuResource)
• inflateMenu(int menuResource, int icon)
• isSearchOpened()
• isSpeechModeEnabled()
• isSuggestionsVisible()
• setArrowIcon(int arrowIconResId)
• setArrowIconTint(int arrowIconTint)
• setCardViewElevation(int elevation)
• setClearIcon(int clearIconResId)
• setClearIconTint(int clearIconTint)
• setCustomSuggestionAdapter(SuggestionsAdapter suggestionAdapter)
• setDividerColor(int dividerColor)
• setHint(CharSequence hintText)
• setIconRippleStyle(boolean borderlessRippleEnabled)
• setLastSuggestions(List suggestions)
• setMaxSuggestionCount(int maxSuggestionsCount)
• setMenuDividerEnabled(boolean menuDividerEnabled)
• setMenuIcon(int menuIconResId)
• setMenuIconTint(int menuIconTint)
• setNavButtonEnabled(boolean navButtonEnabled)
• setNavIconTint(int navIconTint)
• setOnSearchActionListener(OnSearchActionListener onSearchActionListener)
• setPlaceHolder(CharSequence placeholder)
• setPlaceHolderColor(int placeholderColor)
• setRoundedSearchBarEnabled(boolean roundedSearchBarEnabled)
• setSearchIcon(int searchIconResId)
• setSearchIconTint(int searchIconTint)
• setSpeechModeEnabled(boolean speechMode)
• setSuggestionsClickListener(SuggestionsAdapter.OnItemViewClickListener listener)
• setText(String text)
• setTextColor(int textColor)
• setTextHighlightColor(int highlightedTextColor)
• setTextHintColor(int hintColor)
• showSuggestions()
• updateLastSuggestions(List suggestions)

Styling Material SearchBar

Custom Style - styles.xml
Create a custom style and use one of the provided styles as the parent.

Provided Styles are: MaterialSearchBarLight and MaterialSearchBarDark
Example:
<style name="MyCustomTheme" parent="MaterialSearchBarLight">
     <item name="mt_searchBarColor">@color/searchBarPrimaryColor</item>
            <item name="mt_dividerColor">@color/searchBarDividerColor</item>
            <item name="mt_navIconTint">@color/searchBarNavIconTintColor</item>
            <item name="mt_searchIconTint">@color/searchBarSearchIconTintColor</item>
            <item name="mt_clearIconTint">@color/searchBarClearIconTintColor</item>
            <item name="mt_menuIconTint">@color/searchBarMenuIconTintColor</item>
            <item name="mt_backIconTint">@color/searchBarBackIconTintColor</item>
            <item name="mt_textCursorTint">@color/searchBarCursorColor</item>
            <item name="mt_textColor">@color/searchBarTextColor</item>
            <item name="mt_hintColor">@color/searchBarHintColor</item>
            <item name="mt_placeholderColor">@color/searchBarPlaceholderColor</item>
            <item name="mt_highlightedTextColor">@color/searchBarTextHighlightColor</item>
</style>

OR

Custom Colors - colors.xml
Simply set/change these colors(or some) and you have your custom style.

    //Material SearchBar Light Theme Colors
        <color name="searchBarIconColor">#3a3a3a</color>
        //Base
        <color name="searchBarPrimaryColor">#FFFFFF</color>
        <color name="searchBarCursorColor">#8000a1ff</color>
        <color name="searchBarDividerColor">#1F000000</color>
        //Icons
        <color name="searchBarNavIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarMenuIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarSearchIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarClearIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarBackIconTintColor">@color/searchBarIconColor</color>
        //Text
        <color name="searchBarTextColor">#DE000000</color>
        <color name="searchBarHintColor">#42000000</color>
        <color name="searchBarPlaceholderColor">#8A000000</color>
        <color name="searchBarTextHighlightColor">#8000a1ff</color>
        //Base
        <color name="searchBarPrimaryColorDark">#303030</color>
        <color name="searchBarDividerColorDark">#1FFFFFFF</color>
        //Material SearchBar Dark Theme Colors
        <color name="searchBarIconColorDark">#00a1ff</color>
        //Icons
        <color name="searchBarNavIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarMenuIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarSearchIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarClearIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarBackIconTintColorDark">@color/searchBarIconColorDark</color>
        //Text
        <color name="searchBarTextColorDark">#DEFFFFFF</color>
        <color name="searchBarHintColorDark">#42FFFFFF</color>
        <color name="searchBarPlaceholderColorDark">#8AFFFFFF</color>
        <color name="searchBarTextHighlightColorDark">#BF00a1ff</color>

To save search queries when the activity is destroyed, use the method searchBar.getLastSuggestions() and then, to restore them use searchBar.setLastSuggestions(List<String>); as shown in the example below

Example

Here is a simple example of using MaterialSearchBar

private List<String> lastSearches;
private MaterialSearchBar searchBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    searchBar = (MaterialSearchBar) findViewById(R.id.searchBar);
    searchBar.setHint("Custom hint");
    searchBar.setSpeechMode(true);
    //enable searchbar callbacks
    searchBar.setOnSearchActionListener(this);
    //restore last queries from disk
    lastSearches = loadSearchSuggestionFromDisk();
    searchBar.setLastSuggestions(list);
    //Inflate menu and setup OnMenuItemClickListener
    searchBar.inflateMenu(R.menu.main);
    searchBar.getMenu().setOnMenuItemClickListener(this);
}
@Override
protected void onDestroy() {
    super.onDestroy();
    //save last queries to disk
    saveSearchSuggestionToDisk(searchBar.getLastSuggestions());
}
@Override
public void onSearchStateChanged(boolean enabled) {
    String s = enabled ? "enabled" : "disabled";
    Toast.makeText(MainActivity.this, "Search " + s, Toast.LENGTH_SHORT).show();
}
@Override
public void onSearchConfirmed(CharSequence text) {
    startSearch(text.toString(), true, null, true);
}
@Override
public void onButtonClicked(int buttonCode) {
    switch (buttonCode){
        case MaterialSearchBar.BUTTON_NAVIGATION:
            drawer.openDrawer(Gravity.LEFT);
            break;
        case MaterialSearchBar.BUTTON_SPEECH:
            openVoiceRecognizer();
    }
}

More Examples