What does DP, DPI, PPI and PX represent in Android?

What does DP, DPI, PPI and PX represent in Android?

I’ve been playing with Xamarin Android for a while now and one thing that disturbed me when I started was the units of measure. What is the difference between DP, DPI, PPI and PX in Android?

I found my answers in the Material design guide and today I would like to share my undertanding of the differences and bring a different explanation which hopefully will help you get a better understanding.

This post is composed by three parts:

 1. PX - pixels
 2. DPI / PPI - pixels per inch
 3. DP - density-independent pixel

1. PX - pixels

Pixels is the most granular unit of measure. When talking about resolution 1920x1080, 2560x1440, etc… It represents the amount of pixels which fit in the screen.

The higher the better but a second aspect equally important has too be taken in consideration - the screen dimension.

Two devices with the same resolution but different screen sizes will not have the same display. For a similar resolution, the bigger the screen, the bigger the pixel size will be - it would be as if we stretch the screen which makes each pixels look bigger.

To take the screen dimension into account, another measure was created - DPI or PPI - density per pixel also called pixel per inch.

2. DPI / PPI - pixels per inch

DPI and PPI represent the same thing except - pixel per inch. This unit helps to measure the size of a pixel. It is an indicative of how many pixels can be found in one inch.

So the higher the density, the more pixels can be pushed into one inch.

How does density affect the display?

If we were to construct elements using pixels, the elements will appear smaller on high density devices - because many pixels are available per inch - and larger on low density devices - because not a lot of pixels are available per inch.

If we had to cater for that in the code of the Android app, it would be a nightmare so that’s where DP - density-independent pixel - came from.

3. DP - density-independent pixel

DP is the density-independent pixel unit. Independent pixel because the unit of measure is independent of the density, it is independent of the screen dimension and resolution. Whether the density is high or low, the elements on the screen will have approximatively the same size/look.

This is very important for measures of margins and paddings as we want margins and paddings to always be consistant.

But how does it work? How is the unit independent of the screen density?

In order to create a unit of measure independent of the density, Android has defined multiple buckets - mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi.

Each buckets represent a certain amount of DPI and have been given a label ranging from mdpi - the lowest resolution with the lowest density - up to xxxhdpi - the highest resolution with the highest density.

Resolution DPI ratio
xxxhdpi 640 4.0 (640/160)
xxhdpi 480 3.0 (480/160)
xhdpi 320 2.0 (320/160)
hdpi 240 1.5 (240/160)
mdpi 160 1.0 (160/160)

For each of this buckets, a ratio has been attributed. Starting from mdpi ratio of 1.0 up to xxxhdpi ratio of 4.0. As you might have guessed, all dpis have been normalized to mdpi, in order words 1 px in mdpi is equivalent to 4 pixel in xxxhdpi. And this is the key behind DP, so let me repeat it, 1 px in mdpi is equivalent to 4 pixel in xxxhdpi.

The formula behind it is the following:

px = (screen dpi / 160) * dp
px = dp * (dpi/160)
px = dp * ratio

The formula says that to calculate the pixels, normalize the screen density (dpi/160) and time the density-independent pixels. Obviously you can move the variables around and get the dp in function of the px.

dp = (px * 160) / dpi

The DPI being a variable constant to the device and 160 being the normal, the whole 160/dpi can then become a constant:

with K = 160 / dpi

dp = px * K

And that’s where DP came from, DP is PX time a constant K which varies depending on the screen density and ensure a consistant measure accross any screen and resolution. By using that we can have a unit of measure consitant accross all density where 1 dp in mdpi is equal to 1 dp in xhdpi or in xxxhdpi and at the moment of translating dp to px, the formula is applied where px = dp * ratio.

Conclusion

Today we saw where the unit DP came from. It is important to understand especially when you start dealing with drawings and canvas. Understanding this took me a while and I hope that I made the task easier for you. Let me know what you think by leaving a comment below or hit me on Twitter @Kimserey_Lam. See you next time!

Other post you will like

Comments

  1. Anonymous25 October 2016 at 08:31

    You have done such an excellent work which will definitely beneficial for those who want to deal with drawings. concept is very clearly described by you. Thanks for sharing.

    ReplyDelete

Post a Comment

Popular posts from this blog

Microsoft Orleans logs warnings and errors

Microsoft Orleans logs warnings and errors Microsoft Orleans is a framework which helps building distributed system by implementing the actor model together with the concept of virtual actors, taking care of availability and concurrency. If you are unfamiliar with Microsoft Orleans, you can look at my previous blog post explaining the benefits of Microsoft Orleans . Even though Orleans promises to abstract the distributed system problems, there are instances where errors arise without us being able to understand what is going on. Lucky us, the logs are well documented… but only for those who can decrypt them. Today I will go through some of the errors and warnings which can be seen from silo and client so that you too can undestand what is going on. Enjoy! The code used to produce those errors can be found on my GitHub https://github.com/Kimserey/orleans-cluster-consul . 1. Client logs Logs on client appears with address {ip}:0 . 1.1. Can’t find implementation of interface An un...
Keep reading

A complete SignalR with ASP Net Core example with WSS, Authentication, Nginx

SignalR with ASP Net Core SignalR is a framework from ASP NET Core allowing us to establish a two way communication between client and server. This two way communication allows the client to send messages to the server but more importantly allows the server to push messages to the client. SignalR makes use of Websocket when available else it falls back to SSE or pulling. Today we will focus on how to setup SignalR to work with WSS, Websocket secure and how we can authenticate the user requesting to connect to our SignalR hub via Webscoket. Getting started with SignalR SSL encryption for Websocket Secure WSS Websocket Authentication with Identity Server 4 SignalR behind Nginx 1. Getting started with SignalR The Hubs are the main components of SignalR. It is an abstraction of a two way communication available for both client and server. Public functions from the hub can be called from the server code and can be called from the client. The frontend NPM package @aspnet/signalr ...
Keep reading

SDK-Style project and project.assets.json

SDK-Style project and project.assets.json Last week I encountered an issue with MSBuild while trying to run it from command line. The issue did not appear when using VisualStudio right click + build but only appeared when using msbuild.exe CLI directly with a clean project. Assets file 'C:\[...]\obj\project.assets.json' not found. Run a NuGet package restore to generate this file. When I first saw the error, few questions came to my mind which I will share today in 3 points: Overview of project.assets.json Slim SDK-Style project Mixing SDK-Style project and old projects Special shoutout to @enricosada who provided me with all the answers regarding the SDK-Style project. 1. Overview of project.assets.json project.assets.json lists all the dependencies of the project. It is created in the /obj folder when using dotnet restore or dotnet build as it implicitly calls restore before build, or msbuid.exe /t:restore with msbuild CLI. To simulate dotnet build (re...
Keep reading