“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

The outline

  1. Use DP instead of PX
  2. Try to use adaptive layouts instead of specifying resolutions
  3. Use the width and height qualifier
    1. Values -1080×1920, calculate the size of each common resolution based on 1080P.
    2. Need to add as many device resolutions as possible (tools available)
    3. Fault tolerance is poor. If the device resolution does not accurately match the corresponding qualifier, the default dimens is used
  4. Third-party automatic adaptation of the UI framework
    1. Principle: Custom RelativeLayout that transforms control resolution in onMeasure
    2. Third party frameworks, maintainability is problematic
    3. Some custom View, processing is more troublesome
  5. Minimum width qualifier, similar to width and height qualifier
    1. Values-sw240dp, also calculate the values of other widths based on one DP width
    2. Values – sw360dp, values – sw480dp
    3. Compared with the width and height qualifier, the minimum width qualifier does not match precisely and follows the nearest principle, which can solve the fault tolerance problem better.
    4. For example, if the device width is 364DP, the system automatically configures dimens under values-SW360DP to the nearest dimens, and the display effect does not differ greatly
  6. Today’s top story — Modify density
    1. Px = dp x (DPI /160) = DP x density
    2. In this case, density
    3. When UI design drawing is required, unified DP is used as the benchmark
    4. Mp.weixin.qq.com/s/d9QCoBP6k…

The basic concept

  • Pixel – px
  • Density-independent pixels — DP or DIP
  • Pixel density — Dpi, the number of pixels per unit area.
    • The concept of software systems.
    • Fixed value in the configuration file when the system is delivered.
    • The value can be 160, 240, 360, or 480.
    • Unlike the physical concept of screen density PPI, such as 415, 430, and 470 ppi, dPI may be uniformly set to 480.
  • Density — When DPI =160, 1px = 1pd, denstiy =1, dPI =240, 1.5px = 1dp,density = 1.5.
  • The relationship of the above values:
    • denstiy = dpi / 160;
    • Px = dp x density = dp x (dpi / 160)

Android devices are extremely fragmented and come in a variety of sizes and resolutions. So in Android development, UI adaptation has become a very important step in the development process. To this end, Google proposed the probability of dip or DP for density independent pixels, aiming to deal with Android UI adaptation in a more friendly way.

However, the effect is not satisfactory and can solve most of the business scenarios, but the rest of the individual cases are very difficult, because Android devices are too fragmented, there are devices with various resolutions and DPI.

For example, two devices A and B, the resolution is 1920×1080, dPI is 420 and 480 respectively, write A 100dp wide ImageView in the layout, according to the above formula, ImageView display width is: 100dp x 420/160 = 262.5 and 100DP x 480/160 = 300, ImageView is obviously larger on the B device. The difference may not be obvious, let’s change the width to 360dp. The display width of device A is 948px, and that of device B is 1080px. This is bullshit, one width fills the screen, one discontent. This situation definitely needs to be developed to solve the problem.

Adaptation scheme

Although it is mentioned above that dp cannot solve all business scenarios, it can solve the adaptation problems in most scenarios compared with px directly.

So the first rule of UI adaptation is:

1. Write the layout using DP instead of PX.

And because the above cannot be adapted to individual scenarios, so the second UI adaptation is:

2. Use adaptive layouts instead of specifying resolutions

Use ConstraintLayout, ConstraintLayout, LinearLayout, and so on. Don’t write the resolution too tightly. In this example, match_parent is match_parent instead of 360DP, and you can avoid display inconsistency (but only in the above column).

qualifiers

Google also recognizes that DP meets the needs of all business scenarios, so it provides the concept of a width qualifier.

While your layout should always respond to different screen sizes by stretching the space in and around its view, this may not provide the best user experience for each screen size. For example, the interface you designed for your phone may not provide a good experience on a tablet. Therefore, your application should also provide alternate layout resources to optimize the interface design for specific screen sizes.

Minimum width qualifier

Using the “minimum Width” screen size qualifier, you can provide an alternate layout for screens with minimum width, measured in density-independent pixels DP or DIP.

By describing screen size as a measure of density-independent pixels, Android allows you to create layouts designed for very specific screen sizes without having to worry about different pixel densities.

You can use xxxx-swxxxdp to define some resource files with minimum qualifiers, such as values-sw400dp and values-sw600dp. The system will automatically match the resource files with similar screen width.

Let’s look at the example above. Two devices A and B have A resolution of 1920×1080 and A DPI of 360 and 400 respectively. Let’s simplify the problem by saying that the design is 1920×1080 360dpi and contains a 22.5px by 22.5px = 10dp by 10dp image. The empirical layout should be written as follows:

<ImageView
    android:id="@+id/img_iv"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:background="@mipmap/ic_launcher"/>
Copy the code

Results running on different devices:

  • 1280 x 720 240dpi device, image display 15px by 15px;
  • 1920 x1080 360dpi device A, image display 22.5px by 22.5px;
  • 1920 x1080 400dpi device B, image display 25px by 25px;

To solve this problem, we define two resource folders with the minimum width qualifier: values-SW360DP and values-SW400DP.

Add dimen. XML to values-sw360dp as follows:


      
<resources>
    <dimen name="dp_1">1dp</dimen>
    <dimen name="dp_2">2dp</dimen>
    <dimen name="dp_3">3dp</dimen>
    <dimen name="dp_4">4dp</dimen>
    <dimen name="dp_5">5dp</dimen>
    <dimen name="dp_6">6dp</dimen>
    <dimen name="dp_7">7dp</dimen>
  <! -- omit other values -->
  	<dimen name="dp_360">360dp</dimen>
    <! Control size usually does not exceed 360dp because the design is 360DPI. The maximum 360DP value is sufficient for use.
</resources>
Copy the code

Dp_1 = 1dp in 360dpi, dp_1 = 360/400 = 0.9dp in 400dpi, dp_1 = 360/400 = 0.9dp in 400dpi.


      
<resources>
    <dimen name="dp_1">0.9 dp</dimen>
    <dimen name="dp_2">1.8 dp</dimen>
    <dimen name="dp_3">2.7 dp</dimen>
    <dimen name="dp_4">3.6 dp</dimen>
    <dimen name="dp_5">4.5 dp</dimen>
    <dimen name="dp_6">5.4 dp</dimen>
    <dimen name="dp_7">6.3 dp</dimen>
  	<! -- omit other values -->
</resources>
Copy the code

Note that the default dimen.xml is added to the values folder. The file content is the same as the dimen.xml was added to values-sw360dp (because the design is 360dpi).

The ImageView in the layout should naturally be rewritten as:

<ImageView
    android:id="@+id/img_iv"
    android:layout_width="@dimen/dp_10"
    android:layout_height="@dimen/dp_10"
    android:background="@mipmap/ic_launcher"/>
Copy the code

Let’s take a look at the results of different devices:

  • 1280 x 720 240dpi device, not matched qualifier use dimen in values,dp_10 = 10dp, px = 10 * 240 / 160 = 15pxThe image should be 15px by 15px.
  • 1920 x1080 360dPI A device, matching to sw360DP qualifier,dp_10 = 10dp, px = 10 * 360 / 160 = 20pxThe image should be 22.5px by 22.5px.
  • 1920 x1080 400dpi B device, matching to sw420DP qualifier,dp_10 = 9dp, px = 9 * 400 / 160 = 20pxThe image should be 22.5px by 22.5px.

Perfect solution to the display problem of device A and B, so the third UI adaptation is:

3. Use the minimum (available) width qualifier to solve the problem of device adaptation with the same resolution and different DPI.

This solution seems perfect, but there are some implicit problems: this solution can only solve the adaptation problem of dPI devices with the same resolution and different resolution:

  • This will not work if the dPI is the same at different resolutions (which of course is unlikely).
  • The above example is based on the resolution of 1920×1080 as an example. Imagine if the 1280×720 device has 240dpi and 280dpi? We can only adapt to special cases, but cannot solve the problem of all scenarios.

Width and height qualifier

Similar to the minimum width qualifier mentioned above, but you need to specify exactly which device width and height to match, values-1920×1080, values-1280×720, and so on. Configuration and usage are similar to the above. If the size of the design drawing is 1920×1080 360Dpi, then it is only necessary to calculate the corresponding size of all resolutions based on 1920×1080, and the layout is written according to the given size one by one. For example: The given ImageView is 20px by 20px, so specify width and height @dimen/dp_20 in the layout.

Values -1920×1080 dimens. XML is as follows:

<resources>
    <dimen name="dp_1">1px</dimen>
    <dimen name="dp_2">2px</dimen>
    <dimen name="dp_3">3px</dimen>
    <dimen name="dp_4">4px</dimen>
    <dimen name="dp_5">5px</dimen>
    <dimen name="dp_6">6px</dimen>
    <dimen name="dp_7">7px</dimen>
    <dimen name="dp_8">8px</dimen>
    <dimen name="dp_9">9px</dimen>
  	<! -- Omit others -->
  	<dimen name="dp_1920">1920px</dimen>
</resources>
Copy the code

Values -1280×720


      
<resources>
    <dimen name="dp_1">0.66 px.</dimen>
    <dimen name="dp_2">1.33 px.</dimen>
    <dimen name="dp_3">2.0 px.</dimen>
    <dimen name="dp_4">2.66 px.</dimen>
    <dimen name="dp_5">3.33 px.</dimen>
    <dimen name="dp_6">4.0 px.</dimen>
    <dimen name="dp_7">4.66 px.</dimen>
  	<! -- Omit others -->
</resources>
Copy the code

Also add the default size dimen.xml to Values with the same content as the base resolution file.

Because not all device screens are 16:9, you can also split up the two dimens. XML files dimen_x. XML and dimen_y. XML according to the dimensions: 1920×1080 translates to x and Y values, respectively, but the page design is usually portrait slideable, so it is not sensitive to height, and you only need to calculate a uniform value based on one dimension.

The above calculation method is relatively simple, do not need to write their own conversion can be through the code tool or write a class to achieve. (There are many online, so you should be able to find them.)

Theoretically, as long as you enumerate all device resolutions as much as possible, you can perfectly solve the screen adaptation problem, so the fourth UI adaptation is:

4. Use width and height qualifiers to accurately match screen resolutions.

This solution was so close to perfection that it became a popular solution and was used by many teams. However, as mentioned before, Android devices are too fragmented. Considering that it is almost impossible to enumerate all screen sizes in the project for adaptation, if the device does not match the corresponding size, the default size file under VALUES will be used, which may cause serious UI adaptation problems.

But there is no denying that this scheme is simple to implement, is also very friendly for writing layout (directly fill in the size value of the design drawing, do not need to convert), can solve the vast majority of equipment adaptation problems, is a very friendly solution.

Third-party UI adaptation framework

There are a number of third-party library solutions that start with viewGroups. Either rewrite common layouts such as RelativeLayout, LinearLayout, and FrameLayout, and convert them inside the control to fit different sizes of devices, or provide new layouts such as: Google PercentLayout layout. But these programs are basically not maintenance, here will not be detailed, interested in their own search to understand.

The fifth aspect of UI adaptation is:

5. Use a third-party self-adaptation framework to solve UI adaptation problems.

For those interested, please refer to the following documents:

  • AndroidAutoLayout for hongyang bosses
  • Percentlayout introduction
  • Percentlayout Official documentation

Other adaptation schemes

Reference byte implementation scheme:

A very low cost Android screen adaptation

This article really belongs to the gap-of-the-tongue, due to see this blog Android currently the most stable and efficient UI adaptation. So I thought I should sort out this part of knowledge, so I wrote this document and added some of my own, mainly to sort out the knowledge points and deepen my understanding.

In this paper, we list several UI adaptation scheme, there is no strict, or can choose according to their own business requirements, also can choose several collocation is used, for example, the author mainly do smart TV (box), application development, Android TV is different from the mobile phone, less serious fragmentation, TV resolution types are numbered, Therefore, in daily projects, the basic choice of using the width and height qualifier for adaptation, the effect is also excellent.