Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

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

1 Answer

Ben Jakuben
Ben Jakuben
Treehouse 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!)