See also #110

This is a discussion on search and filter UI based on the work and discussion from TeamNewPipe/NewPipeExtractor#124

@Bluesir9 @theScrabi Here are my ideas for the search and filter UI. I think it is better to put this into the app repo, because UI discussions do not belong into the extractor repo. I tried to explain briefly, what my intentions and ideas were to make the benefits and disadvantages a bit clearer.

TLDR; you can find the drafts at the end. It might be good to take a look at them before reading the text so the text is better understandable.

First of all, there were some things to consider before taking a look at the actual design.

NewPipe downloads a complete website for each search. That's why, I decided to make the filters directly visible, so people can see and change them before performing the search. This should be quite time and data saving.
Nevertheless, I am not that happy with the current position of the filter bar. While typing the search suggestions change and should help the user to suggest the search query he is looking for. Therefore, the filter bar seems to be "in the way" - just like a visual barrier. I considered to place the bar at the bottom of the screen. But this was also quite annoying, because the keyboard needs much space and the filter bar seems to be lost down there. Do you have any suggestions where to put it instead?

Because I decided to show the filters, I needed to group them, otherwise the bar contains too much info at once and is messy. Fortunately, the filters are already grouped by YouTube. Displaying text is a bad thing as it a) needs to be translated and b) people need way more time to read a text compared to see and understand an icon. Icons are intuitive and can be recognized later on. The difficult part here was to find icons which match the meaning of a group. I could not decided which icon to use for the duration category. I'd say, I prefer the clock icon above the timer because it matches with the two filters best. In other words, the disabled state looks quite similar to the to other states (short and long).

Apropos state. I didn't mention it before, so I do now. In the filter bar, there are five icons, each for one category. Most categories allow only one of their filters to be applied at a time. For example, the type category has six states: video, channel, playlist, movie, show and disabled / inactive (currently represented in NewPipe by all). Filtering by all and video is not possible. The second idea behind showing the filters in the bar represented by icons is to display their current state. This means, we replace the category icon when a filter is selected.. This needs a bunch of icons which represent the active filter. For most filters, good icons already exist (e.g. video, channel, playlist, thumb up for best rated etc.) and are easy to find.
But finding good icons for the upload date and features groups drove me crazy.
I couldn't find a way to abstract their filters without using numbers and letters. My decision is to represent the times by using the calendar and putting the time into it (see below).
There are too many features and in difference to all the other categories YouTube allows to apply multiple feature filters. Therefore we need to handle them different to the others.

For the "normal" categories I suggest to show a normal dialog containing the icon and filter name whereas the feature filter needs a bit more work. There are eleven feature filters provided by YouTube. I am not sure how many we want to show (We could either show all and ignore that our players do not support all features yet and provide the download of the videos so the user can an an other player, or just reduce the list to those filter which are supported by exoplayer).

Nevertheless, we need a different UI, because the single click dialogs are quite nonfunctional for this purpose. All together I needed to decided between two concepts: display the features as "badge" / "chip" or use the settings style with a toggle.
One one hand, we can put the chips after selecting them right into the filter bar. This allows the user to still see all applied filters. As said above, I'd like to achieve this behaviour. As a bonus, users are able to remove the filter chip with ony one click/touch. The big questions is how to select the chips. The material guidelines for chips suggest to use horizontal scrolling whenever the chips need more than two rows, because otherwise the screen looks quite messy. However, I think we can ignore this suggestion when we use a blank fragment to select the chips from and group then in a smart way.
On the other hand, we do not need to show the currently applied feature filters in the filter bar. This allows us to not use chips to select the filters. I think it is not intuitive to use setting-like toggles to enable something which than appears as a chip somewhere else.
I'd like to go with the chips, but am open to your feedback, which is btw. appreciated to all things here, but in particular to this topic.

Just my two cents regarding the type filter: Apart from the video, channel and playlist filter, we can now support the movie and show filter. We might consider to disable the movie filter in the app, because the extractor currently does only render the video-render objects, but not movie-render objects. Nevertheless, movies need do be purchased, a login is therefore required. So the movie filter might not bring the expected results because only free "movies", which are uploaded as video, are shown in the results.

Filter Icons

General filter UI and behaviour

We can also put the feature filters into a new row instead of appending them.