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
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" />MaterialSearchBar has the following xml attributes:
| Attribute | Description |
|---|---|
| mt_speechMode | if set to true, microphone icon will be displayed instead of search icon |
| mt_maxSuggestionsCount | specifies the max number of search queries stored |
| mt_navIconEnabled | set navigation icon enabled |
| mt_roundedSearchBarEnabled | use capsule shaped searchbar on v21+ and revert to default on lower |
| mt_dividerColor | set the colors of the suggestion and menu dividers |
| mt_searchBarColor | set the main color of the searchbar |
| mt_menuIconDrawable | set drawable of the menu icon |
| mt_searchIconDrawable | set drawable of the search icon when speech mode is false |
| mt_speechIconDrawable | set drawable of the speech icon when speech mode is true |
| mt_backIconDrawable | set drawable of the back arrow icon |
| mt_clearIconDrawable | set drawable of the clear icon |
| mt_navIconTint | set tint color of nav/back animated icon |
| mt_menuIconTint | set tint color of the menu icon |
| mt_searchIconTint | set tint color search/speech icon |
| mt_backIconTint | set tint color of the back arrow icon |
| mt_clearIconTint | set tint color of the clear icon |
| mt_navIconUseTint | should the animated nav icon use tint color |
| mt_menuIconUseTint | should the menu icon use the tint color |
| mt_searchIconUseTint | should the search/speech icon use the tint color |
| mt_backIconUseTint | should the back icon use the tint color |
| mt_clearIconUseTint | should the clear icon use the tint color |
| mt_hint | set the text of the hint when the searchbar is focused and search query is empty |
| mt_placeholder | set the placeholder text when the MaterialSearchBar is not focused |
| mt_textColor | set text color |
| mt_hintColor | set hint color |
| mt_placeholderColor | set placeholder color |
| mt_textCursorTint | set text cursors tint |
| mt_highlightedTextColor | set the text highlight tint color |
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
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