Design best practices for Android mobile App (with SketchApp)

Turhan Oz
5 min readApr 23, 2018

As a mobile developer (or/and designer), our will is to make our app simply working on ALL devices with less to no effort. That means we want our design adapting dynamically to the profusion of available devices out there.

So, how the designer of your team (or yourself) should design the screens of your app that would definitely ease your development effort ?

Screen Density

This article is not intended to explain screen density, but I have to quickly go trough it as this is a required knowledge to go further.

Among the multitude of available device screens combinations (screen size -resolution- aspect ratio & pixel count per inch aka ‘dots per inch’), Android team has created buckets called density buckets (or ‘generalized density’ as called in the illustration below extracted from the android documentation).

Don’t be mislead with this illustration as the top & the bottom are independent parts. Indeed, you can easily have a normal screen size device with an extra high density for instance.

So, having that in mind, for each ‘generalized screen size’, there are minimum screen resolution defined as density pixel :

  • xlarge screens are at least 960dp x 720dp
  • large screens are at least 640dp x 480dp
  • normal screens are at least 470dp x 320dp
  • small screens are at least 426dp x 320dp

Dev tip : you can find these generalized screen size definition within the hidden method reduceScreenLayout() inside the Configuration android class.

The key takeaway point here is that to preserve UI components ratio through all the possible screen combinations, you have to deal with ‘density independant pixel’ (dp). That said, Android will automatically apply a density factor for each dp as followed :

  • ldpi is ~120dpi screen (0.75x) for low-density
  • mdpi is ~160dpi screen (1.0x baseline) for medium-density
  • hdpi is ~240dpi screen (1.5x) for high-density
  • xhdpi is ~320dpi screen (2.0x) for extra-high-density
  • xxhdpi is ~480dpi screen (3.0x) for extra-extra-high-density
  • xxxhdpi is ~640dpi screen (4.0x) for extra-extra-extra-high-density

--

--