There are differences between SP, DP and PX in layout files

As we all know, there are many Android manufacturers, and Android phones and tablets of various sizes emerge in endlessly. The fragmentation of Android ecological environment is becoming more and more serious. In order to solve the problem of too many resolutions, Google defines Px, DP and SP in the Android development document to facilitate developers to adapt Android devices with different resolutions. It is necessary for junior programmers to understand and master some basic knowledge of adaptation.

Pixel, or pixel, 1px represents a physical pixel on the screen. However, PX units are not recommended. Because the actual size of pictures with the same pixel size may be different on different mobile phones. When PX is used, when a 1-pixel table line or shadow line needs to be drawn, it will appear blurred if drawn with other units.

To understand DP, we must first introduce the concept of DPI. The full name of DPI is dots per inch, and the number of pixels per inch of the diagonal. Therefore, its calculation formula is as follows:

For example, height and width are the pixels of length and width, the sum of squares is the number of diagonal pixels, and size is the 5 and 4 of 5-inch mobile phones and 4-inch mobile phones, that is, the length of the diagonal.

Therefore, for the same 5-inch mobile phone, the higher the resolution, the higher the DPI. With the same resolution, the smaller the diagonal inches of the screen, the higher the DPI.

DP is also called dip, which is device independent pixels. The device does not depend on a unit of pixels. It will be automatically adapted on devices with different pixel densities, such as:

At 320x480 resolution, the pixel density is 160,1dp = 1px

At 480x800 resolution, the pixel density is 240,1dp = 1.5px

Calculation formula: PX = DP * (DPI / 160)

Let's do a simple sample to verify, as follows, a layout code

    <Button
        android:layout_width="150px"
        android:layout_height="wrap_content"
        android:text="Test px" />
    <Button
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Test dp" />

In 480 * 800 resolution, the device effect diagram of diagonal inches of 3.7 screen is as follows

In 480 * 800 resolution, the device effect diagram of diagonal inches of 5.1 screen is as follows

▲ it can be seen that if PX is used as the unit, different effects will be displayed in different devices. If DP is used as the unit, it will be converted according to different equipment and adapted to different models. Therefore, it is recommended to use DP as the unit in the value of length and width.

Since we said above that DP can automatically adapt to the device model, is it also feasible in the font? Let's do a simple sample verification, as follows, a layout code

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test dp"
        android:textSize="20dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test sp"
        android:textSize="20sp" />

In 480 * 800 resolution, the device effect diagram of diagonal inches of 3.7 screen is as follows

With 480 * 800 resolution and 3.7 diagonal inches of the screen, we modify the font size of the mobile phone system and get the effect picture as follows

▲ it can be seen that using SP as the font size unit will change with the font size of the system, while DP as the unit will not. Therefore, it is recommended to use SP as the unit for the value of font size

Provides a tool class: DP and PX value conversion

public class DensityUtil {

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dp2px(Context context,float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dp(Context context,float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}