Girish Girish - 10 days ago 6
Android Question

Google Material Design Icon - why file name doesn't name with actual size. How to use them in Android Studio without rename?

I am finding difficult to understand why Google material design icon ( https://github.com/google/material-design-icons ) file name is suffixed like 24dp , 36dp etc, even though there is already separate folder for each size (i.e. drawable-mdpi, drawable-xhdpi).

While comparing the suffix with actual file size it doesn’t match. Filename with 48dp suffix may have actual size 192x192 , similarly 36dp file name will have actual size 144x144.

Issue I face while using it, I have to manually remove these suffix and copy it in android res drawable folder (i.e. drawable-mdpi, drawable-xhdpi). Am not sure if this is right way to use them in Android Studio.

I know there must be some logic behind it but somehow I could not catch it. Hope someone can explain this logic.

Answer

DP is not the same as PX. 160dp = 160px = ~1inch on mdpi screen. But most screen today are at least xxhdpi. So to display higher density (clearer picture) for 1 inch across the screen, you need a 480px * 480px raster graphic. so 24dp you will get 15% of an inch, whereas 48dp you will get 30% of an inch when display on your device. But for smaller devices which do not need the higher resolution picture, will instead fallback to use the smaller px file in the mdpi or hdpi directory.

Also, you should download your icons via here:

  1. https://www.google.com/design/icons/
  2. https://material.io/icons/

As for the example, google already have well defined material guideline here: https://material.google.com/style/icons.html

Let's use Launcher Icon as example, it's defined as 48dp. so you need a 48px x 48px in your mdpi folder. but if that is the only resource file, then when you install it on a phone like Nexus 5X, it will look very ugly, because you also need a 144px x 144px bitmap in your xxhdpi directory. This is why you always download an icon in a set of 5 with a _??dp postfix at the end of the icon.