Best way pack buttons horizontally

Question

Take a look at the screenshot above. I found it here and it offers a handy pattern for what I need to do in my own app: show a lengthy list which should be easily filterable. The only issue is that I need to allow the user to select/deselect from a larger number of categories - 9 at present. The options I have considered

• Using a dropdown for the purpose but it looses the intuitiveness and immediacy offered by a horizontal row of radio buttons.
• replacing the text with icons would offer a mechanism to pack in a larger number of buttons but a good number of users would be left scratching their heads trying to figure out just what the icons mean
• Using multiple rows of buttons which is liable to look clumsy

I should explain that the context for all of this is an Android app destined for phones rather than tablets and intended for use only in portrait mode so the width I have available to play with is rather limited.

I hope that someone here might be able to offer some suggestions.

---

Thank you for the suggestions. I should mention that the buttons I mention are more by way of being filters rather than tabs - they allow the user to drill down to a specific category of list items. I like the idea of a few items and then a "More" drop down. In the mean time I had done this

Clicking on the menu button, top left, shows this list of categories from which the user can elect to drill down. It lacks the immediacy of showing a few categories and then a More... dropdown so I might in fact do that in the end. However - not being a real designer or Material Design guy - I am curious to know how such an implementation (i.e. my current one) would go down with users in general and the design crowd in particular.

Answer 1

If I understand correctly, your buttons are Tabs. In Material design, these are the different solutions:

• "More" dropdown menu

• Overflow pagination

• Scrollable tab bar

The last one is only meant for touch devices. The first two are meant for desktop, and although the last one is more appropriate, I think these could also be used.

Answer 2

You could use a scrollable tab bar, similar to https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp (but with better indication of being scrollable). That way people can still switch between adjacent/nearby categories in 1 tap.

However it might be simpler to use icons for tabs, depending on the subject matter and categorization.