Differences between Android px, dp, and sp

Differences between Android px, dp, and sp

Since the rise of Android, developers have been increasing, while devices on the market are also increasing. What follows is the troubles and complaints that developers need to adapt to a large number of models. With the customization of different ROM devices from different manufacturers, the fragmentation of Android devices is becoming increasingly serious. This article describes how to design an Android page that strictly complies with the design standards.

1. What is the difference between px, dp, and sp?

Px is what we usually call the unit of pixels. In css, we use more pixels. Px mainly refers to the actual size unit of the things you see on the screen.

What is dp?

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

We can see that the 15-inch retina pro resolution is 2880x1800, while the 60-inch HDTV resolution is only 1920x1080. It can be seen that if the 60-inch HDTV is to reach the Retina display, the resolution is at least 11520x7200. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Release + zb/release + 0uLKx8O/06K057XjtcTK/cG/o6y1q8rH0rK + release/xy9jK/cG/release + release/UqsvYs9 + release/release + release/ fOqrv5tKG1pc67oaO2 + NTaxuTL + release/release + C21NK71sK1xLDZt9axyKGjy/nS1L + release = "What is sp"> what is sp

Sp is the unit of professional font settings in Android. Using sp as the font unit not only affects the font size by screen density, but also affects the font size by user system settings. Android provides options for setting the font size. Once the sp is used as the font, the font size in the App varies depending on the font you set. However, in the normal font setting, 1dp = 1sp.

2. Designer's perspective

Android's multi-screen adaptation has so many sizes that it naturally requires designers and engineers to find a bridge of communication. How can designers standardize the design to better comply with Android's design standards. Designers and engineers need to have a consensus standard for the page size, so that testers can perform more effective tests. This is not due to unnecessary workload caused by different models displaying different effects.

First, we need to select a relatively general screen size, refer to the existing mainstream models of the size. For ease of computing, we chose Nexus 4 as the original design standard. All pages are generated based on Nexus4. The Nexus4 size is as follows:

The size of the main screen is 4.7, the resolution of the main screen is 1280x768 pixels, and the screen pixel density is 320ppi.

In general, we choose the most common model on the market for design. Here we choose the 320ppi model for ease of calculation. The size in the design diagram will be twice that in the standard diagram. Assume that in the design drawing, the page padding is 32px, the button height is 96px, And the icon size is 48x48.

Passpx＝dp*(dpi/160)The designer can label the developer with a page margin of 16dp, the button height of 48dp, And the icon will produce four sets of mdpi, hdpi, xhdpi, and xxhdpi respectively.

3. developer perspective: margin, padding, height, width

From the developer's perspective, you only need to set the size and height of the control according to the converted dp.

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

The unit of dp ensures that fonts of different sizes are displayed on the screen at different resolutions. In addition, it can maintain the relative size, which is more in line with the original design intention.

Image Resources

Images produced by png are generally fixed in size and cannot be automatically scaled as they are in size. Therefore, Android has at least four resource folders. When an App is running, the system automatically selects the image size 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

Attached mainstream Android models:

Android: mainstream models include 480x800,480x854,540x960,720x1280,800x1280 x.
(Non-mainstream models include 240x320,320x480,640x960, both of which are consistent with those of the iPhone .)
IOS: mainstream models include 320x480,640x960,640x1136,102 4x768,204 8x1536.
WP: mainstream models: 480x800,720x1280,768x1280

During Photoshop plotting, the font size is usually pt. Pt is the unit of length, 1pt = 1/72 inch, px = pt * dpi/72.

A more detailed explanation of these units is attached to Douban.