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?

enter image description here

enter image description here

1 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:

enter image description here

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

enter image description here

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.

  • thanks, but my main concern is how to provide the best solution in the prominent (wide) appbar. The examples that you've provided show a regular (small) bar with Google turning the bar into the search box (I am familiar with that solution) and Birkenstock showing another bar just for the time of user searching. So I still am looking for my unique situation to be discussed :) Oct 8, 2018 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.