Wednesday, September 19, 2012

Designing for Android tablets vs iPad: The Pixel Difference

Today I was working on a conversion of an iPad app to Android and all of the designs were looking smaller on Android. I had grown to trust that the screen density on iOS was approximately equal to MDPI on Android.. meaning 1px on iOS = 1dp on Android. The iPad breaks this model.

How does Android know how big a pixel is?

Android has a very simple screen density model that defines exactly what a pixel is on any device:

  • SDPI: 120dpi 
  • MDPI: 160dpi 
  • TVDPI: 213dpi 
  • HDPI: 240dpi 
  • XHDPI: 320dpi 
  • XXHDPI: 480dpi

The baseline for 1px is set at a MDPI screen density of 160dpi. Android places all devices into one of these density buckets and uses Density Independent Pixels(dp or dip) to allow developers to easily create designs that will work get on any of the many screen resolutions supported by Android. This is done with a very simple multiplier like this:

  • SDPI: px*0.66 
  • MDPI: px*1 
  • TVDPI: px*1.33 
  • HDPI: px*1.5 
  • XHDPI: px*2 
  • XXHDPI: px*3

Does iPhone and Android have the same pixel size?

Yep, the iPhone 1 - 3Gs were all at a standard dpi of 163. That's not exactly 160dpi like Android but its close enough for most designs. iPhone 4 - 5 have a density of 326dpi.. and again that's close enough to XHDPI for me!

The iPad screen density is different than Android?

Enter the iPad. The iPad first launched with a pretty lousy screen density of 132dpi. If you are using "dp" on Android you always know your pixel measurements are based on a 160dpi screen density, so you're exact pixel measurements on iPad will be wrong. So how big is an iPad pixel compared to an Android pixel?

1px on iPad = .825px on Android

You can determine this with some very simple math: 

iPad 132dpi / Android 160dpi = 0.825

So if you want to rapid convert from an iPad design to Android you can just reverse it like this:

Android 160dpi / iPad 132dpi = 1.2121

Now multiply all of your iPad pixel dimensions by 1.212 and you have a very close translation.

What is the Aspect Ratio of iPad vs Android Tablets?

Uh oh! Pixel size isn't the only difference, there is also the fact that iPad has an aspect ration of 4:3 and most popular Android tablets have an aspect ration of 16:10. This isn't a major issue in Landscape mode.. but in Portrait mode Android loses a lot of space. I'll update the article with exact numbers soon but it looks to be around a 100px. So if your tablet app allows Portrait mode you'll probably have some additional design tweaks.

Further reading


Training on coding for multiple screen sizes on Android