Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

mockup

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?

share|improve this question
    
There's 3 basic sizes, high DPI, medium DPI and low DPI; I take it you get that by now though. –  Ben Brocka Jul 5 '12 at 15:38
    
Thanks. What specific DPI should I request for each category? And I still don't know how to request the files. Are they PNGs? And what about the dimensions -- if not pixels, what? –  Michael Heraghty Jul 5 '12 at 15:49
1  
I'd recommend PNGs to avoid artificial; most of your icons are going to be small and simple enough JPG is unnecessary. Picking target sizes I'd be interested to hear about, I've only done some basic Android stuff. Here's a good (if technical) guide straight from Google: developer.android.com/guide/practices/screens_support.html (man their resources got a lot better since I first did android stuff) –  Ben Brocka Jul 5 '12 at 15:55
    
Thanks Ben. PNG seems to be the format I need for individual graphics, but there's lot of references to '9-patch' PNG format, so I'm not sure if I need that one or regualar PNGs. Also, I've seen some reference to SVG format, so maybe that is better for scalability? And I still don't understand how to figure out what pixel size to start with. These documents are all too technical for interaction designers from a non-tech background :( –  Michael Heraghty Jul 7 '12 at 11:07
add comment

2 Answers

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

share|improve this answer
    
From an email a developer just sent me: All in all, I'd recommend you start prototyping your application before ordering any gfx. Use placeholder graphics and see how the android scaling behaves. If you don't have several android devices with different resolutions you can setup the emulator to emulate different screen sizes. –  Michael Heraghty Jul 10 '12 at 10:49
add comment

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.

share|improve this answer
    
Thanks MCeley -- but how do I know what pixel size to specify? Or do I specify pixels at all? For example, if you look at the wireframe I provided, I can ask the visual designer to provide the 'star' graphic with 4 different dpis. But he will ask me 'what pixel size'? And also, what format, e.g. PNG? –  Michael Heraghty Jul 7 '12 at 11:00
1  
PNGs are the preferred image format but JPEGs work just fine if that's your preference. Your image pixel sizes should be based around a 320x480 screen if you're using the density scaling since 320x480 is your base, mdpi, screen. For 10" tablets, your mdpi screen is 1280x720 typically. 7" tablets are kind of odd but usually fall into the 600x1024 mdpi range as does the Kindle Fire and Nook. If you design your pixel sized graphics to fit on these screens then requesting different densities should cover all your screen sizes. –  MCeley Jul 9 '12 at 19:55
    
Thanks MCeley. I'm going to try to put everything I've learned here and also researched into a separate answer below... –  Michael Heraghty Jul 10 '12 at 9:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.