Androidcheatsheetforgraphicdesigners

Graphicdesignersaren'tprogrammersandsometimesdon'tknowhowtoproperlypreparegraphicassetsfordevelopers.Thissimplecheatsheetshouldhelpthemtodotheirjobbetter,andtosimplifydevelopers'lives.

Content

1. Dimensions1. Screendensitiesandicondimensions2. GooglePlayassetdimensions3. Dimensionunits4. Sizebuckets5. Viewsdimensionsandspacing6. Actionbarheight7. Textsize

2. Imagesandthemes1. Nine-patch2. Colors3. Holothemes

3. Namingconventions1. Namingconventionsfordrawables2. Namingconventionsforiconassets3. Namingconventionsforselectorstates4. Organizingdrawablestodirectories

4. Resources1. Graphicgenerators2. Usefullinksfordesigners3. Download

5. Writtenby

Dimensions

Screendensitiesandicondimensions

Qualifier DPIScalingfactor

Launchericon

Actionbar,tabicon

Notificationicon(API11)

Notificationicon(API9)

Notificationicon(older)

ldpi 120 0.7536x3632x32

24x2418x18

18x1816x16

12x1912x12

19x1916x16

mdpi 160 1.048x4842x42

32x3224x24

24x2422x22

16x2516x16

25x2521x21

hdpi 240 1.572x7264x64

48x4836x36

36x3633x33

24x3824x24

38x3832x32

xhdpi 320 2.096x9684x84

64x6448x48

48x4844x44

32x5032x32

50x5042x42

xxhdpi 480 3.0144x144126x126

96x9672x72

72x7266x66

48x7548x48

75x7563x63

Notice:thefirsticondimensionintablecellisfullassetsize,thesecondicondimensionisopticalsquare.Dimensionvaluesareinpixels.

Tip:creatingldpiassetsisnotreallyneededanymore.Thedevicesarerareandtheplatformwilljustscaledownmdpi.

Sourcesandusefullinks:Iconography,SupportingMultipleScreens,IconDesignGuidelines,Dimension

GooglePlayassetdimensions

AssetType Required Imagetype Dimension

Screenshot yesJPEGor24-bitPNG(noalpha)

minlengthforanyside:320pxmaxlengthforanyside:3840px

High-resappicon yes32-bitPNG(withalpha)

512x512px

Featuregraphic noJPEGor24-bitPNG(noalpha)

1024x500px

Promotionalgraphic noJPEGor24-bitPNG(noalpha)

180x120px

Videolink no URLofYouTubevideo -

Sourcesandusefullinks:GraphicandImageAssets,GooglePlayFeatured-ImageGuidelines,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

Notice:onedp(density-independentpixel)isonepixelona160DPIscreen.

Sourcesandusefullinks:MetricsandGrids

Viewsdimensionsandspacing

TouchableUIcomponentsaregenerallylaidoutalong48dpunits.SpacingbetweeneachUIelementis8dp.

Sourcesandusefullinks:MetricsandGrids

Actionbarheight

Qualifier Dimension

Portrait 48dp

Landscape 40dp

Tablet 56dp

Sourcesandusefullinks:ActionBar

Textsize

Type Dimension

Micro 12sp

Small 14sp

Medium 18sp

Large 22sp

Notice:onesp(scale-independentpixel)isonepixelona160DPIscreeniftheuser'sglobaltextscaleissetto100%.

Sourcesandusefullinks:Typography

Imagesandthemes

Nine-patch

ANine-patchdrawableisastretchablebitmapimage,whichAndroidwillautomaticallyresizetoaccommodatethecontentsoftheviewinwhichyouhaveplaceditasthebackground,e.g.nine-patchbackgroundforbutton,whichmuststretchtoaccommodatestringsofvariouslengths.Therulesfornine-patchimagearefollowing:

StandardPNGimagewithalphaFilenamesuffixis".9.png",e.g."btn_login_normal.9.png"

#33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444

#0099CC #9933CC #669900 #FF8800 #CC0000

Imagehasanextra1pixelwideborder,usedtodefinethestretchable/static/paddingareasStretchablesectionsareindicatedby1pxwideblackline(s)intheleftandtoppartoftheborderStaticsectionsareindicatedbyfullytransparentorwhitepixelsPaddingarea(optional)isindicatedby1pxwideblacklineintherightandbottompartoftheborder

Sourcesandusefullinks:CanvasandDrawables,Draw9-patch,SimpleNine-patchGenerator

Colors

Usecolorprimarilyforemphasis.BlueisthestandardaccentcolorinAndroid'scolorpalette.Notethatredandgreenmaybeindistinguishabletocolor-blindusers.Primarycolorsareasfollows:

Sourcesandusefullinks:Color

Holothemes

Androidprovidesthreesystemthemes:

HoloLightHoloDarkHoloLightwithdarkactionbar

Sourcesandusefullinks:Themes,HoloEverywhere

Namingconventions

Namingconventionsfordrawables

Filenamesmustcontainonlylowercasea-z,0-9,or_.

Drawablesforthespecificviews(ListView,TextView,EditText,ProgressBar,CheckBoxetc.)shouldbenamedlikethisviewskeepingthenamingrules,e.g.drawableforCheckBoxshouldbenamed"checkbox_on_bg.png".

AssetType Prefix Example

Actionbar ab_ ab_stacked.9.png

Button btn_ btn_send_pressed.9.png

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 Example

Icons ic_ ic_star.png

Launchericons ic_launcher ic_launcher_calendar.png

Actionbaricons ic_menu ic_menu_archive.png

Statusbaricons ic_stat_notify ic_stat_notify_msg.png

Tabicons ic_tab ic_tab_recent.png

Dialogicons ic_dialog 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.)andallthesefilesmustbeorganizedaccordingtodensityintothefollowingdirectories.Here'stheresourcesdirectorystructurefordrawables:

resdrawable-ldpidrawable-mdpidrawable-hdpidrawable-xhdpidrawable-xxhdpi

Resources

Graphicgenerators

AndroidAssetResizerAndroidAssetStudioAndroidButtonMakerAndroidHoloColorsIntelliJPluginDeviceArtGeneratorGooglePlayBadges

Usefullinksfordesigners

AndroidDesignGuidelinesAndroidDesigninActionAndroidDP/PXConverterAndroidDPICalculatorAndroidNicetiesAndroidViewsAndroidViews/UIComponentsAppPatternsDesignToolsHoloEverywhere

Download

AndroidIconTemplatesPackv4.0Source:AndroidDevelopers

AndroidDesign11/2013Source:AndroidDevelopers

AndroidUIDesignKitPSD4.4Source:TaylorLingonAndroidUI&UX

AndroidDeveloperIconsPhotoshopShapesSource:SpiderflyApps

Writtenby

Copyright2013PetrNohejl,www.petrnohejl.cz

Documentwaslastmodified02/11/201416:37:45.

Foundsomemistake?Somethingismissing?Letmeknoworsendpullrequest.

ThankstoPeterKahounforKUCSSandGoogleAndroidforgreatdocumentation.ThisworkislicensedunderaCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.