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.

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

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

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" />

MaterialSearchBar has the following xml attributes:AttributeDescriptionmt_speechModeif set to true, microphone icon will be displayed instead of search iconmt_maxSuggestionsCountspecifies the max number of search queries storedmt_navIconEnabledset navigation icon enabledmt_roundedSearchBarEnableduse capsule shaped searchbar on v21+ and revert to default on lowermt_dividerColorset the colors of the suggestion and menu dividersmt_searchBarColorset the main color of the searchbarmt_menuIconDrawableset drawable of the menu iconmt_searchIconDrawableset drawable of the search icon when speech mode is falsemt_speechIconDrawableset drawable of the speech icon when speech mode is truemt_backIconDrawableset drawable of the back arrow iconmt_clearIconDrawableset drawable of the clear iconmt_navIconTintset tint color of nav/back animated iconmt_menuIconTintset tint color of the menu iconmt_searchIconTintset tint color search/speech iconmt_backIconTintset tint color of the back arrow iconmt_clearIconTintset tint color of the clear iconmt_navIconUseTintshould the animated nav icon use tint colormt_menuIconUseTintshould the menu icon use the tint colormt_searchIconUseTintshould the search/speech icon use the tint colormt_backIconUseTintshould the back icon use the tint colormt_clearIconUseTintshould the clear icon use the tint colormt_hintset the text of the hint when the searchbar is focused and search query is emptymt_placeholderset the placeholder text when the MaterialSearchBar is not focusedmt_textColorset text colormt_hintColorset hint colormt_placeholderColorset placeholder colormt_textCursorTintset text cursors tintmt_highlightedTextColorset the text highlight tint color
public methods:addTextChangeListener(TextWatcher textWatcher)clearSuggestions()disableSearch()enableSearch()getLastSuggestions()getMenu()getText()hideSuggestionList()inflateMenu(int menuResource)inflateMenu(int menuResource, int icon)isSearchEnabled()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: <stylename="MyCustomTheme"parent="MaterialSearchBarLight"> <itemname="mt_searchBarColor">@color/searchBarPrimaryColor</item> <itemname="mt_dividerColor">@color/searchBarDividerColor</item> <itemname="mt_navIconTint">@color/searchBarNavIconTintColor</item> <itemname="mt_searchIconTint">@color/searchBarSearchIconTintColor</item> <itemname="mt_clearIconTint">@color/searchBarClearIconTintColor</item> <itemname="mt_menuIconTint">@color/searchBarMenuIconTintColor</item> <itemname="mt_backIconTint">@color/searchBarBackIconTintColor</item> <itemname="mt_textCursorTint">@color/searchBarCursorColor</item> <itemname="mt_textColor">@color/searchBarTextColor</item> <itemname="mt_hintColor">@color/searchBarHintColor</item> <itemname="mt_placeholderColor">@color/searchBarPlaceholderColor</item> <itemname="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 <colorname="searchBarIconColor">#3a3a3a</color> //Base <colorname="searchBarPrimaryColor">#FFFFFF</color> <colorname="searchBarCursorColor">#8000a1ff</color> <colorname="searchBarDividerColor">#1F000000</color> //Icons <colorname="searchBarNavIconTintColor">@color/searchBarIconColor</color> <colorname="searchBarMenuIconTintColor">@color/searchBarIconColor</color> <colorname="searchBarSearchIconTintColor">@color/searchBarIconColor</color> <colorname="searchBarClearIconTintColor">@color/searchBarIconColor</color> <colorname="searchBarBackIconTintColor">@color/searchBarIconColor</color> //Text <colorname="searchBarTextColor">#DE000000</color> <colorname="searchBarHintColor">#42000000</color> <colorname="searchBarPlaceholderColor">#8A000000</color> <colorname="searchBarTextHighlightColor">#8000a1ff</color> //Base <colorname="searchBarPrimaryColorDark">#303030</color> <colorname="searchBarDividerColorDark">#1FFFFFFF</color> //Material SearchBar Dark Theme Colors <colorname="searchBarIconColorDark">#00a1ff</color> //Icons <colorname="searchBarNavIconTintColorDark">@color/searchBarIconColorDark</color> <colorname="searchBarMenuIconTintColorDark">@color/searchBarIconColorDark</color> <colorname="searchBarSearchIconTintColorDark">@color/searchBarIconColorDark</color> <colorname="searchBarClearIconTintColorDark">@color/searchBarIconColorDark</color> <colorname="searchBarBackIconTintColorDark">@color/searchBarIconColorDark</color> //Text <colorname="searchBarTextColorDark">#DEFFFFFF</color> <colorname="searchBarHintColorDark">#42FFFFFF</color> <colorname="searchBarPlaceholderColorDark">#8AFFFFFF</color> <colorname="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

MaterialSearchBar

General

Additional

Advertisement

Material SearchBar Android

Material Design Search Bar for Android