A mysterious density-independent pixel. A quick introduction to Android design.
If you are reading this article you still wonder how to deal with the mysterious “dp” (density-independent pixel).
Around 3 years ago I started designing for Android and at once the unknown world of xxhdpi, dp, sp opened the doors to me. It was hard to understand the usage of device-independent pixels, scaleable pixels, as well as concepts like pixel density. So I surfed dozens of articles and developers’ blogs to understand what it was all about. But when it came to preparing assets for developers it was another drama of rescaling, saving & naming each slice.
As the UI design role & mobile industry grows too fast, today we have a huge amount of tools with one-click-solve-problem options to put at ease the designer’s life.
One of these days I was trying to explain the “dp basics”, the design process & working with developers to an Android UI novice, so I share the summing-up with you.
Android densities
There are a lot of Android devices with different sizes and proportions and each screen has its density.
The set of Android screen densities is:
- ldpi (low) ~120dpi
- mdpi (medium) ~160dpi
- hdpi (high) ~240dpi
- xhdpi (extra-high) ~320dpi
- xxhdpi (extra-extra-high) ~480dpi
- xxxhdpi (extra-extra-extra-high) ~640dpi
Looks scary, right?
No worries, if you design for mobile, forget about ldpi (this kind of low-density devices are in danger of extinction).
What is dpi?
DPI is a density-independent pixel. Thanks to dp the UI elements look uniform on screens with different densities.
1 dp equals 1px in 160dpi screen (MDPI screen). More density the screen has, more pixels it has. Android Developers Page gives all the profound analysis on the topic.
How to design in dp?
You shouldn’t really design in dp, you should design in pixels having dp in mind.
Each density screen has its equivavelnt in pixels, so just choose the density you want to design for and set the pixel equivalent artboard.
Everybody loves Sketch
Since Sketch app appeared, the UI design process became more intuitive, efficient & fun!
If you decided to try yourself as a UI designer but previuosly worked with Adobe Creative Suite, don’t be scared to try SketchApp. You’ll be surprised how clear the things are over there & how fast you’ll feel comfortable using it.
Android Sketch resources
There is nothing better for you as a novice in Android as using the existing templates to analyse the UI structure.
The official Material Design page provides you with a set of resources — from colour palettes to layout templates.
You can also find some useful templates on Sketchappsources.
Some templates offer you the MDPI layout (360x480px), others XHDPI (720x1280px).
Zeplin makes final Magic
3 years ago I had to make all the assets and specs manually. Then Sketch appeared & made it easier. But the real dessert is Zeplin. It generates resources, color palettes and styleguides in 1 click.
No matter what density screen you are using for your design. When exporting artboard to Zeplin, you just have to choose the density you use and Zeplin generates resources for all screens.
Hope it was useful for you. Thank’s for reading!
