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.

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 graphicnoJPEG 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

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

Action bar height

QualifierDimension
Portrait48 dp
Landscape40 dp
Tablet56 dp

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%.

Images and themesNine-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




Holo themes

Android provides three system themes:
  • Holo Light
  • Holo Dark
  • Holo Light with dark action bar

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

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
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

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




Comments

Post a Comment

Popular posts from this blog

Take the 52 Week Money Challenge and Easily Save Rs. 1,00,000 (One Lakh)

-
Image
Here's a really simple savings plan that anyone should be able to do and end up with Rs.1,37,800 more socked away by the end of the year. It starts with saving just Rs.100 the first week The next week, save Rs. 200. The third week, save Rs. 300...and so on. While these are tiny amounts, as the chart below shows, they add up to a big difference. Whether you're still working on your an emergency fund or want to earmark these savings for something special, it'll be gratifying to see your savings grow each week. For even more savings, do it in reverse. Start with week 52 and go backwards, so you can take advantage of greater compounding in your savings account The 52 Week Money Challenge has been floating around the web since at least the start of this year. (I'm not sure who the original source is, but the link below is the earliest mention I could find.) It seems like an ideal challenge to take on for the new year—or get a jump on it now. http://www.freebeer...
Read more

Remapping the Animation Hierarchy in Unity

-
Image
Working with animations in Unity has some quirks. Sometimes I will make an animation and I animated the wrong object. I might have realized I want to animate the container for an object, or accidentally animated the parent when I wanted to animate the child (this happens more often than I’d like to admit!). Cube2 has been renamed to MegaCube, breaking the animation. Unity does not come out of the box with functionality to remap animations between objects.  But there are a few options to make your life easier. I’ll go over 3 ways to fix this: the Animation Hierarchy Editor, my Search & Replace tool, and manually editing the YAML. Animation Paths – What are they? All three methods share the same thing: I want to re-map the ‘path’ of the animation clip’s property to the correct path. What do paths look like? They are simply strings that map the path from the animation root to the animated object. Game objects names are separated by a slash (/) charac...
Read more

AR Superpowers

-
Image
An intuitive design framework for generating Augmented Reality ideas. One of the best ways to think about any new technology is to map out what it empowers users to do that they previously couldn’t. For example, with AR, we can now take almost any 3D product and see it positioned in reality. This is cool, but it’s also not enough. AR has a challenging road ahead of it, headsets are still too bulky, and the capabilities of mobile AR are still too limited. For AR to succeed, the ideas can’t just be good they need to be 10x better than the non-AR alternative. We can’t afford to just empower our users we need to super-empower them. This framework is my contribution to your idealization process. I introduce six categories that (I believe) all AR experiences can be mapped to. These categories can then be used as an aid when designing AR experiences. Holographic projection Holographic projection is the ability for the user to project an idea into reality as a hologram. The user can...
Read more