16/03/2016

AndroidCheatsheetforGraphicDesigners

AndroidCheatsheetforGraphicDesigners
Graphicdesignersaren'tprogrammersandsometimesdon'tknowhowtoproperlypreparegraphicassetsfor
developers.Thissimplecheatsheetshouldhelpthemtodotheirjobbetter,andtosimplifydevelopers'lives.

Content
1.Dimensions
1.Screendensitiesandicondimensions
2.GooglePlayassetdimensions
3.Dimensionunits
4.Sizebuckets
5.Viewsdimensionsandspacing
6.Actionbarheight
7.Textsize
2.Imagesandthemes
1.Ninepatch
2.Colors
3.Holothemes
3.Namingconventions
1.Namingconventionsfordrawables
2.Namingconventionsforiconassets
3.Namingconventionsforselectorstates
4.Organizingdrawablestodirectories
4.Resources
1.Graphicgenerators
2.Usefullinksfordesigners
3.Download
5.Writtenby

Dimensions
Screendensitiesandicondimensions
Qualifier DPI

Scaling
factor

ldpi

120 0.75

mdpi

160 1.0

hdpi

240 1.5

xhdpi 320 2.0

xxhdpi 480 3.0

Launcher
icon
36x36
32x32
48x48
42x42
72x72
64x64
96x96
84x84
144x144
126x126

Actionbar,
tabicon
24x24
18x18
32x32
24x24
48x48
36x36
64x64
48x48
96x96
72x72

Notificationicon
(API11)
18x18
16x16
24x24
22x22
36x36
33x33
48x48
44x44
72x72
66x66

Notificationicon
(API9)
12x19
12x12
16x25
16x16
24x38
24x24
32x50
32x32
48x75
48x48

Notificationicon
(older)
19x19
16x16
25x25
21x21
38x38
32x32
50x50
42x42
75x75
63x63

Notice:thefirsticondimensionintablecellisfullassetsize,thesecondicondimensionisopticalsquare.
Dimensionvaluesareinpixels.
Tip:creatingldpiassetsisnotreallyneededanymore.Thedevicesarerareandtheplatformwilljustscaledown
http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

1/7

16/03/2016

AndroidCheatsheetforGraphicDesigners

mdpi.
Sourcesandusefullinks:Iconography,SupportingMultipleScreens,IconDesignGuidelines,Dimension

GooglePlayassetdimensions
AssetType

Required

Screenshot

yes

Highresappicon

yes

Featuregraphic

yes

Promotionalgraphic no
Videolink

no

Imagetype
JPEGor24bitPNG
(noalpha)
32bitPNG
(withalpha)
JPEGor24bitPNG
(noalpha)
JPEGor24bitPNG
(noalpha)
URLofYouTubevideo

Dimension
minlengthforanyside:320px
maxlengthforanyside:3840px
512x512px
1024x500px
180x120px

Sourcesandusefullinks:GraphicandImageAssets,GooglePlayFeaturedImageGuidelines,Iconography

Dimensionunits
Unit Units/physicalinch Densityindependent Samephysicalsizeoneveryscreen
px varies
no
no
in 1
yes
yes
mm 25.4
yes
yes
pt 72
yes
yes
dp ~160
yes
no
sp ~160
yes
no
Sourcesandusefullinks:UnderstandingDensityIndependenceinAndroid

Sizebuckets
Type
Dimension
Handset smallerthan600dp
Tablet largerthanorequal600dp

http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

2/7

16/03/2016

AndroidCheatsheetforGraphicDesigners

Notice:onedp(densityindependentpixel)isonepixelona160DPIscreen.
Sourcesandusefullinks:MetricsandGrids

Viewsdimensionsandspacing
TouchableUIcomponentsaregenerallylaidoutalong48dpunits.SpacingbetweeneachUIelementis8dp.

Sourcesandusefullinks:MetricsandGrids

Actionbarheight
http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

3/7

16/03/2016

AndroidCheatsheetforGraphicDesigners

Qualifier Dimension
Portrait
48dp
Landscape 40dp
Tablet
56dp
Sourcesandusefullinks:ActionBar

Textsize
Type Dimension
Micro 12sp
Small 14sp
Medium 18sp
Large 22sp
Notice:onesp(scaleindependentpixel)isonepixelona160DPIscreeniftheuser'sglobaltextscaleissetto
100%.
Sourcesandusefullinks:Typography

Imagesandthemes
Ninepatch
ANinepatchdrawableisastretchablebitmapimage,whichAndroidwillautomaticallyresizetoaccommodate
thecontentsoftheviewinwhichyouhaveplaceditasthebackground,e.g.ninepatchbackgroundforbutton,
whichmuststretchtoaccommodatestringsofvariouslengths.Therulesforninepatchimagearefollowing:
StandardPNGimagewithalpha
Filenamesuffixis".9.png",e.g."btn_login_normal.9.png"
Imagehasanextra1pixelwideborder,usedtodefinethestretchable/static/paddingareas
Stretchablesectionsareindicatedby1pxwideblackline(s)intheleftandtoppartoftheborder
Staticsectionsareindicatedbyfullytransparentorwhitepixels
Paddingarea(optional)isindicatedby1pxwideblacklineintherightandbottompartoftheborder

http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

4/7

16/03/2016

AndroidCheatsheetforGraphicDesigners

Sourcesandusefullinks:CanvasandDrawables,Draw9patch,SimpleNinepatchGenerator

Colors
Usecolorprimarilyforemphasis.BlueisthestandardaccentcolorinAndroid'scolorpalette.Notethatredand
greenmaybeindistinguishabletocolorblindusers.Primarycolorsareasfollows:
#33B5E5

#AA66CC

#99CC00

#FFBB33

#FF4444

#0099CC
#9933CC
Sourcesandusefullinks:Color

#669900

#FF8800

#CC0000

Holothemes
Androidprovidesthreesystemthemes:
HoloLight
HoloDark
HoloLightwithdarkactionbar
Sourcesandusefullinks:Themes,HoloEverywhere

Namingconventions
Namingconventionsfordrawables
Filenamesmustcontainonlylowercaseaz,09,or_.
Drawablesforthespecificviews(ListView,TextView,EditText,ProgressBar,CheckBoxetc.)shouldbenamedlike
thisviewskeepingthenamingrules,e.g.drawableforCheckBoxshouldbenamed"checkbox_on_bg.png".
AssetType
Prefix
Actionbar ab_
Button
btn_

Example
ab_stacked.9.png
btn_send_pressed.9.png

http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

5/7

16/03/2016

AndroidCheatsheetforGraphicDesigners

Dialog
dialog_
dialog_top.9.png
Divider
divider_
divider_horizontal.9.png
Icon
ic_
ic_star.png
Menu
menu_
menu_submenu_bg.9.png
Notification notification_ notification_bg.9.png
Tabs
tab_
tab_pressed.9.png
Sourcesandusefullinks:namingconventionstakenfromtheAndroidSDK

Namingconventionsforiconassets
AssetType
Prefix
Icons
ic_
Launchericons ic_launcher
Actionbaricons ic_menu
Statusbaricons ic_stat_notify
Tabicons
ic_tab
Dialogicons
ic_dialog

Example
ic_star.png
ic_launcher_calendar.png
ic_menu_archive.png
ic_stat_notify_msg.png
ic_tab_recent.png
ic_dialog_info.png

Sourcesandusefullinks:IconDesignGuidelines

Namingconventionsforselectorstates
State
Suffix
Example
Normal _normal btn_order_normal.9.png
Pressed _pressed btn_order_pressed.9.png
Focused _focused btn_order_focused.9.png
Disabled _disabled btn_order_disabled.9.png
Selected _selected btn_order_selected.9.png
Sourcesandusefullinks:TouchFeedback

Organizingdrawablestodirectories
Onedrawablemusthavethesamefilenameforallscreendensities(ldpi,mdpi,hdpietc.)andallthesefilesmustbe
organizedaccordingtodensityintothefollowingdirectories.Here'stheresourcesdirectorystructurefordrawables:
res
drawableldpi
drawablemdpi
drawablehdpi
drawablexhdpi
drawablexxhdpi

Resources
Graphicgenerators
AndroidAssetResizer
AndroidAssetStudio
http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

6/7

16/03/2016

AndroidCheatsheetforGraphicDesigners

AndroidButtonMaker
AndroidHoloColorsIntelliJPlugin
DeviceArtGenerator
GooglePlayBadges

Usefullinksfordesigners
AndroidDesignGuidelines
AndroidDesigninAction
AndroidDP/PXConverter
AndroidDPICalculator
AndroidNiceties
AndroidViews
AndroidViews/UIComponents
AppPatterns
DesignTools
HoloEverywhere

Download
AndroidIconTemplatesPackv4.0
Source:AndroidDevelopers
AndroidDesign11/2013
Source:AndroidDevelopers
AndroidUIDesignKitPSD4.4
Source:TaylorLingonAndroidUI&UX
AndroidDeveloperIconsPhotoshopShapes
Source:SpiderflyApps

Writtenby
Copyright2013PetrNohejl,www.petrnohejl.cz
Documentwaslastmodified17monthsago10/21/201421:52:05.
Foundsomemistake?Somethingismissing?Letmeknoworsendpullrequest.
ThankstoPeterKahounforKUCSSandGoogleAndroidforgreatdocumentation.
ThisworkislicensedunderaCreativeCommonsAttributionShareAlike3.0UnportedLicense.

http://petrnohejl.github.io/AndroidCheatsheetForGraphicDesigners/

7/7