CODEWITHSUNDEEP
androiduser-interfaceiconsdpipaint.net
Scott Miller
Scott Miller

Reputation: 23

How to draw in DP (Android)

I understand what dp is.... but How do I know how many pixels on my computer is to one DP? Also is there a program that I could use to work in DP when drawing? All I am looking to do is basically design an app icon right now but I can't seem to find how. I feel like the answer is right in my face. But essentially I am just wanting it to know how I know what the DP is of an image I draw in like a paint.net program. Or is there a way to calculate that? I tried (Out of curiosity) just a 24 pixel thing on my computer.... that didn't work out so well. So could anyone offer any advice? Am I able to calculate it based on my screen size? I am not against math at all, but just need to know how to make an app icon.

Upvotes: 0

Views: 650

Answers (1)

TWiStErRob
TWiStErRob

Reputation: 46480

Check the first page of Iconography Design document!
Also read Supporting Multiple Screens to understand more.

The essence of what I understood so far and how I did it for a launcher icon:

  1. Create a canvas of 512x512 pixels
    This is the size of the web icon, this is called Hi-res icon in the Developer Console
  2. Draw whatever icon you want to create
  3. Use transparency around the object you're drawing
  4. Try to make it look 3D with a little dark glow/shadow
  5. Once done, save your work as original
  6. Then open the original and export as a different sized resource (png/jpg) based on the below table and put each file into the corresponding drawable-??dpi folder:
╔═════════╦════════╦════════════╦═══════╦═══════════╦════════════╦════════════╗
║  Name   ║  DPI   ║ Multiplier ║ Ratio ║ Launcher  ║ Action Bar ║ Action Bar ║
║         ║        ║            ║       ║ icons     ║ icons      ║ margin     ║
╠═════════╬════════╬════════════╬═══════╬═══════════╬════════════╬════════════╣
║ size*   ║ -      ║ -          ║ -     ║ 48dp/48dp ║ 24dp/32dp  ║ 8dp        ║
╠═════════╬════════╬════════════╬═══════╬═══════════╬════════════╬════════════╣
║ LDPI**  ║ 120dpi ║ 0.75x      ║ 1.5   ║ 36px      ║ 24px       ║ 6px        ║
║ MDPI    ║ 160dpi ║ 1x         ║ 2     ║ 48px      ║ 32px       ║ 8px        ║
║ TVDPI** ║ 213dpi ║ 1.33x      ║ -     ║ -         ║ -          ║ -          ║
║ HDPI    ║ 240dpi ║ 1.5x       ║ 3     ║ 72px      ║ 48px       ║ 12px       ║
║ XHDPI   ║ 320dpi ║ 2x         ║ 4     ║ 96px      ║ 64px       ║ 16px       ║
║ XXHDPI  ║ 480dpi ║ 3x         ║ 6     ║ 144px     ║ 96px       ║ 24px       ║
║ XXXHDPI ║ 640dpi ║ 4x         ║ 8     ║ 192px     ║ 128px      ║ 32px       ║
║ Web***  ║ -      ║ 5x         ║ 10    ║ 512px     ║ -          ║ -          ║
╚═════════╩════════╩════════════╩═══════╩═══════════╩════════════╩════════════╝

* Optical square / full asset size, margin is the difference between them
** LDPI is auto-loaded from HDPI÷2 images, TVDPI is auto-loaded from MDPI/HDPI.
*** Web shouldn't be packaged into the AP

If you're old enough you still remember these dpi sizes as frequently used screen resolutions :)

To easily calculate any dip size you want you'll need to know what density you're looking for, for example xxhdpi size of 50dp is 3x 50px (because mdpi is 1x, i.e. 50px).

Beware: while designing the icon it'll feel too big for an icon, try to use an editor where you have constant small-sized preview (for example Paint.net displays the preview on each tab). After you resize it to the given sizes they'll feel too small, but if you put your phone next to screen they're physically bigger on the screen...

Upvotes: 0

Related Questions