Updating your app to support 7-inch tablets

Recently I’ve spent a lot of time thinking about how to optimize our app layouts for 7-inch tablets like the Nexus 7. It’s not an easy process, but a few tricks will make your life a whole lot easier.

As of today, the two most common screen resolutions in the 7-inch category are 1280x800 - WXGA and 1024x600 - WSVGA. Higher-end tablets like the Nexus 7 have a 1280x800 resolution and thus a higher pixel density. Lower-end tablets like the Samsung Galaxy Tab use a 1024x600 resolution and have a lower pixel density.

The Nexus 7 has a pixel density of around 213ppi and technically falls into the unique tvdpi density bucket, but for all intents and purposes you can consider it an hdpi device. Lower-end devices with a 1024x600 resolution have a pixel density of approximately 170ppi and will typically use mdpi assets. I don’t know of any 7-inch devices with an xhdpi pixel density, but I’m sure we’ll see some hit the market soon.

Regardless of the resolution, all 7-inch Android devices fall into the 600dp category. That is, they have a width of 600 density-independent pixels when in portrait orientation. We can use this width to provide alternative resources for these devices.

For starters, if you want to specify a custom layout for 7-inch devices you can simply add a new res/layout-sw600dp directory. Any layouts in this directory will be applied to devices that have a “smallest-width” of “600dp”.

If you don’t want to provide a completely different layout, but want to bump up the size of all your elements slightly you can use the res/values-sw600dp directory. Any resources provided here like dimens.xml or styles.xml will take precedence on devices like the Nexus 7. This way you can have a single layout file that references dimensions or styles that are dynamic based on the device size.

Finally, you might want to provide alternative drawable resources for 7-inch tablets. You can combine the sw600dp resource qualifier with a density qualifier to provide alternative drawables:

  • res/drawable-sw600dp-mdpi
  • res/drawable-sw600dp-hdpi
  • res/drawable-sw600dp-xhdpi

As you can see we’ve simply added the sw600dp qualifier to our typical drawable directories. These resources will be applied to devices of the correct screen density, but only if they are 7-inch tablets or larger.

All of these techniques are also applicable to targeting 10-inch tablets. Simply replace the 600dp width qualifier with 720dp in the case of 10-inch devices.

Further reading