What is the difference between “px”, “dip”, “dp” a

Question

What is the difference between Android units of measure?

• px
• dip
• dp
• sp

Answer 1

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 = 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
   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 user's preference.

From Understanding Density Independence In Android:

+----------------+----------------+---------------+-------------------------------+
| Density Bucket | Screen Density | Physical Size | Pixel Size                    | 
+----------------+----------------+---------------+-------------------------------+
| ldpi           | 120 dpi        | 0.5 x 0.5 in  | 0.5 in * 120 dpi = 60x60 px   | 
+----------------+----------------+---------------+-------------------------------+
| mdpi           | 160 dpi        | 0.5 x 0.5 in  | 0.5 in * 160 dpi = 80x80 px   | 
+----------------+----------------+---------------+-------------------------------+
| hdpi           | 240 dpi        | 0.5 x 0.5 in  | 0.5 in * 240 dpi = 120x120 px | 
+----------------+----------------+---------------+-------------------------------+
| xhdpi          | 320 dpi        | 0.5 x 0.5 in  | 0.5 in * 320 dpi = 160x160 px | 
+----------------+----------------+---------------+-------------------------------+
| xxhdpi         | 480 dpi        | 0.5 x 0.5 in  | 0.5 in * 480 dpi = 240x240 px | 
+----------------+----------------+---------------+-------------------------------+
| xxxhdpi        | 640 dpi        | 0.5 x 0.5 in  | 0.5 in * 640 dpi = 320x320 px | 
+----------------+----------------+---------------+-------------------------------+

+---------+-------------+---------------+-------------+--------------------+
| Unit    | Description | Units Per     | Density     | Same Physical Size | 
|         |             | Physical Inch | Independent | On Every Screen    | 
+---------+-------------+---------------+-------------+--------------------+
| px      | Pixels      | Varies        | No          | No                 | 
+---------+-------------+---------------+-------------+--------------------+
| in      | Inches      | 1             | Yes         | Yes                | 
+---------+-------------+---------------+-------------+--------------------+
| mm      | Millimeters | 25.4          | Yes         | Yes                | 
+---------+-------------+---------------+-------------+--------------------+
| pt      | Points      | 72            | Yes         | Yes                | 
+---------+-------------+---------------+-------------+--------------------+
| dp      | Density     | ~160          | Yes         | No                 | 
|         | Independent |               |             |                    | 
|         | Pixels      |               |             |                    | 
+---------+-------------+---------------+-------------+--------------------+
| sp      | Scale       | ~160          | Yes         | No                 | 
|         | Independent |               |             |                    | 
|         | Pixels      |               |             |                    | 
+---------+-------------+---------------+-------------+--------------------+

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

Answer 2

I've come across a good article about designing Android apps UI for different screen resolutions, and I'd like to leave it here just for somebody searching in this area. Yes, I know that it's somehow described in Google docs (and mentioned in the posts above), I read that but it was not good for me (yeah, I may be too stupid)). It remained unclear for me how to design layouts capable to handle different screen size. I hate DP concept and so on, when I need to implement a "flexible" UI layout for different screens. (Hey iOS developers - yes, you're right it's Storyboard concept).

Android has not bad UI concept, but lacks iOS Storyboard features, unfortunately. Designing flexible UI in Android is not easy thing (at the best).

Here goes the article that helped me to understand what to do in Android to make layouts for different screen sizes:

JMSTUDIO Blog :- Decide Android App Screen Size

How to Design UI for Android Apps for Different Screen Size

To design an app UI for different screen sizes, our initial design has to meet a minimum required space for each screen size. Android defines a minimum size (in dp) for each generalized screen type. Here is an Android screen size guideline. When we get the screen size in dp, it is not enough for us to design the Android app UI. For each screen size, we need to prepare graphics and bitmap images for each density. Here is an Android screen density guideline.

For easy calculation, we can follow the 3:4:6:8 scaling ratio between the four generalized densities. If we create a 36×36 pixel picture for ldpi device, the rest densities pictures size will be 48×48 for mdpi, 72×72 for hdpi, and 96×96 for xhdpi.

How to Design Android Apps UI in Photoshop

Many designers have problems for designing Android app UI in photoshop or other pixel based graphic design tools because of density-independent unit, dp. Designers don’t know how to map dp to pixel. Google also doesn’t give a clear Android UI design guide for them, though they give a basic formula for dp and pixel translation.

As Android’s definition, 1pd equal to 1px under 160 dpi device (mdpi). So we want to design an Android app for xlarge Android device with mdpi density, we can define our UI size in pixel as 960 pixel in width and 720px in height; Follow the same mapping rule, we can get following Android App screen size UI design guideline:

ADDED: If you interested in "flexible" UI too, have a look at this library: An Android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size (this also mentioned in an answer here, about SDP library)

ADDED2 Google has finally understood usefulness of iOS Storeboard UI concept, and here goes ConstraintLayout for Android world: Build a Responsive UI with ConstraintLayout

Answer 3

1) dp: (density independent pixels)

The number of pixels represented in one unit of dp will increase as the screen resolution increases (when you have more dots/pixels per inch). Conversely on devices with lower resolution, the number of pixels represented in on unit of dp will decrease. Since this is a relative unit, it needs to have a baseline to be compared with. This baseline is a 160 dpi screen. This is the equation: px = dp * (dpi / 160).

2) sp: (scale independent pixels)

This unit scales according to the screen dpi (similar to dp) as well as the user’s font size preference.

3) px: (pixels)

Actual pixels or dots on the screen.

For more details you can visit

Android Developer Guide > Dimension
Android Developer Guide > Screens

Answer 4

The screen of a mobile phone is made up of thousands of tiny dots known as pixels (px). A pixel is the smallest element which goes to make the picture. The more the number of pixels to make a picture or wording, the sharper it becomes and makes the smartphone screen more easily readable.

Screen resolution is measured in terms of number of pixels on the screen. Screen resolution is a commonly-used specification when buying a device, but it's actually not that useful when designing for Android because thinking of screens in terms of pixels ignores the notion of physical size, which for a touch device is really really important.

Density independent pixel (dp or dip) allow the designer to create assets that appear in a expected way, no matter the resolution or density of target device.

A density independent pixel (dp or dip) is equal to one pixel at the baseline density or 160 dpi (dots per inch).

1 px/1dp = 160 dpi/160 dpi

2 px/1dp = 320 dpi(2x)/160 dpi

where,

dpi is dots per inch

So, at 320 dpi, 1 dp is equal to 2 px.

Formula

px/dp = dpi/160dpi

Dots per inch (dpi) is a measure of the sharpness (that is, the density of illuminated points) on a display screen. The dots per inch for a given picture resolution will differ based on the overall screen size since the same number of pixels are being spread out over a different space.

Working with density independent pixels help us to deal with a situation like where you have two devices with same pixel resolution, but differing amount of space. Suppose in a case, a tablet and phone has the same pixel resolution 1280 by 800 pixels (160 dpi) and 800 by 1280 pixels (320 dpi) respectively.

Now because a tablet is at baseline density (160 dpi) its physical and density independent pixels sizes are the same, 1280 by 800. The phone on the other hand has a higher pixel density, so it has half as many density independent pixels as physical pixels. So a phone has 400 by 640 density independent pixels. So using a density-independent pixel makes it easier to mentally picture that tablet has much more space than the phone.

Similarly, if you have two devices with similar screen size, but different pixel density, say one is 800 by 1280 pixels (320 dpi), and the other is 400 by 640 pixels (160 dpi), we don't need to define totally different layouts for these two devices as we can measure assets in terms of density independent pixel which is same for both devices.

800 by 1280 pixels (320dpi)=400 by 640 density independent pixel (dp)

400 by 640 pixels (160 dpi)=400 by 640 density independent pixel (dp)

Scale independent pixels(sp) is the preferred unit for font size. For accessibility purposes, Android allows users to customize their device's font size. Users that have trouble reading text can increase their device's font size. You can normally find this option in the display setting on your phone or tablet under font size. It's often also available through the accessibility settings.

With scale independent pixels, 16 sp is exactly the same as 16 dp when the device's font size is normal or 100%. But when device's font size is large, for example 125%, 16 sp will translate to 20 dp or 1.25 times 16.

If you use dp as the unit for font size, then that piece of text has a specific physical size no matter if the user has customize device's font size. Using sp units will make a better experience for people with impaired eyesight.

Reference: Udacity, Google

Answer 5

Pretty much everything about this and how to achieve the best support for multiple screens of different sizes and densities is very well documented here:

• Supporting Multiple Screens

Screen size
Actual physical size, measured as the screen's diagonal. For simplicity, Android groups all actual screen sizes into four generalized sizes: small, normal, large, and extra-large.

Screen density
The number of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen. For simplicity, Android groups all actual screen densities into six generalized densities: low, medium, high, extra-high, extra-extra-high, and extra-extra-extra-high.

Orientation
The orientation of the screen from the user's point of view. This is either landscape or portrait, meaning that the screen's aspect ratio is either wide or tall, respectively. Be aware that not only do different devices operate in different orientations by default, but the orientation can change at runtime when the user rotates the device.

Resolution
The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups.

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. 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.

If you are any serious about developing an Android app for more than one type of device, you should have read the screens support development document at least once. In addition to that, it is always a good thing to know the actual number of active devices that have a particular screen configuration.

• Screen Sizes and Densities

Answer 6

Anything related with the size of text and appearance must use sp or pt. Whereas, anything related to the size of the controls, the layouts, etc. must be used with dp.

You can use both dp and dip at its places.