Regarding Android adaptation, it is enough to read this article

This article mainly introduces the relevant content about Android interface adaptation, which is suitable for Android development engineers with 1-3 years of experience.

1. Why adapt?

Let’s first look at a set of statistics and charts.

【2014 Equipment Distribution Map】

[[185118]]

【2015 Equipment Distribution Map】

【Device brand distribution】

【Screen size distribution chart】

【System distribution diagram】

【Comparison with iOS】

From the above pictures, we can see that there are many Android devices, many brands, many screen sizes, and a large distribution of system versions, which is very fragmented. This is why Android needs to be adapted. In addition, Android adaptation includes adaptation of system versions, adaptation of screen sizes, etc.

2. About adapting various concepts

unit

—— px (pixel): Pixel, a dot on the screen, the smallest independent display unit, px is an integer, no decimals. Generally, it is a square pixel reference link

——in: means inches, each inch is equivalent to 2.54 centimeters.

concept

——Screen size: The physical size of the screen, which refers to the diagonal length. For example, if the mobile phone screen is 3.5 inches, it means the diagonal length is 3.5 inches, which is about 8.89 cm.

——Screen resolution: refers to the number of pixels on the horizontal and vertical sides of the screen, the unit is px, such as 1920*1080 3:

——Screen pixel density: dpi (dots per inch), the number of pixels per inch, such as 120dpi, 160dpi, it is related to the screen size and screen resolution.

Android units and conversion

dp or dip, device-independent pixel, that is, density-independent pixel. Note that it is different from dpi. Taking 160dpi as the benchmark, 1dip=1px screen password, density = dpi / 160, so if the screen density is 1, then 1dp = 1px, if it is 2, then 1dp = 2px 3: sp (scale-independent pixels), the recommended unit of fonts, can be scaled according to the text option, the official recommended minimum value is 12sp, and then try to use even values.

*dpi

mdpi → [120dpi ~ 160dpi]

hdpi → [160dpi ~ 240dpi]

xdpi → [240dpi ~ 320dpi]

xxdpi → [320dpi ~ 480dpi]

xxxdpi → [480dpi ~ 640dpi]

Case

For example, a mobile phone screen resolution is 480*800 and the screen size is 3.7in. What is its dpi? If the width is set to 320dp in the layout, how many pixels is the width?

Theoretical calculation value: first calculate the number of pixels on the diagonal line 480 480 + 800 800 = 933933, then calculate the number of pixels per inch 933/3.7 = 252dpi, and the final calculated dpi is 252. Calculate the pixel value corresponding to 320dp: first calculate the screen density, the screen density value is equivalent to the pixel value corresponding to 1dp: 320 (252/160) = 504px, (the mobile phone screen is only 480px, and the calculated width is actually wider than the screen. If this is true, it means that if the above screen is set to 320dp, part of it is outside the screen)

Note: The DPI calculated on the phone is a theoretical value. In fact, there are only 120 (low), 160 (medium), 240 (high), 320 (xhigh), etc. Therefore, the actual calculation formula is: 320 (240 /160) = 480px, which is the same as the screen width. This means that the above screen is set to 320dp, which just occupies the entire screen.

3. How to adapt?

The above only tells us why to adapt and various concepts, but how to adapt? Here we mainly focus on mobile phones and do not involve tablet adaptation.

Cutting rules

From the above concept, we know that 1dp=1px at 160dpi, so when designing icons, the ratio of (mdpi, hdpi, xhpi, xxhpi, xxhpi) is 2:3:4:6:8. For example, for a system icon, if mdpi is 4848, then xdpi is 7272, and the ratio is 1.5. From the res structure in the above figure, we can see that there is a mipmap-* folder, which is a new folder added by the system to store system icons.

Sizes of various icons

The following are the official recommended icon sizes:

Width value setting

Let's first look at setting a view with a width of 320dp in an interface.

From the figure, we can see that different screens show different effects (ignoring tablets). On some mobile phones, the full width of the screen is occupied, while on some mobile phones, only a part of the screen width is occupied. Therefore, when visually outputting the image, for example, if the image is output at a size of 800 * 480 and the annotation occupies the full width of the screen (240dp), the actual display effect will be inconsistent on different mobile phones.

Therefore, in development, you can use match_parent to set it to fill the entire screen. If it is other sizes, you can use adaptive or weight to set the width and height occupied by the view.

Qualifiers

We can see from the above that *dpi is used as a qualifier. There are also other qualifiers such as large qualifier, sw qualifier, etc., which we will not expand one by one.

.9 pictures

.9 is a one-pixel transparent border added by the system around the image. The image must have .9 as a descriptor. For example, if you use an image as the background, if it is not a .9 image, then if the content area is larger than the icon, the image will be stretched. The four corners of the image below are stretched.

The picture below sets the stretching area of ​​the image. You can see that the four corners of the image are not stretched, so the final visual effect is much better.

Marking position: Mark on two adjacent sides. You cannot mark only one side, nor only two opposite sides. If you mark only two sides, the stretching area is the intersection, and the text area is controlled by the right and bottom sides. If you do not mark, the entire width will be filled.

It should also be noted that images can be annotated in sections, but the final stretching effect of the image is related to the annotated pixels. For example, if the same side is annotated on both the top and bottom and the top and bottom pixel ratio is 3:1, the final stretching ratio is also 3:1.

4. More Tips

a: The same image size in hdpi, xhdpi, etc. must be proportional so that it can be displayed consistently on the same screen with different resolutions. Note the 2:3:4:6:8 ratio above.

b: For the same type, the images should be of the same size. Multiple people may make multiple modules, which may result in a difference of 1 or 2 pixels between the images of the same type that are cut out (you can create a resource library to check the existing icon sizes).

c: The same picture problem: different people make different modules, and many icons are the same. Due to different development, there will be the same pictures in a package, which will cause the package size to increase.

d: If you can use pure color images, let the developer use color values ​​as much as possible without cutting the images.

e: Compared with png images, jpg images are much smaller. If you have large images and no blur or gradient requirements, try to use jpg format.

f: Many simple images can be implemented with code, such as circles, rectangles, etc., which allows developers to implement them with code and reduce the size of the package.

g: If the package size is too large, try to ensure that there are higher-sized pictures, so that mobile phones with low screen density can also display very clear pictures. However, if there are only small pictures, they will be enlarged and stretched, causing the picture to be deformed or unclear.

h: .9 Pay attention to marking the stretching area and the content area, and the padding of the outer margin of the picture, which can be marked directly on the picture. (If the upper and lower distances of the content area are not equal, the text will not be centered when filling multiple lines of text. In this case, padding can be directly left on the picture)

i: .9 images can only be stretched but not compressed. Compression will cause image deformation. Therefore, the minimum size of the image must be determined during the drawing process. (For example, if a rectangular area of ​​a certain height is given and a .9 image with an initial height greater than the rectangle is placed in it, the image will be compressed).

j: .9 Pictures are usually only made in small sizes, unless the border has elements such as gradients, then they can be made in multiple sizes.

k: Regarding image annotation, artists need to convert the units, converting px to the corresponding dp, and developers can directly use the value.

l: Regarding fonts and font size, if the font is displayed in a rectangular box with a fixed height, it may not be fully displayed on a mobile phone that can adjust the font size (try not to set a fixed height for external pictures and backgrounds that display fonts).

m: When annotating an image, if an icon takes up the entire width, you do not need to annotate the icon width. You only need to annotate the distance from the border. The developer will use adaptive mode. If you determine the width, it may only take up half the width on some screens.

After reading this, I wonder if you have a better understanding of your Android development experience~ This Tuesday, we invited Cheng Yin, a senior mobile development engineer at NetEase Cloud Music, to share his work experience related to mobile development with everyone.