Recently I read the Design Guide on Metrics and Grids. It talks about a 48dp rythm which I should utilize in my layouts.
But the Chapter "Mind Gap" confuses me. It states:
Spacing between each UI element is 8dp.
But in this graphic:
And in the example from the same page both 8dp and 4dp are used as paddings/margins.
So what is the actual value I am supposed to use?
The guide you read talks about spacing between elements - or in other words the distance you want between elements. You should pick your paddings and margins so they add up to an 8dp distance between elements.
When two elements are next to each other (for example in a vertical list) their paddings and margins add up. To keep the 8dp distance between elements you have to use 4dp vertical padding. If you would use the 8dp everywhere you would get a 16dp distance between elements.
Just consider having two Buttons below each other like this:
The 4dp bottom padding of the upper Button and and the 4dp top padding of the lower Button add up which results in the nice 8dp distance between the two Buttons you actually want.
