Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agraphie/materialsearchview
https://github.com/agraphie/materialsearchview
android animation circularreveal material-design material-search-bar searchview toolbar
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/agraphie/materialsearchview
- Owner: Agraphie
- License: apache-2.0
- Created: 2017-05-31T13:20:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-30T13:52:12.000Z (almost 6 years ago)
- Last Synced: 2024-03-04T10:48:08.850Z (11 months ago)
- Topics: android, animation, circularreveal, material-design, material-search-bar, searchview, toolbar
- Language: Java
- Size: 6.78 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MaterialSearchView
This is a library which wraps a `SearchView` to reveal itself in a circular fashion, just like in the PlayStore.
At its core you can get a `RecyclerView` for the search results and attach your favourite adapter and get the
`SearchView` to style it like you prefer.
# Usage
First include the dependency in your build.gradle
```
compile 'de.clemenskeppler:MaterialSearchView:1.0.4'
```
Simply include the class `MaterialSearchView` in your XML layout where you define your toolbar.
```xml
```
For showing the `SearchView` simple call `MaterialSearchView.show()` whenever you desire. E.g.
```Java
public class MainActivity extends AppCompatActivity {
MaterialSearchView materialSearchView;
SearchView searchView;
RecyclerView results;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
materialSearchView = (MaterialSearchView) findViewById(R.id.materialSearchView);
searchView = materialSearchView.getSearchView();
results = materialSearchView.getSearchResults();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.action_filter_search) {
materialSearchView.show();
return true;
} else {
return super.onOptionsItemSelected(item);
}
}
}
```
Furthermore, you can define
several XML attributes to change its behaviour.
| Attribute | Default | Description |
|-----------------------------|-----------------|--------------------------------------------------------------------------------------------------------|
| hasOverflow | false | Specify if the overflow menu is visible the menu where MaterialSearchView is included |
| searchIconPositionFromRight | 0 | The position of the search icon (i.e. magnifying glass) starting from 0 not counting the overflow menu |
| searchBarHeight | Same as toolbar | The height of the searchbar/searchview |
| cancelOnOutsideTouch | true | Close the search menu and results on an outside click (similar to `Dialog`) |
| circularAnimationTime | 300 | The animation time in ms for the circular reveal and hide |
| hideOnKeyboardClose | true | Close the search dialog when the softkey keyboard is minimsed |
# Limitations
On API 16 - 17 the circular reveal and hide animations do not look like a circle but like a square. Hopefully this
can be fixed in later releases somehow.
# Attributions
Thanks for Nathan Schwermann for his CircularReveal backport (https://gist.github.com/schwiz/e566f248723bb1754972) and Miguel Catalan Bañuls
for his original idea (https://github.com/MiguelCatalan/MaterialSearchView), as well as Ozodrukh for his circular
reveal (https://github.com/ozodrukh/CircularReveal).