1

Looking for some input on this. So usually, in an Android app, you have a single colored toolbar at the top with the hamburger icon on the left. We've opted to make that toolbar transparent, and allow content to be seen under it, which provides some more vertical screen space and looks pretty neat. The issue is, the menu icon is sometimes hard to see depending on the content behind it at the time. We've looked at some options but currently we've added a very slight gradient scrim to the top of the app, which helps with the menu icons visibility immensely.

The scrim does cause the content of the app at the top to appear to have a slight shadow on top of it though, so I was wondering if any of you had any other ideas on how to increase the visibility of the menu icon without using the gradient scrim.

  • 1
    It would help your question if you were to include some images. – JohnGB Jan 16 '16 at 2:02
  • Maybe you can put circle as the icon background or even you can just remove the bar with icon on circle – dannyrizal Jan 18 '16 at 8:17
1

This is a tricky issue. You could add a slight drop shadow to your menu icon.

enter image description here

If making the toolbar transparent is so important, you might want to consider doing some image sampling and inverse the background color of the toolbar. For example light background image -> black transparent toolbar, vice versa. Although I'm not sure how you can achieve that in an android app.

  • To add to what Adamso said, you could also give the icon a thin black outline, or put it in front of a transparent bar. – Jackie Zhang Jan 16 '16 at 20:22
  • Yea the content behind the icon is dynamic. There is a way to sample the color behind it and set the icon accordingly so it stands out, but with dynamic content that scrolls it would be tricky. – Orbit Jan 16 '16 at 21:32
  • Alternatively you could place a round dark banner behind the menu icon. iconfinder.com/icons/363140/… – adamsoh Jan 17 '16 at 1: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.