1

I carefully read the definition of dp in this page:https://www.google.com/design/spec/layout/units-measurements.html and draw a conclusion that 1dp should be representing a physical size of 1/160inch, no matter in what device. And this question Is dp based on the physical size of the screen? (dp =1/160 of an inch) endorses my conslusion. Then I come across this image this image on this page. According to the page, the gray circle should be 40dp, which is 0.25 inch. In this fiddle you can see actual 0.25inch comparing to the 40dp in this image. I ask myself, is this image being enlarged so the 40dp on it looks much bigger than 0.25inch? I compare the image to my nexus 6, on that page they are about the same physical size. And the elements on this picture look normal as if they are in a real device. Which means, if I implement this 40dp/0.25inch circular icons on my cellphone, they are definitely going to look horribly small. I understand that sometimes 1dp might be a little different from 1/160 inch, but it won't shouldn't be a huge difference lke this. This is where I got confused and had to come here asking for help. Did google really suggest that the gray circular be 40dp and 0.25inch?

Community
  • 1
  • 1
shenkwen
  • 3,536
  • 5
  • 45
  • 85

2 Answers2

0

I think you're wrong assuming the fiddle accurately represents 0.25 inch in relation to the screenshot. It chooses a value unrelated to the image, since it has no information about the screen density of the device that the screenshot was taken on.

From my experience 40dp is about the size of a fingertip on a physical device. Google itself promotes 48dp as a good size for clickable items (https://www.google.de/design/spec/layout/metrics-keylines.html).

snowdragon
  • 439
  • 1
  • 5
  • 11
0

If you open Android GMail app you'll find that, indeed, its icons are 40x40 dp and the physical size is around 0.25 inch (0.6~0.7 cm, 120x120 pixels on XXHDPI).

However you'll also notice that:

  1. It's not as small as the size would imply (ok it may look smallish on N6)
  2. The spec is specifying the visual portion of the design, not the interaction part. If you enable "Show touches" in Developer Options and click around the icon in GMail, you'll see that the actual clickable area of the icon is close to 80x80 dp, which is plenty enough as a touch target.
Kai
  • 15,284
  • 6
  • 51
  • 82