Saturday, January 31, 2015

Productive Team Work With Android Designs

This post discusses the best practices to work with Android designs/graphics, and aims mostly to the process part in which all parties should work in order to achieve productive communication, save time and get to the best pixel-perfect results.


Introduction
Basic styling guidelines for Android can be found here: http://developer.android.com/ .
Explanations for supporting multiple screen is also covered here: http://developer.android.com/guide/practices/screens_support.html .

CONCEPTS

Understanding the different configurations

Android is very much fragmented and offers a lot of different configurations, we need to consider:
  • Screen sizes
    • Normal = Phones
    • Large = Tablets 7’ +
    • XLarge = Tablets 10’ +
  • Screen density
    • MDPI = ~160dpi = Ratio X1 (Referred as Base Line)
    • HDPI = ~240dpi = Ratio X1.5
    • XHDPI = ~320dpi = Ratio X2
    • XXHDPI = ~480dpi = Ratio X3
    • XXXHDPI = ~640 = Ratio X4
Rule: To make life easier, when talking in screen density, unless been told otherwise - we should always refer to the MDPI, being the easy “*1” ratio.

Planning a dynamic layout

As there’s no fixed ratio of a screen in Android, each design of the real estate needs to be planned to be stretched (Technical “cut” techniques for these types are described in “Stretching techniques” title).

Application Layouts

We always assume that the Height of the device is not a factor because it’s scrollable, so when planning layouts we look at the Width of the device at his current orientation.
In the following diagram the different options are displayed, and will be referred on as A,B,C for the remaining of the document.
We should remember that eventually even these sizes are bound to change in sizes and in ratio, solving that is further explained in next title.


Planning the “Real estate” of the screen

Intro

In order to plan right the sizes of the screen and the content we want to add to it, we need to have a canvas that can reflect each of the A,B,C configurations.
Generally, we should always prefer to plan for the smaller width’s in each category, because our layouts are always prepared to “extend” and not to “shrink” (see dynamic layout title).
Never the less, some common knowledge of Android devices market share (specifically phones) should be taken into account in this part.

Practical

For our configurations, we will plan our canvas in the following width:
    • A - 360px (suggested height starts from 480px)
    • B - 590px (suggested height starts from 640px) - Nexus 7’ but very wide (other 7’ =~ 560)
    • B - 470px (suggested height starts from 640px) - Minimum 7’ and fits also phones
    • C - 720px (suggested height starts from 960px)

CUTTING RESOURCES

General

    • PNG file format only
    • All of the states of a single UI element should have the same size.
    • If the design consists of layers, each layer should be cut separately.
      For example, a button with icon & background - the background should be a fully filled, separated from the icon.
      If there’s a text, don’t put it in the asset, the development team should add it later (so it can be localized / changed dynamically)

Stretching techniques

Full screen images

As there’s no fix size for devices display, we should either:
    • Do not use background, or
    • Use a background, but one that is designed to be cropped to fit and will look good, or
    • Use a background, but one that can naturally bleed into some solid fill to the edges, or
    • Dynamically draw the background (that’s a developer part)
Any way, the full screen image should be cut to the A,B,C layouts.

ORGANIZING RESOURCES

Screen sizes and density

Our screen sizes will be as described in “A,B,C…”.
Preferably we will want to use each and every density,
but to make the work simple and efficient we choose the densities:
    • XHDPI = ~320dpi = Ratio X2
    • XXHDPI = ~480dpi = Ratio X3
Judging by the latest Android dashboard, these configurations will be optimal. (Of course we can have the assets cut to all resolutions, but that's a lot of work for both the designer and the developer)

Style guidelines, screenshots and PNG assets
  • The different screen sizes will reflect mostly on the style guidelines + screenshots and less on the PNG assets. So we will have a general PNG assets, and if they are different for a specific screen size - we will point it out.
  • The style guideline sizes will be written in pixels in the base line (MDPI = X1)
  • for-each density we will create all of their assets in their respective way in their own folder

Folders order convention

It’s important to name the files with the same name as they will appear in different screens or densities. for that we should keep a tidy and consistent folder structure.
Format will be : ~/android/[page name]/[screen size if any]/xhdpi/the_file.png
See folder example at Appendix A.

File Naming convention

    • All lower case
    • Words separating will be done using _ (underscore)
    • Name should start with a letter (and not a number)
    • The name format should be: screen_type_name_state
      • Screen - screen name: splash
      • Type - Element type: button, bg, radio_button...
      • Name - Element name: ok, go_facebook...
      • State - Element state: pressed, idle, selected…

  • A full example: splash_button_ok_pressed.png

Icon names

Try to name files so that related assets will group together inside a directory when they are sorted alphabetically. In particular, it helps to use a common prefix for each icon type. For example:

Asset Type
Prefix
Example
Icons
ic_
ic_star.png
Launcher icons
ic_launcher
ic_launcher_calendar.png
Menu icons and Action Bar icons
ic_menu
ic_menu_archive.png
Status bar icons
ic_stat_notify
ic_stat_notify_msg.png
Tab icons
ic_tab
ic_tab_recent.png
Dialog icons
ic_dialog
ic_dialog_info.png

Remove unnecessary metadata from final assets

Quoting Android: “Although the Android SDK tools will automatically compress PNGs when packaging application resources into the application binary, a good practice is to remove unnecessary headers and metadata from your PNG assets. Tools such as OptiPNG or Pngcrush can ensure that this metadata is removed and that your image asset file sizes are optimized.”

Marketing (Google play)

Screenshots

320 x 480, 480 x 800, 480 x 854,
1280 x 720, 1280 x 800
24 bit PNG or JPEG (no alpha)
Full bleed, no border in art
You may upload screenshots in landscape orientation. The thumbnails will appear to be rotated, but the actual images and their orientations will be preserved.

High Resolution Application Icon

https://www.google.com/support/androidmarket/developer/support/bin/answer.py?answer=1078870
512 x 512
32 bit PNG or JPEG
Maximum: 1024 KB

Promotional Graphic

optional!
180w x 120h
24 bit PNG or JPEG (no alpha)
No border in art

Feature Graphic

https://www.google.com/support/androidmarket/developer/support/bin/answer.py?answer=1078870
optional!
1024 x 500
24 bit PNG or JPEG (no alpha)
Will be downsized to mini or micro

Appendix A - Folder structure and names suggestion

android/
        storage/
                xhdpi/
storage_bg_file_frame.9.png
storage_bg_folder_frame.9.png
                xxhdpi/
storage_bg_file_frame.9.png
storage_bg_folder_frame.9.png
                A/
                        xhdpi/
                                storage_button_favourite_pressed.png
                                storage_button_favourite_idle.png
                        xxhdpi/
                                storage_button_favourite_pressed.png
                                storage_button_favourite_idle.png
                B/
                        xhdpi/
                                storage_button_favourite_pressed.png
                                storage_button_favourite_idle.png
                        xxhdpi/
                                storage_button_favourite_pressed.png
                                storage_button_favourite_idle.png