A clear explanation of Dpi/screen-size on Android

Android defines four types of screen-size:

Small

Normal

Large

XLarge

At the same time, six DPI levels are defined:

LDPI (Low) ~120dpi
MDPI (Medium) ~160dpi
HDPI (High) ~240dpi
XHDPI (Extra-high) ~320dpi
XXHDPI (Extra-extra-high) ~480dpi
XXXHDPI (Extra-extra-extra-high) ~640dpi

The purpose of defining these levels is to better organize resources to accommodate different devices. See also: Http://developer.android.com/guide/practices/screens_support.html#range

When the system runs our app, it automatically loads the right resources based on the current level of the device, and we need to prepare our own resources for different levels, such as providing a layout with a side-by-side two view for the big screen, and only one view at a time on the small screen.

To do this, we have to know, given a device, how to determine which level it is? then you can focus on the appropriate resources in the correct level of the directory.

First look at screen size, this level will affect the layout template selection, that is, when specifying a r.layout.id_xxx, whether it is loaded from the res/layout, or from the res/layout-large load it?

First look at the official map:

The first row is about the size of the file, where each file is overlapping, that is, a approximate range.

But we know that the load logic must be accurate when the program runs, and for each device it must have a certain value to determine what level it is, before it knows which resources to load.

In theory, if we have a 3.3 "cell phone, is it small or normal? Can not be judged.

Therefore, it is necessary to have a more accurate method of calculation, and this method is involved in DPI.

Dpi:dot per inch, that is, how many pixels are in the pixel, to calculate this value, you need to know its physical size and physical resolution (that is, the full screen of the actual pixels, or that can be illuminated components)

For example, we build a virtual device to see:

Its physical resolution is 720x1280 and the physical size is 4.7 "

It may be questioned that physical dimensions are also wide and high, how is a value? This 4.7 ", is the length of the diagonal. The advantage of a diagonal line is that it allows for a more liberal, wide-height combination.

Then to calculate this dpi, it is common sense to forget, because the 1 diagonal value can not determine the unique width of the height.

But in another way, change the area density to line density, that is, the number of pixels on the diagonal is divided by the diagonal length, the values should be consistent, so the DPI is calculated as follows:

DPI = sqrt (pixel_width^2+pixel_height^2)/diagonal = sqrt (720^2+1280^2)/4.7 = 312.5

In contrast to the above table, the DPI level is xhdpi, consistent with the display on the tool interface.

Know the DPI, then the loading directory of the picture class resources to know, this example is res/drawable-xhdpi, but the layout class resources?

The selection criteria for layout are different from the image resources, not at the DPI level, but in the level of screen size.

The above-mentioned screen size classification method instead of inserting the DPI interpretation, it is for this to clarify its meaning.

In fact, the official classification criteria for screen size are as follows:

• XLarge Screens is at least 960DP x 720DP
• Large screens is at least 640DP x 480DP
• Normal screens is at least 470DP x 320DP
• Small screens is at least 426DP x 320DP

The wide and high values given here do not actually have a single comparative meaning, and the end result is to see the product.

That is to say, the smallest screen should have 426*320=136,320 DP, and to be a medium screen you need at least 470*320=150,400 DP, the list is as follows:

Smal = 136,320

normal = 150,400

Large = 307,200

XLarge = 691,200

Now the question is, what is DP, and what is the dpi relationship? For the above example, how many DP does it have?

Recall the DPI, which is itself a ratio value, which is the number of pixels per inch, which is a property of the ability to engrave equipment.

However, a lot of times the absolute value of the ability is not intuitive to the general human cognitive understanding (although this example is not appropriate, DPI is very intuitive), its relative values are more meaningful.

Then select the first Android device as the benchmark, its DPI is 160, the other device DPI and 160 compared to get a ratio value scale, is the device's (dp-) scale,

Then the DP of the device is defined as:

DPX = Pixel_width/scale

Dpy = Pixel_height/scale

In this case, the scale=312.5/160=1.95,dpx=720/scale=369.2,dpy=1280/scale=646.4

That is, measured in DP units, this virtual device has a 369 x 646 screen that can now be used to calculate its size level: DP = DPX * dpy = 369 * 646 = 238,374

Check the table indicates between 150,400 and 307,200, so its screen size is normal, when loading layout, priority is to use the resources in Res/layout (not small/large/xlarge).

After the definition and calculation process is clear, look back at what DP means and why you should define such a unit in such a tortuous way.

1, in fact, from the physical resolution to DP (that is, screen size), but the conversion of the means, but the purpose is the same: to solve the "number clearly on the screen exactly how many points, then our UI panel to do how many points" this issue.

2, why do not directly use "physical pixels", what will be the problem? Because the physical size and resolution of the different devices vary greatly, the extreme situation is that two devices with the same resolution, the size is half, such as these two:

If you define a panel in physical pixels as 400*600px size, which is half full screen, it looks right on a 10 "tablet, and on a 4.7" phone, that's a small mound, this mound physics occupies only 1/16 of the tablet!

if the visual effect on your tablet is reasonable, it's hard to imagine how the naked eye adapts to the 1/16 homogeneous elements .

But what happens when you use DP as a description? (Calculation results can be easily obtained on this page: https://www.sven.de/dpi/)

For the former, Dpi=149.5,scale~=1.0,screen size (DP) =800*1280

For the latter, Dpi=317.6,scale~=2.0,screen size (DP) =384*640

If we need an area where the tablet occupies 1/4 (that is, 1/2 of the width and height), then its DP size should be 400*640

Now calculate its footprint on the phone, first converted to pixel size, w=400*2.0=800,h=640*2.0=1280

That is, this is an area of 800*1280 pixels, almost exactly the entire phone screen size (considering the rounding error when calculating scale)

This size, in physical size, is exactly the same as 1/4 on the tablet.

As you can see, the advantage of using DP to describe size is that the area is as large as the physical area of the screen with different resolutions and physical dimensions!

and the physical area, is the naked eye to observe the important measure of comfort-not just resolution, I believe we all have experience, a lot of HD screen mobile phone although enough delicate, but if used to see the ebook is actually very waste eye, far less than the lower resolution but larger size of the tablet)

Now that the meaning and benefits of DP are clear, there is one final question: if you really want to design a panel, how much DP should I give it? DP is both a virtual unit, how to intuitively estimate the size of it?

In fact, you can use the source of the DP-the size of the first Android device as a benchmark to consider, it is a size of 3.2 ", the resolution of 320*480 phone:

On top of it, 1 DP is a pixel. So, to get a large interface, it is a reference to it!

A clear explanation of Dpi/screen-size on Android