Welcome to the Treehouse Community
Looking to learn something new?
Android Pro Tip - Creating assets for different screen densities
Taken from +AndroidDevelopers on G+
Today’s #AndroidDesign #Protip by +Roman Nurik is about creating assets for different screen densities.
Remember to provide your assets for all UI elements in each major density bucket, including MDPI (160dpi), HDPI (240dpi) and XHDPI (320dpi). If you want the app to look super-sharp on some of the newer devices, you should consider adding XXHDPI (480dpi) resources as well.
Some quick math Any time you work with on-screen UI elements, it’s important to size them in DIP (or DP) units. To convert between DIPs and pixels, simply use this formula:
px = dip × density ÷ 160
It’s also helpful to remember the ratio between the different densities.
MDPI : HDPI : XHDPI : XXHDPI = 2 : 3 : 4 : 6
Designing with vector shapes and large artboards Because you will need to create assets for different screen densities, it is best to start drawing assets using vector shapes on large artboards with dimensions that are multiples of the target sizes.
For example, launcher icons are 48dp square, meaning they’re 48, 72, 96, or 144 pixels wide, depending on screen density (MDPI, HDPI, XHDPI, and XXHDPI, respectively). If you initially draw launcher icons on an 864x864 artboard, it will be easier and cleaner to adjust the icons when you scale the artboard down to the target sizes for final asset creation.
Using vector shapes from the get-go will help make sure that you can easily scale your assets up or down in the future. When scaling down, it’s generally a lot easier to align the points on your vector shapes to pixel boundaries than to hand-draw pixels manually. For example, if on that large 864px artboard you align shapes to an 18px grid, those shapes will neatly fall on pixel boundaries when scaled down to MDPI, XHDPI, and XXHDPI.
That’s it for today; let us know in the comments if you have other related tips about creating assets for different screen densities!
Be sure to check the link to read the comments section (There is always a good discussion in the comments): https://plus.google.com/108967384991768947849/posts/D4qjK4HLX9u
Ben JakubenTreehouse Teacher
Good stuff, Ernest! I always found the following helpful from the Android Developer site:
To generate these images, you should start with your raw resource in vector format and generate the images for each density using the following size scale:
xxhdpi: 3.0 <=== (I added this line for reference) xhdpi: 2.0 hdpi: 1.5 mdpi: 1.0 (baseline) ldpi: 0.75 <=== (pretty safe to ignore for the most part these days!)