Comments (4)
Take a look at implementing search using https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md#usage
They should have support for filtering in SearchView
from harmonic-hn.
I like Gmail's search ui which uses chips for filtering*:
There are actually two slightly different UIs for search. The first one is when you start searching and it shows quick results. In this mode the search field with chips is part of a fixed toolbar** that doesn't move when you scroll quick results. After confirming search, the search field transforms back into search bar. It is still part of a toolbar with chips, but now it can scroll away and reappears on scroll in opposite direction. This UX might need to be adjusted for Harmonic as it doesn't display search bar by default, but there is some guidance for this***.
Clicking the options opens bottom sheet dialog, but they can also display menu or date picker directly. Between BS and menu I prefer bottom sheets for consistency, because we need numeric inputs for points and number of comments filters.
* A few other search UI approaches I saw had a button that opens a separate dialog/screen with all the filtering options. And one more used slidable view (like nav drawer) for the options
** Probably combination of search view and chips in the container area
*** Also UI on tablets is different
from harmonic-hn.
I agree Gmails implementation is rather ideal with their chips instead of dropdowns. Also the whole Material 3 concept of having the search interface be a modal (which is not necessarily fullscreen on tablets) is certainly preferable to what is implemented now.
The Google Photos example you linked in the guidelines for the UX is certainly nice and plays nice with the current UI outside of "search mode".
I think the way to implement the search bar atleast is to have the search button start an animation which introduces an SearchBar with a focused SearchView. Then how this whole modal thing comes into play is still unclear to me - reusing the same RecyclerView as the main screen as is done now has it's advantages (less need to reimplement things) but it would certainly be preferable to introduce a new RecyclerView for the search results and "disentangle" the UI's a bit.
from harmonic-hn.
After experimenting a bit with search components, I've found some problems. Material design library actually doesn't support tablet search UI yet: material-components/material-components-android#3190.
Also there is no built in way to animate to/from a button. It can either slide in from the bottom or animate from SearchBar. The best workaround I've found is to have an invisible SearchBar at the same position as search button and animate from it. It looks pretty good, but not perfect.
Then how this whole modal thing comes into play is still unclear to me - reusing the same RecyclerView as the main screen as is done now has it's advantages (less need to reimplement things) but it would certainly be preferable to introduce a new RecyclerView for the search results and "disentangle" the UI's a bit.
I'd suggest separating headers from content adapter, so the same adapter implementation can be used by both main screen and search modal. This can be done by either moving headers to a Toolbar, or if you want to keep them part of recycler - by moving to a separate adapter and using ConcatAdapter to display it in the same recycler as content.
from harmonic-hn.
Related Issues (20)
- Scroll position not maintained when folding/unfolding HOT 1
- Integrated WebView blank after unfolding HOT 3
- Filter stories with less points than X
- Dialogs with discard button do not adhere to Material guidelines HOT 1
- Early text cutoff when collapsed HOT 2
- Clicking links should optionally be redirected to Nitter as well HOT 2
- Swiping back twice glitches HOT 10
- Deprecate Nitter integration HOT 1
- Can't remove unloading item from bookmarks HOT 3
- WebView crashes if Harmonic waits too long on the background. HOT 2
- Search locally askHN comments HOT 4
- Add option for pagination
- Cap scroll animation length HOT 2
- Push Tag HOT 1
- Post translator support
- Comment header HOT 2
- Polls not showing when coming from Algolia (search/submissions) HOT 1
- Comment count disappearing when doing fold/unfold HOT 1
- Folded comment count not updating HOT 1
- Clarify vote direction in toast HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from harmonic-hn.