Académique Documents
Professionnel Documents
Culture Documents
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
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