Use this free Sketch plugin to help you perfectly restore the Android interface!

Have you ever been overwhelmed by the "terrible" implementation interface of Android, doubted the ability of Android developers, and almost gave up on Android? From now on, don't worry, this article will definitely make you regain confidence in Android and cooperate with the development to restore the Android interface to its original state.

Plugin address: https://github.com/zz379/AutoFixAndroidTextLineHeight.git

Plugin download: https://pan.baidu.com/s/1Oh_Y0nxOFV8LBdxxhdVPag

1. Cause

Every time I took over the Android test machine to check the Android implementation interface, I was very nervous. As expected, I was always impressed by the "casual" interface, and then spent N times of overtime to adjust it bit by bit. After the recent project was completed, I planned to find the problem of each "casual" interface. Finally, while watching the development process of the interface, I found the key to the problem: the blank space above and below the Android text box.

After measurement, it was found that the height of the text box implemented in the interface is much higher than the height of the text in the design drawing. On the basis of displaying text, the text box leaves a considerable amount of blank space above and below. This gap becomes the key to the Android interface restoration problem.

I searched the Internet for answers to the problem and tried to solve it by removing the top and bottom gaps of the text box control during development. I finally found two solutions:

Method 1: Custom text control

Do not use the system default text box control, and customize the width and height of each text box. Although the custom control method can eliminate the upper and lower gaps in the control, this method creates new problems, because each text box needs to write a layer of custom width and height separately, which undoubtedly adds a layer of layout depth. If the entire APP uses this method to display text, it will greatly affect the performance of the product. Therefore, this method is not advisable.

Method 2: Add a code to remove gaps

This is a code mentioned in many forums, which can eliminate the upper and lower gaps of the text box: android:includeFontPadding="false"

After adding this code, the height of the text box has changed, but it is not completely eliminated, and there is no guarantee that the height after elimination will be consistent with the height of the text box in the design drawing. So this method does not completely solve this problem.

When eliminating the gap between text boxes doesn't work, you can only think in a different way to solve the problem, which is to increase the text line height in the design so that the height of the text box in the design and implementation interface is consistent.

This method has been mentioned in many articles on the Internet, that is, when using Sketch to design interfaces, the line height of text is set. However, most articles only mention an approximate ratio of line height to font size, such as 1.2 times, 1.4 times, etc. There is no accurate corresponding value and verification process.

However, the article "Automatically Fix iOS Text Line Height" shared by @Gis1on and @Youngxkk some time ago detailed the correspondence between the height of text controls and font sizes on the iOS platform, and found the rules, developed a Sketch plug-in, automatically fixed the line height of different font sizes in the design drawing, and made the repaired line height consistent with the text box height in the iOS development platform. This effectively solved the difference between the iOS platform interface implementation and the design drawing caused by text.

This article has inspired me a lot. Unfortunately, they only solved the problem of iOS, but the restoration of the Android interface in actual work is more worrying. Only by solving the problem of text box gap height can there be a possibility of Android's ultimate restoration design.

Fortunately, a new Android development engineer @zz379 joined the team. After a brief communication with him, he also realized the criticality of this problem. I also felt his attitude of pursuing 100% restoration. After discussing with him, we decided to make a plug-in for Android text line height optimization based on the iOS automatic repair plug-in through actual measurement to efficiently solve this difficult problem.

2. Measurement

First put the measurement results, see the figure below:

1. Measurement size range 10-70, measurement unit: PX

Why choose a measurement range of 10-70?

There are two common Android design draft sizes: 360*640 and 720*1280. The text sizes commonly used in the 720*1280 size include the text sizes commonly used in the 360*640 size design drawings.

The smallest text size on mobile devices is 20px, and commonly used Chinese characters will basically not exceed 70px in a 720-size design drawing, so we selected a text size of 10px-70px for measurement, so we measured the height of the textview corresponding to the 10px-70px font size.

Why choose to measure in px instead of sp?

The reason for measuring px is that px is the available unit in the design drawing. If you choose to measure sp, you cannot get the sp value in Sketch.

2. Measurement of different models and magnifications

The development uses the default Android font, but considering that different brands and models have different fonts, we measured 4 models, namely: Samsung S7 (switchable resolution 720*1280/1080*1920/1440*2560), Xiaomi 4 (1080*1920), Huawei Mate 9 (1080*1920) and Nut Pro 2 (1080*1920). After measurement, the results obtained at the same magnification are almost the same. Therefore, the conclusion is that the line height measurement results are not affected by the default font of the brand Android model.

Then we measured whether the line height under different magnifications also follows the magnification change. The measurement found that no matter it is a 2x, 3x or 4x image, the pixel value converted by the magnification is almost the same. Only in some 4x images above 33sp, there will be a reduction of 2-3 pixels. So we can conclude that the line height measurement results are not affected by the magnification within the commonly used text size range of UI.

Then we measured the line height of different font weights, and the result was: line height is not affected by font weight.

In the iOS plug-in, the measured values ​​have certain rules, and they use algorithms to calculate the line height corresponding to the font size. However, it is different for Android. By observing the measurement and comparison data, no usable rules were found, so all the corresponding values ​​were put into the code, and the corresponding line height values ​​were directly called for different text sizes.

3. Precautions for using plug-ins

Note 1:

Because the default Chinese font for Android development is Source Han Sans, the font of the design drawing should be Source Han Sans. However, there is a bug in Sketch's support for Source Han Sans. After modifying the line height, there will be a misalignment, as shown in the figure:

Therefore, you do not need to change the font to Source Han Sans in the design drawing. You can directly use the Ping Fang font instead, because both fonts are bold and the height of Chinese characters is similar, so the visual effect is not affected. (Note: The number part of the two fonts is quite different. The number part of Source Han Sans is higher than the number part of the Ping Fang font. If you encounter this problem during development, please refer to the Chinese characters to adjust the number position).

Note 2:

After using the plug-in, the text will be slightly displaced up and down due to the adjustment of the line height. It is recommended to fix the line height first and then adjust the spacing between the text and the upper and lower elements. However, in actual work, Android design drawings are basically converted from iOS design drawings, and the text has been entered. Then you can only manually fine-tune the upper and lower spacing of each text after fixing the line height to ensure that the spacing between each element is an even number or the spacing value in the design specification.

Note three:

To use, select a single artboard or multiple text layers, select plugins => Auto Fix Android Text Line Height => Fix

Shortcut: shift + option + command + o

(Currently does not support selecting multiple artboards for repair at the same time)

Note 4:

The plugin does not support OSX. I have tested that it does not support Mac systems below 10.11.6. It is not clear whether it can be used above 10.11.6. It can be used on macOS High Sierra. (Since the Android plugin is based on the iOS plugin, this problem also exists in the iOS plugin).

4. Comparison of repair effects

From the above series of comparison pictures, we can see that the difference between the interface restoration effect before and after the repair is very obvious. The line height after the plug-in repair can perfectly match the interface restoration in actual work, and the problem of character box height is the most difficult problem for perfect restoration of Android interface. Only when this problem is solved can perfect restoration be possible. And the tool to solve this problem is this Sketch Repair Line Height plug-in.