1

I've been working on an Ionic (Hybrid) app that uses system-like defaults. More specifically, I am supporting the tab bar on the bottom of the screen on iOS and the top of the page on Android. My issue lies with Android. There is a page I am working on that has a tab bar and an input field that allows users to filter from a visible list. When a user is using the filter field it will ultimately leave them with a small space to see results because the keyboard takes up what remaining space there is. On iOS this is not an issue because the tab bar is on the bottom of the screen, below the keyboard.

Here's a quick sketch of what I'm talking about. iOS is on the right and Android is on the left. I realize the keyboards may not be the correct scale, what I'm trying to communicate is that there is much less space on Android. Is it common to remove the tab bar on activation of the filter input?

comparison of android and ios with keyboards up

Is there a standard for this type of interaction? I am not a mobile designer or developer, so I have never run into this issue before. Any info would help, thanks.

  • I just moved the tab bar for Android to the bottom of the screen, permanently. – Seanevd Apr 15 '16 at 20:44
0

It is perfectly reasonable to hide the Tab Bar (at the top of screen) when drilled-in (as is slightly the case here, drilling in by focusing on an EditText, which displays the soft input and subsequently infringes on content realestate).

I think using a Bottom Navigation for Tabs is a fine solution here too, although Material purists may argue that you should never use it if less than 3 tabs the reality is that rules can be negotiated against in design so as to provide an overall best experience or a best experience for your target market.

|improve this answer|||||
  • Thanks for answering after all these years. I did end up sticking the nav items in on the bottom of the page, I think. The app has been redesigned a couple more times since I posted this question by much better designers than myself. Also, as far as I know, material design doesn't even support having the navigation items along the top of the app anymore. But thanks again. – Seanevd Jan 6 at 17:13
  • re: material tabs at the top (by top I mean towards the top, typically under a Toolbar if you display a Toolbar): material.io/components/tabs/#usage shows that the place for Tabs is towards the top. – straya Jan 6 at 23:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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