Mobile app version of vmapp.org
Login or Join
Jamie315

: Material design icon alignment in its box for creating android assets I saw something in material design guidelines that bothers me - the way how the icons are aligned to global margins: The

@Jamie315

Posted in: #Android #GoogleMaterialDesign #InterfaceDesign #Slices

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: 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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Jamie315

1 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme