How to set up a canvas to design Android / Material apps in Sketch and Photoshop

I get asked this question a lot and I wrote a long post about it and still get the question, so here's a shorter answer ;):

“what size should my design be for Android?”

It is hard, there are 100s of different form factors of Android device screens.

I work in Android exactly the same way as in iOS… you need to be sure that your design fits on a smaller screen, yet still looks good when spread out on a larger screen (your use-case may not need to support the oldest and smallest devices).

iOS

I have my canvas set for iPhone 7+ (414pt x 736pt which is 1242px x 2208 @3x), then I place guidelines for an iPhone 5 canvas (320pt x 568pt which is 960px x 1704px @3x), so I can check the elements of the design fit on the smaller screen.

Android

1. Pick a typical “largish” screen. I use 360dp x 640dp - which is 1080px x 1920px @ XXHDPI or @3x.

2. Place in guidelines, or draw a box, showing the dimensions for a typical smaller Android device, I use 320dp x 480dp - which is 960px x 1440px @ XXHDPI

3. Check the elements of your design regularly that they fits the minimum width and minimum height. Height is only really important if scrolling is not desired on smaller devices.

Why not XXXHDPI?

Very few devices have screens that are actually set at XXXHDPI, only a few system icons - so I wouldn't bother with it, but you can work out for yourself what the @4x canvas values would be.

Get a design tool like Sketch

My best advice these days is to use a dedicated UI design tool like Sketch app - which sets things up so you work in @1x or 100% dimensions. Sketch helpfully provides sample canvas for iOS and helps export the @2x and @3x assets. There is even a plugin for outputting Android assets. However….

  • You will need a Mac! It's Mac only, they love Apple!
  • oh and only works on the latest OSX
  • oh, and it isn't on the app store!!! Coz they also now HATE Apple!!! LOL.
  • -So a bit of a pain in that respect!!!