I looked at various implementations of Material Design and it seems that they all have height: 64px and I am wondering why ? What is the calculation based on ? Why not 65px or 50px ?

2 Answers 2


The main reason is to ensure adequate touch target size on buttons in the bar. MD spec recommends these be at least 48px and in most cases need 8px on each side: enter image description here

However, the App Bar in Material Design is not actually always 64px.

On Mobile devices it is 56px - which is made up of 16px padding and 40 pixel icon height:
enter image description here

On Desktop it is 64px:enter image description here

While the dense version is 48px:enter image description here

Or for the prominent app bar 128px:enter image description here


According to Material Design Guidelines:

All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.

The elements share a multiple of 8. enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.