8

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?

4
  • 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, 2012 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? Jul 5, 2012 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, 2012 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 :( Jul 7, 2012 at 11:07

2 Answers 2

5

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

1
  • 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. Jul 10, 2012 at 10:49
5

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.

3
  • 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? Jul 7, 2012 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. Jul 9, 2012 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... Jul 10, 2012 at 9:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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