Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mancj/MaterialSearchBar
Material Design Search Bar for Android
https://github.com/mancj/MaterialSearchBar
android gradle material search searchbar ui view
Last synced: 3 months ago
JSON representation
Material Design Search Bar for Android
- Host: GitHub
- URL: https://github.com/mancj/MaterialSearchBar
- Owner: mancj
- License: other
- Created: 2016-07-20T13:02:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T13:40:02.000Z (over 2 years ago)
- Last Synced: 2024-04-24T22:34:09.757Z (6 months ago)
- Topics: android, gradle, material, search, searchbar, ui, view
- Language: Java
- Size: 2.31 MB
- Stars: 2,033
- Watchers: 44
- Forks: 332
- Open Issues: 84
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-android - MaterialSearchBar - Material Design Search Bar for Android (Libraries / GUI)
- awesome-github-android-ui - MaterialSearchBar - 安卓MD风格搜索栏 (SearchView)
- awesome-android - MaterialSearchBar - Material Design Search Bar for Android (Libraries / GUI)
README
# Material SearchBar Android
Material Design Search Bar for Android
[](http://android-arsenal.com/details/1/4158)
[](https://jitpack.io/#mancj/MaterialSearchBar)
----------
This beautiful and easy to use library will help to add Lollipop Material Design SearchView in your project.
----------
# See our [Wiki](https://github.com/mancj/MaterialSearchBar/wiki)
# How to use
**to include SearchBar to your project:**
add this code to the the project level build.gradle file
```gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
```
add the dependency to the the app level build.gradle file
```gradle
dependencies {
implementation 'com.github.mancj:MaterialSearchBar:X.X.X'
}
```
[](https://jitpack.io/#mancj/MaterialSearchBar)
then add SearchBar to your activity:
```xml
```
----------
**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.
```xml
Provided Styles are: MaterialSearchBarLight and MaterialSearchBarDark
Example:
<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>
```
**OR**
**Custom Colors - colors.xml**
Simply set/change these colors(or some) and you have your custom style.
```xml
//Material SearchBar Light Theme Colors
#3a3a3a
//Base
#FFFFFF
#8000a1ff
#1F000000
//Icons
@color/searchBarIconColor
@color/searchBarIconColor
@color/searchBarIconColor
@color/searchBarIconColor
@color/searchBarIconColor
//Text
#DE000000
#42000000
#8A000000
#8000a1ff
//Base
#303030
#1FFFFFFF
//Material SearchBar Dark Theme Colors
#00a1ff
//Icons
@color/searchBarIconColorDark
@color/searchBarIconColorDark
@color/searchBarIconColorDark
@color/searchBarIconColorDark
@color/searchBarIconColorDark
//Text
#DEFFFFFF
#42FFFFFF
#8AFFFFFF
#BF00a1ff
```
----------
To save search queries when the activity is destroyed, use the method `searchBar.getLastSuggestions()` and then, to restore them use `searchBar.setLastSuggestions(List);` as shown in the example below
# Example
Here is a simple example of using MaterialSearchBar
```java
private List 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](https://github.com/mancj/MaterialSearchBar/tree/master/app/src/main/java/com/mancj/example)