Improve search bar design on add podcast screen

[flofriday]

Description

The search bar now looks more up to date with modern android styles. I tried to get it as close to the official documentation for Search as possible.

Eventually, we could update the MDC library to 1.8 and use the SearchBar component from there but, it is not quite easy and in two separate attempts I never got all aspects of the search to work.

For now I think this is a visual improvement.

Screenshot (left: before, right: this PR):

Checklist

• I have read the contribution guidelines: https://github.com/AntennaPod/AntennaPod/blob/develop/CONTRIBUTING.md#submit-a-pull-request
• I have performed a self-review of my code
• I have run the automated code checks using ./gradlew checkstyle spotbugsPlayDebug spotbugsDebug :app:lintPlayDebug
• My code follows the style guidelines of the AntennaPod project: https://github.com/AntennaPod/AntennaPod/wiki/Code-style
• I have mentioned the corresponding issue and the relevant keyword (e.g., "Closes: #xy") in the description (see https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue)
• If it is a core feature, I have added automated tests

[flofriday]

I further tested the PR and figured out that the colors didn't work on dark theme which send me down into a rabbit whole about how we manage colors and I discovered that the colorPrimaryContainer was wrongly set to accent color when it should be more a muted background color only with a tint from the accent.

So I also changed how we set that color and now it works on all themes and even on the oldes Android versions we support (Android 5).

Screenshot (this PR dark and light theme):

[ByteHamster]

Before this change, scrolling looked a bit better, I think. Now the covers disappear behind an invisible white line (see screenshot)

[flofriday]

True that was from an experiment I did.
However, I don't think the old one looks great either.
Would it look better if the searchbar scrolled with the content?

[keunes]

To be honest I think the white line is cleaner than directly the search bar. If we want, we could add a shadow if & when scrolling.

[flofriday]

Ok I think I might have found the solution, by making the searchbar part of the appbar and tinting it once scrolled down:

Screencast of the animation:

Screen.Recording.2024-06-25.at.16.41.28.mov

[keunes]

Hmm. It is in line with the material design guidelines but it feels a bit odd to invert the colours. It somehow gives extra prominence to the search bar.

Maybe we should just scroll it away together with the rest of the content. If a user is not searching by the time they scroll, they're probably more interested in the other options (discover, add RSS url) anyway.

[flofriday]

Yeah, I see your point, but I tried that earlier and it looked odd, but I will try to get a video for you tomorrow

[flofriday]

Actually, this doesn't look as bad as I thought (though tinting the top bar really helps here which I didn't do the last time I tried it). I might actually prefer this solution (it is also a lot simpler code-wise) than the last one, though I am interested in what you think.

Screencast:

Screen.Recording.2024-06-26.at.10.24.50.mov

[keunes]

Thanks! That looks better, yes :-)

[ByteHamster]

Thanks!