What is the difference between "px", "dip", "dp" and "sp" in Android?

 From the Android Developer Documentation:

  1. px
    Pixels - corresponds to actual pixels on the screen.

  2. in
    Inches - based on the physical size of the screen.
    1 Inch OR 2.54 centimeters

  3. mm
    Millimeters - based on the physical size of the screen.

  4. pt
    Points - 1/72 of an inch based on the physical size of the screen.

  5. dp or dip
    Density-independent Pixels - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".

  6. sp
    Scaleable Pixels OR scale-independent pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommended you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user's preference. Note, the Android documentation is inconsistent on what sp actually stands for, one doc says "scale-independent pixels", the other says "scaleable pixels".

From Understanding Density Independence In Android:


Density BucketScreen DensityPhysical SizePixel Size
ldpi120 dpi0.5 x 0.5 in0.5 in * 120 dpi = 60x60 px
mdpi160 dpi0.5 x 0.5 in0.5 in * 160 dpi = 80x80 px
hdpi240 dpi0.5 x 0.5 in0.5 in * 240 dpi = 120x120 px
xhdpi320 dpi0.5 x 0.5 in0.5 in * 320 dpi = 160x160 px
xxhdpi480 dpi0.5 x 0.5 in0.5 in * 480 dpi = 240x240 px
xxxhdpi640 dpi0.5 x 0.5 in0.5 in * 640 dpi = 320x320 px

Unit
DescriptionUnits Per Physical InchDensity Independent?Same Physical Size On Every Screen?
pxPixelsVariesNoNo
inInches1YesYes
mmMillimeters25.4YesYes
ptPoints72YesYes
dpDensity Independent Pixels~160YesNo
spScale Independent Pixels~160YesNo


More info can be also be found in the Google Design Documentation.


See the difference between pxdp and sp on different screen sizes.

Enter image description here


px or dot is a pixel on the physical screen.

dpi are pixels per inch on the physical screen and represent the density of the display.

Android gives alias names to several densities

  • ldpi (low) ~120dpi
  • mdpi (medium) ~160dpi
  • hdpi (high) ~240dpi
    • most devices in 2015 are here
  • xhdpi (extra-high) ~320dpi
    • Apple iPhone 4/5/6, Nexus 4
  • xxhdpi (extra-extra-high) ~480dpi
    • Nexus 5
  • xxxhdpi (extra-extra-extra-high) ~640dpi

dip or dp are density-indenpendant pixels, i.e. they correspond to more or less pixels depending on the physical density.

  • 1dp = 1px on mdpi

enter image description here

sp or sip is a scale-independant pixel. They are scaled when the Large Text option is turned on in Settings > Accessibility

  • 1sp = 1dp
  • 1sp = 1.2dp with accessibility Large Text

What to use?

Use sp for Text size.

Use dp for everything else.

Where to use what & relationship between px & dp?

Density-independent pixel (dp)

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. As described above, the density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple:

px = dp * (dpi / 160).

For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

Understanding pixel to dp and vice versa is very essential (especially for giving exact dp values to creative team)

dp = px * 160 / dpi

MDPI = 160 dpi || Therefore, on MDPI 1 px = 1 dp
For example, if you want to convert 20 pixel to dp, use the above formula,
dp = 20 * 160 / 160 = 20.
So, 20 pixel = 20 dp.

HDPI = 240 dpi - So, on HDPI 1.5 px = 1 dp
XHDPI = 320 dpi - So, on XHDPI 2 px = 1 dp
XXHDPI = 480 dpi - So, on XXHDPI 3 px = 1 dp

For example, let us consider Nexus 4.
If 24 pixels to be converted to dp and if it is a Nexus 4 screen, developers can
convert it to dp easily by the following calculation :
dp = 24 * 160 / 320 = 12 dp
Screen dimension:
768 x 1280 pixel resolution (320 ppi or 320dpi)
Optional (screen size):
 4.7" diagonal
  • Try to get all pixel values in even numbers from the creative team. Otherwise precision lose will happen while multiplying with 0.5.

px

It is explained above. Try to avoid in layout files. But there are some cases, where px is required. for example, ListView divider line. px is better here for giving a one-pixel line as a divider for all across screen resolutions.

sp

Use sp for font sizes. Then only the font inside the application will change while device fonts size changes (that is, Display -> Fonts on Device). If you want to keep a static sized font inside the app, you can give the font dimension in dp. In such a case, it will never change. Developers may get such a requirement for some specific screens, for that, developers can use dp instead of sp. In all other cases, sp is recommended.

 

Post a Comment

Previous Post Next Post

Subscribe Us


Get tutorials, Flutter news and other exclusive content delivered to your inbox. Join 1000+ growth-oriented Flutter developers subscribed to the newsletter

100% value, 0% spam. Unsubscribe anytime