Android px, DP, SP difference

Since the rise of Android, the growing number of developers, while the market is constantly growing uneven equipment, followed by the developers need to adapt to a variety of models and the trouble and complaints. And with the different manufacturers customized different rom,android equipment fragmentation phenomenon is increasingly serious. This article focuses on how to design an Android page that strictly complies with the design standard.

1. px, DP, SP distinguish what is px

PX is the unit of pixels we usually call, in CSS, we use PX more. PX mainly refers to the actual size units of things that the user sees on the screen.

What is DP

When looking at cell phone or computer parameters, we often talk about a keyword, screen resolution (resolution), the resolution is expressed in each direction of the number of pixels, such as the 800x480 resolution

, we can see the 15 inch Retina Pro resolution is 2880x1800, while the 60 inch HDTV resolution is only 1920x1080. Visible if the 60-inch HDTV also to reach the Retina display effect, its resolution is probably at least 11520x7200.

Now that we have the concept of resolution, we can understand the concept of dpi (dot per inch). DPI is intended to be the number of dots per inch, but it is often mixed with the PPI (pixel per inch). Refers to the number of pixels per inch, also known as the screen density, the larger the DPI, the image looks more visually clear.

Google's official interpretation of DP is as follows:

A Virtual pixel unit, should use when defining UI layout, to express layout dimensions or Positi On a density-independent.
The density-independent pixel is equivalent to one physical pixel on a (DPI screen), which is the baseline density Assumed by the system for a "medium" density screens. At runtime, the system transparently handles any scaling of the DP units, as necessary, based on the actual density of the Screen on use. The conversion of DP units to screens pixels is SIMPLE:PX = DP * (dpi/160). For example, on a-DPI screen, 1 DP equals 1.5 physical pixels. Should always use DP units when defining your application ' s UI, to ensure proper display of your UI on screens with Di Fferent densities.

With the concept of density, we can better understand the DP (density independent pixel). DP is a virtual pixel unit in Android that defines the size or position of an expression element in the UI layout, and the DP exists for the page element position to be unaffected by screen density. As an example of a designer's app page, the designer wants the user to look visually, which means that the designer usually takes PX as the base unit when designing. In other devices with different screen densities, it is desirable to be able to do some scaling, similar to maintaining a relatively consistent percentage. So developers usually need to use DP as a unit to accommodate different densities of screens.

So there is a set of conversion standards between DP and PX: px = dp * (dpi / 160) . Suppose 1DP = 2px on a screen with a DPI of 320.

What is SP

An SP is a unit that is professionally set up for fonts in Android. Using an SP as a font unit not only allows the font size to be affected by screen density, but also allows the font to be affected by user system settings. Android provides font-size setting options. Once the SP is used as a font, the font size in the app will be different depending on the user's settings. However, under normal font settings, 1DP = 1sp.

2. Designer Perspective

Android's multi-screen adaptation exists in so many sizes that naturally requires a bridge of communication between designers and engineers, and how designers can standardize their designs to be more compliant with Android design standards. Designers and engineers are required to have a consensus standard for the size of the page, and testers may be able to test more effectively without causing unnecessary work due to different models showing different effects.

First we need to choose a relatively common screen size, you can refer to some of the existing major models of the size. For ease of calculation, we chose Nexus 4 as the original standard for the design drawing. Then all the pages are based on NEXUS4. NEXUS4 dimensions are as follows:

主屏尺寸4.7，主屏分辨率：1280x768像素，屏幕像素密度320ppi。

In general, we choose the most common models on the market to design, here we for the convenience of calculation, select the 320ppi model, the size of the plan will be twice times the standard chart. Assume that in the design diagram, the page padding is 32px, the height of the button is 96px, and the icon size is 48x48.

Through px＝dp*(dpi/160) the standard, the designer for the developer to mark the page margin is 16DP, the button height of 48dp,icon four sets of mdpi, hdpi, xhdpi, xxhdpi standard.

3. Developer view margin, padding, height, width

From a developer's point of view, for a control's size, height, and so on, just follow the converted DP settings.

android:layout_padding="16dp"android:layout_height="48dp"

A DP unit ensures that different sizes of fonts appear on the screen at different resolutions. and can maintain the relative size, it is also more in line with the original design.

Picture Resources

PNG-made images, generally fixed size, no way to scale the same as automatic scaling. So there are at least 4 resource folders on Android. When the app is running, the system can automatically choose which size image resource to use based on the screen density of the current device.

ldpi	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi
0.75	1	1.5	2	3	4
120	160	240	320	480	640
18x18	24x24	36x36	48x48	72x72	96x96

4. More

Attach Android Mainstream models:

Android: Mainstream models mainly for 480x800, 480x854, 540x960, 720x1280, 800x1280 these five kinds.
(Non-mainstream models also include: 240x320, 320x480, 640x960, three of them, two of which are consistent with the iPhone.) ）
IOS: Mainstream models are mainly 320x480, 640x960, 640x1136, 1024x768, 2048x1536, these five kinds.
WP: Mainstream models mainly for 480x800,720x1280, 768x1280 these three kinds of

When Photoshop is drawing, the font size is usually the PT unit. PT is the length unit, 1pt = 1/72 inches, px = pt * dpi/72.

A more specific explanation of these units is also attached to the watercress.

Android px, DP, SP differences