Tuesday, 18 August 2015

Android Cheatsheet for Graphic Designers

source:http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/#screen-densities-and-icon-dimensions

Android Cheatsheet for Graphic Designers

Graphic designers aren't programmers and sometimes don't know how to properly prepare graphic assets for developers. This simple cheatsheet should help them to do their job better, and to simplify developers' lives.

Content

  1. Dimensions
    1. Screen densities and icon dimensions
    2. Google Play asset dimensions
    3. Dimension units
    4. Size buckets
    5. Views dimensions and spacing
    6. Action bar height
    7. Text size
  2. Images and themes
    1. Nine-patch
    2. Colors
    3. Holo themes
  3. Naming conventions
    1. Naming conventions for drawables
    2. Naming conventions for icon assets
    3. Naming conventions for selector states
    4. Organizing drawables to directories
  4. Resources
    1. Graphic generators
    2. Useful links for designers
    3. Download
  5. Written by

Dimensions

Screen densities and icon dimensions

QualifierDPIScaling factorLauncher iconAction bar, tab iconNotification icon (API 11)Notification icon (API 9)Notification icon (older)
ldpi1200.7536 x 36
32 x 32
24 x 24
18 x 18
18 x 18
16 x 16
12 x 19
12 x 12
19 x 19
16 x 16
mdpi1601.048 x 48
42 x 42
32 x 32
24 x 24
24 x 24
22 x 22
16 x 25
16 x 16
25 x 25
21 x 21
hdpi2401.572 x 72
64 x 64
48 x 48
36 x 36
36 x 36
33 x 33
24 x 38
24 x 24
38 x 38
32 x 32
xhdpi3202.096 x 96
84 x 84
64 x 64
48 x 48
48 x 48
44 x 44
32 x 50
32 x 32
50 x 50
42 x 42
xxhdpi4803.0144 x 144
126 x 126
96 x 96
72 x 72
72 x 72
66 x 66
48 x 75
48 x 48
75 x 75
63 x 63
Notice: the first icon dimension in table cell is full asset size, the second icon dimension is optical square. Dimension values are in pixels.
Tip: creating ldpi assets is not really needed anymore. The devices are rare and the platform will just scale down mdpi.

Google Play asset dimensions

Asset TypeRequiredImage typeDimension
ScreenshotyesJPEG or 24-bit PNG
(no alpha)
min length for any side: 320 px
max length for any side: 3840 px
High-res app iconyes32-bit PNG
(with alpha)
512 x 512 px
Feature graphicyesJPEG or 24-bit PNG
(no alpha)
1024 x 500 px
Promotional graphicnoJPEG or 24-bit PNG
(no alpha)
180 x 120 px
Video linknoURL of YouTube video-

Dimension units

UnitUnits / physical inchDensity independentSame physical size on every screen
pxvariesnono
in1yesyes
mm25.4yesyes
pt72yesyes
dp~160yesno
sp~160yesno

Size buckets

TypeDimension
Handsetsmaller than 600 dp
Tabletlarger than or equal 600 dp
Size buckets
Notice: one dp (density-independent pixel) is one pixel on a 160 DPI screen.
Sources and useful links: Metrics and Grids

Views dimensions and spacing

Touchable UI components are generally laid out along 48 dp units. Spacing between each UI element is 8 dp.
48dp rhythm
Button dimensions and spacing
Form dimensions and spacing
Sources and useful links: Metrics and Grids

Action bar height

QualifierDimension
Portrait48 dp
Landscape40 dp
Tablet56 dp
Sources and useful links: Action Bar

Text size

TypeDimension
Micro12 sp
Small14 sp
Medium18 sp
Large22 sp
Notice: one sp (scale-independent pixel) is one pixel on a 160 DPI screen if the user's global text scale is set to 100%.
Sources and useful links: Typography

Images and themes

Nine-patch

A Nine-patch drawable is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the view in which you have placed it as the background, e.g. nine-patch background for button, which must stretch to accommodate strings of various lengths. The rules for nine-patch image are following:
  • Standard PNG image with alpha
  • Filename suffix is ".9.png", e.g. "btn_login_normal.9.png"
  • Image has an extra 1 pixel wide border, used to define the stretchable/static/padding areas
  • Stretchable sections are indicated by 1 px wide black line(s) in the left and top part of the border
  • Static sections are indicated by fully transparent or white pixels
  • Padding area (optional) is indicated by 1 px wide black line in the right and bottom part of the border
Nine-patch

Colors

Use color primarily for emphasis. Blue is the standard accent color in Android's color palette. Note that red and green may be indistinguishable to color-blind users. Primary colors are as follows:
  • #33B5E5
  • #AA66CC
  • #99CC00
  • #FFBB33
  • #FF4444
  • #0099CC
  • #9933CC
  • #669900
  • #FF8800
  • #CC0000
Sources and useful links: Color

Holo themes

Android provides three system themes:
  • Holo Light
  • Holo Dark
  • Holo Light with dark action bar
Sources and useful links: ThemesHolo Everywhere

Naming conventions

Naming conventions for drawables

File names must contain only lowercase a-z, 0-9, or _.
Drawables for the specific views (ListView, TextView, EditText, ProgressBar, CheckBox etc.) should be named like this views keeping the naming rules, e.g. drawable for CheckBox should be named "checkbox_on_bg.png".
Asset TypePrefixExample
Action barab_ab_stacked.9.png
Buttonbtn_btn_send_pressed.9.png
Dialogdialog_dialog_top.9.png
Dividerdivider_divider_horizontal.9.png
Iconic_ic_star.png
Menumenu_menu_submenu_bg.9.png
Notificationnotification_notification_bg.9.png
Tabstab_tab_pressed.9.png
Sources and useful links: naming conventions taken from the Android SDK

Naming conventions for icon assets

Asset TypePrefixExample
Iconsic_ic_star.png
Launcher iconsic_launcheric_launcher_calendar.png
Action bar iconsic_menuic_menu_archive.png
Status bar iconsic_stat_notifyic_stat_notify_msg.png
Tab iconsic_tabic_tab_recent.png
Dialog iconsic_dialogic_dialog_info.png
Sources and useful links: Icon Design Guidelines

Naming conventions for selector states

StateSuffixExample
Normal_normalbtn_order_normal.9.png
Pressed_pressedbtn_order_pressed.9.png
Focused_focusedbtn_order_focused.9.png
Disabled_disabledbtn_order_disabled.9.png
Selected_selectedbtn_order_selected.9.png
Sources and useful links: Touch Feedback

Organizing drawables to directories

One drawable must have the same file name for all screen densities (ldpi, mdpi, hdpi etc.) and all these files must be organized according to density into the following directories. Here's the resources directory structure for drawables:
  • res
    • drawable-ldpi
    • drawable-mdpi
    • drawable-hdpi
    • drawable-xhdpi
    • drawable-xxhdpi

Resources

Graphic generators

No comments:

Post a Comment