2

I saw something in material design guidelines that bothers me - the way how the icons are aligned to global margins: The alignment is related to the icon box and not the icon itself, for example: https://material.google.com/layout/structure.html#structure-app-bar in metrics section and hamburger button.

Within app bar, if I create icon with 24x24 dp area for it and icon centered inside then I align that square to left margin of screen (16dp) the icon itself is not aligned to that margin.

The problem is when I have a list (with text or anything else) the difference is visible.

How the alignment should be technically correct for development?

Should I align icon edge and text to global (16dp) margin (making the icon aligned to left in its square when preparing android assets) or align text to start of the icon making the text not aligned to global margin?

...or the icon edge in that "centered" square should be aligned to global margin and its square would be not aligned to that margin making it closer to the screen edge?

The difference

  • Could you link to what exactly you saw in the material design guidelines? – Cai Jun 13 '16 at 17:47
  • @Cai It's easy - for example material.google.com/layout/structure.html#structure-app-bar in metrics section you can see that alignment to global margin affects the box and not the icon itself. – ErnestW Jun 13 '16 at 17:56
  • I understood what you meant, but it's better to include any information in the question. You started with "I saw something ... that bothers me" but didn't actually say what you saw or what the guidelines state with regards to the problem – Cai Jun 13 '16 at 18:00
  • Ok, I included this info. – ErnestW Jun 13 '16 at 18:06
0

The Material Design Guidelines are, as the name suggests, Guidelines.

They are not concrete rules that you need to live and die by, they are an attempt to achieve a consistent visual language. If something in the guidelines is causing issues with your design—don't do it. It's as simple as that. The same as any other design tool, it is meant to aid you and make your life easier, if any part of it isn't doing that, ignore it.

Nowhere does it say in the guidelines that the situation you describe is what you have to or should do. The guidelines on icons suggest designing in the center of a grid. The guidelines on the app bar layout define margins/padding around icons in the app bar. But that is all. If you notice some of the icons in the example images are drawn in different sized bounding boxes (i.e. not all 24dp square or whatever you are using).

So in your situation you either draw the icon in a smaller bounding box, increase the size of the icon in the box or adjust the margins or padding around the icon.

Use the guidelines as a starting point and a guide for your design, but don't religiously follow every word written if it is hindering your design or process.

  • Yes I agree that these are only the guidelines. Maybe I'm overthinking about it because there are multiple ways to achieve same thing... Thanks. – ErnestW Jun 13 '16 at 19:21

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.