What deliverables do I need to request from a visual designer for my Android app?

Question

^{download bmml source – Wireframes created with Balsamiq Mockups}

I am designing an Android app game for children. I have created wireframes for each screen.

I am used to requesting graphics with specific pixel sizes. But I believe that Android uses 'density-specific graphics', not pixels. A lot of the information I have found via other answers -- e.g. http://blog.stylingandroid.com/archives/327# -- is useful but too technical for me.

a) In what exact formats do I need to request the graphics, to maximise cross-device and cross-form compatibility?

b) Should I request one graphic (multiple formats/states) for each shape? And also one graphic for each screen background; one for each button; etc?

Answer 1

Here's my summary of the comments/answer I've got so far, combined with my own research.

When requesting for Android, you need to consider two things:

1. Different screen sizes
2. Different screen resolutions

Let's assume you want to support all possible configurations. You need to provide resources for each screen size below

• Small (approx. 240px x 320px)
• Normal (approx. 320px × 480px)
• Large (approx. 400px x 800px)
• Extra Large (approx. 1024px x 800px)

Android is used on a range of devices, so 'small' and large' are categories, not specific sizes. For each individual device, regardless of screen size, you will also need to consider its resolution -- dots per inch (dpi).

Android devices are categorised as having

• low density (120dpi)
• medium density (160dpi)
• high density (240dpi)
• extra high density (320dpi)

For the 'star' graphic in my wireframe, I need my graphic designer to provide 16 versions of each graphic -- to fit on 4 screen sizes x 4 resolutions.

For some assets, e.g. a background 'wallpaper' image, both portrait and landscape mode versions may be required. So I need to request 32 (16 x 2) versions of the wallpaper image!

One other consideration is states, e.g. buttons. Interactive UI elements will require more than one state (4 states are recommended by Google).

If you don't provide all versions of the graphics, Android will automatically try to create them by scaling up/down from the versions you did supply.

So, what format? Both PNGs and JPGs are fine, but PNGs are preferred.

Android also supports a lesser-known format called 9-patch PNGs -- a useful, if technical, way to create a reusable backgrounds for buttons, etc.

There may be a neat solution in svg-android, which is a technical tool that, if implemented by your developer, uses a single SVG format file (otherwise not supported) and redraws it for all the required screen sizes and resolutions. I haven't tried the svg-android approach. It does seem to have certain limitations and restrictions. But it does seem promising.

In fact, I haven't gone through the process of requesting graphics from a designer and creating an app yet. This answer documents my research. I will update this answer when I have completed the process.

See also:
http://coding.smashingmagazine.com/2011/06/30/designing-for-android/
Smashing Magazine - Designing for Android

http://developer.android.com/guide/practices/screens_support.html#range
Android Developer Guide - Supporting Multiple Screens

Answer 2

These are the most common densities for screens on Android. xhdpi is a recent addition with phones like the Galaxy Nexus starting in ICS.

• ldpi 120dpi
• mdpi 160dpi
• hdpi 240dpi
• xhdpi 320dpi
• xxhdpi 480dpi
• xxxhdpi 640dpi

These densities are outlined on the Supporting Multiple Screens reference on the android developer site here. The ldpi density is rarely used anymore since phone screens have gotten bigger but it does still exist. Also, the xxxhdpi density is typically used for 4K televisions and is meant for supporting Google TV on 4K TVs should you choose to support that. You should mainly focus on mdpi, hdpi, xhdpi, and xxhdpi.

If you also need icon sizes, those can be found further down on the same page or here:

To create alternative bitmap drawables for different densities, you should follow the 3:4:6:8 scaling ratio between the four generalized densities. For example, if you have a bitmap drawable that's 48x48 pixels for medium-density screen (the size for a launcher icon), all the different sizes should be:

36x36 for low-density 48x48 for medium-density 72x72 for high-density 96x96 for extra high-density

The guidelines for icons using the 3:4:6:8 scaling also works for graphics instead of changing image density but would require you to account for different sized graphics in code.