Skip to content

Instantly share code, notes, and snippets.

@DuartBreedt

DuartBreedt/An overview of Android device displays and how to design for them.md

Last active September 1, 2021 11:17
Show Gist options
  • Save DuartBreedt/7d130c0963b6be444d777856347a57b7 to your computer and use it in GitHub Desktop.
Save DuartBreedt/7d130c0963b6be444d777856347a57b7 to your computer and use it in GitHub Desktop.
Download ZIP
An overview of Android device displays and how to design for them
Raw
An overview of Android device displays and how to design for them.md

Designing for various Android devices

How devices displays can differ

Devices can differ in four main ways:

  • Resolution
  • Aspect ratio
  • Display Dimensions
  • PPI/DPI

Resolution

This is the total number of display points the device can represent. Resolution normally correlates to the number of pixels the device's screen is made up of. This is normally represented as width x height e.g. 1920 x 1080.

Aspect ratio

Aspect ratio depicts the ratio between the width of the device and its height. Where width and height normally refer to the width and height of the resolution.

Device Dimensions

Device dimensions refers to the size of the device. This may seem obvious but it has a large impact on the way the device renders content. Specifically, PPI/DPI is determined by the relationship between the device dimensions and resolution.

DPI vs PPI

PPI is the number of pixels on a display per inch. DPI is a printing term referring to the physical number of dots printed on a piece of paper per inch.

So what's up with this? Android is just confused.

In our world DPI is PPI.

What this means in Android

Ideally a design should be made quite generic for a specific device and this should result in a relatively acceptable result for other devices.

Unfortunately this isn't always the reality. Android devices can vary vastly and we can't assume a design will suit these devices automatically.

To combat this, Android provides DPI buckets. This offers developers opportunity to specify designs per DPI buckets.

These buckets are as follows:

  • Medium density bucket (MDPI) = ~160 DPI = 1x or 100%
  • High density bucket (HDPI) = ~240 DPI = 1.5x or 150%
  • Extra-high density bucket (XHDPI) = ~320 DPI = 2x or 200%
  • Extra-extra-high density bucket (XXHDPI) = ~480 DPI = 3x or 300%
  • Extra-extra-extra-high density bucket (XXXHDPI) = ~640 DPI = 4x or 400%

This works for most instances. However, this only consider DPI and as we've seen this does not make any assumptions about how large the screen is or what the "shape" of the devices may be.

Field tests

Samsung Galaxy S8+ vs Google Pixel XL

  • Samsung Galaxy S8+
    • DPI 529 (XXXHDPI)
    • 1440 x 2960
    • 6.2"
  • Google Pixel XL
    • DPI 534 (XXXHDPI)
    • 1440 x 2560
    • 5.5"

From this we can assume the devices will look relatively similar. But that is unfortunately not the case. Please see the images below for reference.

This is due to the height of the resolution of the Samsung Galaxy S8+ being much higher than that of the Google Pixel XL. The size of the device is also larger which compensates for this making the DPI very similar to that of the Google Pixel XL.

Samsung Galaxy SII vs VIVO Y51L

  • Samsung Galaxy SII
    • DPI 219 (HDPI)
    • 480 x 800
    • 4.3"
  • VIVO Y51L
    • DPI 220 (HDPI)
    • 540 x 960
    • 5.0"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment