How to start designing Android apps in Photoshop & what is a dp?

Google Android Screen and Icon size illustration

July 2014 EDIT: Android’s “L” design guidelines now supply templates in Adobe Illustrator, making it even harder for designers user to Photoshop or Fireworks. They don’t provide an answer for how you should crop and optimise your assets for the developer (I assume they’d rather you didn’t and just use their native stuff).

See www.google.com/design/

July 2014 EDIT: On consideration of comments from NexogenDev, I have removed the more explicit reference to 72dpi in the graphic above to “1dp = 1px” as this is a more literal starting point and probably better. My point was that Android supplied templates and assets tend to open by default in Photoshop as 72dpi, but dpi in general is misleading in this context.

 

Android screen resolution and density

I found it hard to know where to start designing for Android in Photoshop.

Google tries to help by providing extensive Android user Interface Design Guidelines.  There are many devices running Android that have different screen sizes and shapes. There are also different screen densities, which means the quality of the definition of the screen or how many pixels fit in the same sized area on the screen – e.g. medium screen density has 160 pixels in every inch on the device’s screen, whereas an extra high density screen has twice as many, 320 pixels, crammed in an inch. To cover the different densities you need to supply graphics and icons at various densities.

Creating a design that will work for all these devices can be daunting. You also need to create different density icons and graphics.

1. Minimum handsetscreen size

I started with a minimum mobile handset size screen first. Starting with the smallest and most limited screen size first makes sure your content and UI will fit, removing any features that aren’t completely necessary to the core purpose of the app. Then you can work out how your app will behave on larger and tablet sized screens. You need to decided if your app is going to stretch to fit larger screens, or if you’re going to have a completely different layout and design for tablet sized screens.

2. Photoshop image size

I choose to start with a small mobile handset and a small 7″ tablet screen as a base for design and then think of how that could scale elagantly.  You may need to create portrait and landscape versions if you plan on allowing users to change orientation.

Here are some Photoshop templates

3. Download Android design templates

If you are new to designing for Android, and are confused by dpi, I STRONGLY RECOMMEND you use native Android styling and assets, rather than doing a completely custom design at first.

See www.google.com/design/

It is important to keep the icons at the same proportion to maintain the correct “hit” area for the user’s finger.

downloads_stencils

4. Scale down

It’s easier to work at the higher pixel density, XXHDPI. It is always advisable to create icon art as vectors in “Smart Objects, or as “shapes” in Photoshop so they can be scaled up or down without loosing quality.

The benefit of working at XXHDPI is that you can be sure you are not loosing any quality.

XXHDPI – 300% – x3.o
XHDPI
 –  200% – x2.o
HDPI –  150% – x1.5
MDPI – 100% – x1.0
LDPI – 75% (don’t bother with this!) – 0.75

When using vectors, you may want to adjust your line art to tighten up any half pixels or it can look blurry at the edges (if you’re a perfectionist like me).

5. Workflow

  • Create you design PSD at XXHDPI
  • Crop out your graphic assets and icons as separate PSDs
  • Scale them down to the various densities: XHDPI, HDPI, MDPI

My method is to design one PSD, crop out the icons assets as PSDs, then scale them to the different densities. I often start with a PSD at XXHDPI or MDPI (providing my artwork is vector and can be scaled up or down), then I crop out the icons and assets out, then resize them.

The reason this is easier is that when you need to make design changes, you don’t have to change multiple PSDs.


What the frakk is a DP?

Here’s what I discovered after a few hours of scratching my head and moaning…

  1. “dp” is a magic, made-up measurement that only exists in the world of The Matrix & Tron.
  2. Android icons are 32dp x 32dp @ the medium density MDPI
  3. Android supply sample icons (Edit: they don’t any more the gits) and if you open an icon from the MDPI folder in Photoshop, the icon is 32px x 32px with “image size”.
  4. SO, in Photoshop:1dp = 1px @ MDPI – 100%
    1dp = 1.5px @ HDPI – 150%
    1dp = 2px @ XHDPI – 200%
    1dp = 3px @ XXHDPI – 300%
    1dp = 4px @ XXXHDPI – 400%
  5. It doesn’t matter what DPI you have set in PHOTOSHOP, it’s the canvas size (the number of pixels available) that counts.

If you have a better way of getting started designing in Android, or if I’ve made an errors, please let me know.

Here are some Photoshop templates at MDPI and HDPI to give you an idea.

Please see my new guide: How to design for new iPhone 6 Plus resolutions in Photoshop

Published by

Graham

I’m a user experience and user interface designer based in Hackney, London

93 thoughts on “How to start designing Android apps in Photoshop & what is a dp?”

  1. Hi! Nice article..

    I’ve designed an app for Android with Photoshop document like this: 1080 x 1920 (that is XXHDPI) y 72 pi. All assets and icons are vector.
    With Android Preview it’s good on my smartphone (Alcatel One Touch Idol 6030 ).
    My question is: what have i to do now to make possible that my design app is correctly visible on all devices?

    Thanks and sorry for my english that is not good!

    1. You need to see how your design will look on a smaller handset, such as I show above. Then, you can also make a design to show how the app will look on tablet sized screens.

      1. ok, thanks, but what kind of smaller handset? there are a lot…
        I tried with a Samsung I9100 and the status bar look “cuted”, it doesn’t show me all the status bar…

        Thanks a lot!!

    2. May I chime in… Android automatically scales the app UI/Icon based on the handsets dpi… All you have to worry about is placing your assets in the correct dpi folders and Android will do the rest.

  2. For those who only have Photoshop and do not want to shell out the cash for illustrator. Inkscape is an incredible vector based alternative and its FREE!!! In regards to the Android L support for illustrator. There’s ways to use illustrator templates in inkscape… I’ll report back with more info.

  3. Here is a command line application for creating density assets from Markus:

    I wrote a command line tool which can convert icons automatically to the right sizes for the different screen densities and which also saves everything in the right directories – it even supports the version structure of androids res/ folder. Nicest thing about it is that it can also replace colors. This makes it very powerful when you want to have different versions of your icon (“enabled”, “disabled”) or (“dark” and “light” theme). Have a look at it 🙂 It runs on Linux and Windows.

    http://www.android-msapps.com/index.php?category=dev&subcategory=converter

  4. I am new to Android design, i have seen mdpi, ldpi and hdpi what are these terms and if i am going to design in psd should I design for three different size or I will create one standard and only graphic assets will be created for those mdpi, ldpi and hdpi.

    Please assist me I am very confused

    1. To help explain these terms is why I wrote the post above. In brief: design at higher resolution, crop out and scale down graphics at each of the densities: xxxhdpi, xxhdip, xhdpi, hdpi, mdpi.

  5. THANK YOU!… I was SCRATCHING my head all day reading the Android docuemnts… and was a mess with DPI that was not PH dpi… and the docs that were in 72dpi for MDHDPI that was 160dpi and “WTF?” was my brain saying…
    Your article was useful to know that I wasn´t going mad over nothing… THANKS A LOT! 😉 d

  6. Hi there, great article!

    Question:
    At the example image:

    Android screen resolution comparison

    The first screens is MDPI
    The second is XHDPI
    The third again XHDPI
    And the fourth is XXHDPI

    So was it intentional or the second should be HDPI???

    Thank you,
    Katalin

    1. If you look at the icons at the top, you’ll see the 480×960 screen has the same icon size as the XHDPI 720 x 1280 screen – so I think I was making the point that even small hand set screen sizes can still have @2x resolution – such as the iPhone for instance. Although, to be honest, it’s been a while since I made that graphic!

  7. I think there´s a mistake in your “Android screen resolution comparison”, you have repeated the XHDPI density, so if I’m not wrong 480X960 px must be just HDPI density. Beside that it’s a very educational article, thanks.

    1. You’re not the first to notice that, and I don’t know what I was thinking, but if you look at the icons at the top, you’ll see the 480×960 screen has the same icon size as the XHDPI 720 x 1280 screen – so I think I was making the point that even small hand set screen sizes can still have @2x resolution – such as the iPhone for instance.

  8. If this is the calculation for screen size

    XXHDPI – 300% – x3.o
    XHDPI – 200% – x2.o
    HDPI – 150% – x1.5
    MDPI – 100% – x1.0

    then the screen size should be

    320 x 480 – MDPI
    480 x 720 – HDPI
    640 x 960 – XHDPI
    960 x 1440 – XXHDPI

    How come the screen resoulution comparison is diffrent above.

    Pls guide i am confused.

    1. The screen sizes I’ve used are based on popular devices, and screen manufactures don’t follow the rules. Also, you can have a mobile handset screen (e.g. 640 x 960) and a tablet screen (e.g. 1536 x 2048) and they both use the same density of images.

  9. Screen resolution for android device and Apple(iPhone) device are not same but in android we’ll use MDPI , HDPI , XHDPI , XXHDPI for all the resolution…..

    but in case of apple(iPhone) device the resolution ratio is changed then what can i do for apple(iPhone) device.

    or i have create psd for only android resoutions.

Leave a Reply