I am trying to design a screen with a spinner drop-down to select a term of school, and then a search box to search in, but I cant seem to figure out how to get everything to look nice together.

To me no matter what I do it all looks squished. I really don't want to put the spinner on its own line though. Any advice?

enter image description here

  • Welcome to the site, @Tomer. Please clarify your constraints. What usability problems exist in the screen as shown? Jan 29, 2016 at 22:25

1 Answer 1


A few tips:

  • Use standard margins and padding. Paradoxically, one of the reasons why the spinner looks squished is because it's pushed up against the right side of the screen. Try giving it the same margin as you gave on the left.
  • Consider placing the search bar in the action bar and removing the title.
  • Consider extending the search field to include the eye-glass.
  • Consider using the standard card look for the search bar. Here's my take on it:

enter image description here

  • Make the suggestions full-width. It'll be less cramped and there'll be more space to show the suggestion text. From the Material design guidelines:

enter image description here

Google has a whole page on search in its guidelines, it might be useful to you.

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.