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
- Please first read the manual: http://radleymarx.com/blog/simple-guide-to-9-patch/
- The supplied files should be supplied with the 1px frame marks and have a suffix filename of “*.9.png”, for example: frame.9.png
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:
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
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
No comments:
Post a Comment