Sunday 21 October 2012

Advice on preparing images for an Android app

Here's some things to keep in mind when preparing (or advising or delegating to someone to prepare) graphics/images for an Android app:
  • Images file names must consist of lower case letters, numbers and the underscore character only, i.e. [ a-z | 0-9 | _ | . ]. Upper case characters not allowed. Also, all images are to be contained in a single drawable folder so better to give images meaningful names to minimise renaming etc later, e.g. myactivity_header_black.png or button_blue_pressed.png.
  • For all images which are to act as buttons, have two states: a normal state and a pressed state. Likewise, for all images which are to act as text input boxes, have two states: a normal state and a focused/selected state.
  • Device screen sizes come in all sorts. The easiest thing I find is to design for a 960*640 screen and to bear in mind when designing that some devices will be slightly taller, slighter wider etc. Also, chop screen designs down to their smallest image components so that click handlers etc can be placed on the images themselves rather than on certain co-ordinates of the screen (remember: the position of items will vary from screen to screen).
  • Related to the previous point: bear in mind that images which are to span the entire height or width of the screen (backgrounds, headers, footers etc) will get stretched and shrunk slightly depending on the screen size of the handset.
  • Avoid putting text in your images (buttons etc) except where necessary (e.g. where a special font or look of the text is required). Add text in code instead. As well as allowing images to be re-used (and thus reducing the size of the app), this also makes localisation easier.
  • Avoid padding graphics with whitespace (this can be done in code) except where necessary for shadows etc.

No comments: