Can I implement search box in a prominent app bar, trying to follow Material Design?

Question

I am designing an app with a custom app bar, which in the main screen is a prominent one, meaning it's wider than the usual one. I already have some custom features there, for example city filter. I am wondering, how I could implement a search box in there.

I attach 2 screens. Is it even ok to do something like this? It somehow bothers me, but at the same time I'm having hard time figuring anything else out.

I could also open the search box under the search icon, where there is city filter and the date sort. Would it be any better?

Do you have any other ideas?

Answer 1

There aren't really any reasons why you couldn't.

The main question to begin with is how important is your search?
If it one of the main tasks, it shouldn't be hidden behind a button and instead always prominently visible, as pointed out in this article.

---

But for your question specifically:

Two examples:

Gmail uses the standard "override" of the app bar and it works fine:

---

Contrary, the mobile site of Birkenstock displays it under the logo:

---

As you can see, it doesn't really make a big difference as long as it's understandable for the user. A good opening animation of the search bar can be helpful.

Another question you might be interested in is Should the search box be on the left or the right side.