Knowledge of Android screens that UI designers should know

Many designers and engineers are confused by the numerous screens of Android devices, I do not only do UI design, but also do a little Android interface layout, just about this piece of content is familiar with, also in the company has done related lectures, in this, I will this part of the knowledge to re-comb out to share to everyone!

1. Understand several concepts

(1) resolution. Resolution is the cell phone screen pixel points, generally described as the screen "wide x high", Android phone screen Common resolution has 480x800, 720x1280, 1080x1920 and so on. 720x1280 indicates that this screen has 720 pixels in the width direction and 1280 pixels in the height direction.

(2) Screen size. The screen size is the physical size of the diagonal of the phone, in inches (inch). For example, a mobile phone for "5 inch large screen mobile phone" refers to the size of the diagonal, 5 inches x2.54 cm/inch = 12.7 centimeters.

(3) density (dpi,dots per inch; or ppi,pixels per inch). From the English name, is the pixel points per inch, the higher the value of course the more delicate display. If we know the resolution of a cell phone is 1080x1920 and the screen size is 5 inches, can you figure out the density of this screen? Haha, the high school's Pythagorean theorem comes in handy! By a width of 1080 and a height of 1920, according to the Pythagorean theorem, we conclude that the diagonal number of pixels is about 2203, then 2203 divided by 5 is the density of this screen, the result is 440. The 440dpi screen has been quite delicate.

2. Actual density and system density

It has not been discovered that the terms "actual density" and "system density" are used elsewhere to define it for the time being.

"Actual density" is our own calculation of the density, this density represents the screen of the true degree of detail, such as the above example 440dpi is the actual density, indicating that the screen has 440 pixels per inch. The screen density of the 5-inch 1080x1920 is 440, while the 4.5-inch screen density of the same resolution is 490. In this view, the screen density will be a lot of values, serious fragmentation. And density is the basis for the Android screen to zoom in and out, so how does Android fit so many screens?

In fact, each Android phone screen has an initial fixed density, these values are 120, 160, 240, 320, 480, we right vote called "system density." Did you find the pattern? There is a twice-fold relationship between the separated values. In general, the 240x320 screen is low-density 120dpi, that is, the ldpi;320x480 screen is medium density 160dpi, that is, the mdpi;480x800 screen is high-density 240dpi, that is, the hdpi;720x1280 screen is ultra-high-density 320dpi, That is, the xhdpi;1080x1920 screen is ultra-high density 480dpi, that is, xxhdpi.

Android Scales the interface elements according to the system density, not the actual density.

3, an important unit DP

DP can also be written as dip, i.e. density-independent pixel. You can imagine that a DP is more like a physical size, such as a picture with a width and height of 100dp that "looks" as large on 320x480 and 480x800 's phone. In fact, their pixel values are not the same. DP is such a size, regardless of the density of the screen, the same DP-sized elements on the screen will always look almost large.

In addition, the text size uses the SP, which is the abbreviation of Scale-independentpixel, so that when you adjust the font size in the system settings, the text in the app will become larger and smaller.

4, DP and PX conversion

In Android, the system density of 160dpi of the medium-density mobile phone screen for the reference screen, that is, the 320x480 phone screen. In this screen, 1dp=1px.

100DP is 100px in 320x480 (mdpi,160dpi). So how many PX does 100DP have on the 480x800 (hdpi,240dpi) phone? We know that 100DP looks almost large on two phones, and according to the proportional relationship between 160 and 240, we know that in 480x800, 100DP actually covers 150px. So if you have a 100px picture for your mdpi phone, this image will stretch to 150px on the hdpi phone, but they are all 100dp.

The scaling ratios of medium density and high density appear to be not calculated by 160dpi and 240dpi, and can be computed by 320px and 480px. However, scaling by width does not apply to ultra-high density xhdpi and ultra-high density xxhdpi. That is, how many px is 1DP in 720x1280? If you use 720/320, you will get 1dp=2.25px, it is wrong to actually calculate it. DP and PX conversion to the system density, 720x1280 system density of 320,320x480 system density of 160,320/160=2, then in 720x1280, 1dp=2px. In the same vein, in 1080x1920, 1dp=3px.

We can remember the following ratio, DP and PX conversion is very easy!

Ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12, we find that there is a twice-fold relationship between numbers. When calculating, the MDPI is the benchmark. For example, in 720x1280 (xhdpi), 1DP equals how many px? MDPI is 4,xhdpi is 8, twice times the relationship, namely 1dp=2px. The inverse calculation is more important, such as you use Photoshop in the 720x1280 canvas to create the interface, two elements of the spacing is 20px, then how many DP? Twice times the relationship, that's 10dp!.

When the Android font size is set to "normal", the size conversion of the SP and PX is the same as the DP and PX. For example, a text size in the 720x1280 PS canvas is 24px, then tell the engineer, the text size is 12SP.

5, proposed in the XDHPI in the drawing

What kind of screen do I draw on my Android phone with so many screens? There is no need to provide a set of materials for different densities of mobile phones, and in most cases a set is enough.

Now the high resolution of the phone is 1080x1920, you can choose this size, but the picture material will increase the size of the application installation package. And the larger the size of the picture takes up the higher memory. If you are not design rom, but do an application, I suggest you use PS in the 720x1280 canvas. This size takes into account aesthetics, economy and simplicity of calculation. Aesthetics refers to the use of this size to make the application, in the 720x1280 display perfect, in the 1080x1920 look more clear; Economy refers to the resolution of the exported image size is moderate, the memory consumption is not too high, and the picture file size is moderate, the installation package will not be too large; simple calculation, Is 1dp=2px ah, how good calculation Ah!

Make a picture and remember to have the interface engineer put it into the DRAWABLE-XHDPI resource folder.

6. Screen width and height differences

When drawing in 720x1280, consider backwards compatibility with different screens. By calculation we can know that the screen width of 320x480 and 480x800 is 320DP, and the screen width of 720x1280 and 1080x1920 is 360DP. There is a 40dp gap between them, this 40dp in the design of the impact is still very large. For example, the butterfly picture is different from the left and right margin of the screen on a 320DP wide screen and a 360DP wide screen.

Not only is there a difference in width, but the difference in height is more obvious. For tool class applications such as weather, because the interface is generally exclusive, consider the proportional differences between screens.

If you want to eliminate these scale differences, you can do so by adding a layout file. In general, layout files are placed in the Layouts folder, if you want to adjust the 360DP screen separately, you can do a single layout file in the LAYOUT-W360DP, but preferably the default for the 360DP screen layout (more mainstream), Then put the layout file in LAYOUT-W320DP for a separate layout of the 320DP screen, and if you want to adjust a particular resolution, you can place the layout file in a folder labeled resolution, such as layout-854x480.

7. Folders for several resources

Make a picture in 720x1280, you want to let the developer put in the DRAWABLE-XHDPI resource folder, so it can be displayed correctly. Personally think that only provide a set of material can be, you can test the application on the low-end mobile phone running is smooth, if the lag, you can provide some of the mdpi picture material, as the xhdpi in the picture run on the MDPI phone will be compared to the memory.

Take the app icon as an example, the icon size in xhdpi is 96px, and if you want to provide an icon for MDPI separately, the icon size is 48px and placed in the DRAWABLE-MDPI resource folder. The picture size in each resource folder also conforms to the Ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12 law.

What if you make a 9.png image of a 2px split-line material, and you want the lines to be 2px in different densities without being scaled by Android based on density? You can put the split-line footage in the drawable-nodpi, and the picture in the resource folder will be displayed in the actual pixel size, rather than being scaled by Android based on density. That is, the thin line in the MDPI is 2px (2DP), and the thin line in the xhdpi is 2px (1DP).

The above is a preliminary summary of the Android screen, I do not know if you read after the enlightened, or confused? This article is mainly for practical purposes, avoid too much in-depth analysis, if you have any questions, you can leave a message.

----------------------------------------------------------

Finally, many friends asked me the design of the Android tablet, referred to the most 1280x800 resolution, the resolution of the tablet is generally 10.1-inch medium density screen, directly in the PS set up the 1280x800 canvas, The extracted footage allows development to be placed in the drawable-mdpi. And the medium density of the plate, 1dp=1px, relatively good conversion units.

Knowledge of Android screens that UI designers should know