Android Phone resolution Basics (dpi,dip Calculation)

<span id="Label3"></p><p><p>1. Terminology and concepts</p></p><p><p></p></p><p align="left"><p align="left"><strong>Conceptual interpretation</strong></p></p> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top" width="186"><p align="center"><strong>Noun</strong></p></td> <td valign="top" width="382"><p align="center"><strong>Explain</strong></p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Px</p><p align="center">(pixel Pixels)</p></td> <td valign="top" width="382"><p>Different devices show the same effect. The "same" here means that the number of pixels does not change, such as specifying a UI length of 100px, regardless of the resolution of the UI length is 100px. This is why the UI is magnified and distorted on small-resolution devices, and is scaled down at large resolutions.</p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Screen Size</p><p align="center">(screen Size)</p></td> <td valign="top" width="382"><p>Generally speaking, the size of a mobile phone screen, such as 1.6-inch, 1.9-inch, 2.2-inch, refers to the length of the diagonal, not the phone Area. We can get the width and length of the phone according to the Pythagorean theorem, and of course the AREA.</p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Resolution</p><p align="center">Resolution</p></td> <td valign="top" width="382"><p>Refers to the number of pixels in the vertical and horizontal direction of the Phone's Screen. For example, the resolution is 480*320, which means that the device has a vertical orientation of 480 pixels and a horizontal 320 pixel Point.</p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Dpi</p><p align="center">(dots per inch</p><p align="center">Pixel Density)</p></td> <td valign="top" width="382"><p>Refers to the number of pixels per Inch. such as 160dpi refers to the mobile phone horizontal or vertical direction of 160 pixels per inch distance. Assuming a device resolution of 320*240, the screen is 2 inches wide and 1.5 inches long, dpi=320/2=240/1.5=160</p><p><strong>Note: This value corresponds to the value of the property densitydpi in the Displaymetrics class. Please refer to http://www.cnblogs.com/wader2011/archive/2011/11/28/2266669.html for Details.</strong></p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Density</p><p align="center">Density</p></td> <td valign="top" width="382"><p>Refers to the number of pixels per square Inch.</p><p>Density=resolution/screen size</p><p><strong>Note: the value of the property density in the Displaymetrics class is dpi/160, which can be used to convert PX to Dip. Please refer to http://www.cnblogs.com/wader2011/archive/2011/11/28/2266684.html for Details.</strong></p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Dip</p><p align="center">(device-independent pixel, device Independent Pixels)</p></td> <td valign="top" width="382"><p>With dp, can be used as a unit of length, <strong>different devices have different display effect</strong> , this and equipment hardware, generally we in order to support wvga, HVGA and QVGA recommend this, do not rely on Pixels. The corresponding formula for dip and specific pixel values is the <strong>dip value = device density/160* pixel value</strong> , which can be seen on devices with a DPI (pixel density) of 160dpi 1px=1dip</p></td> </tr> <tr> <td valign="top" width="186"><p align="center">Sp</p><p align="center">(scaledpixels</p><p align="center">Enlarge Pixels)</p></td> <td valign="top" width="382"><p>Mainly used for font display (best for textsize). According to Google's suggestion, TextView's font size is best to use SP to do units, and view the source of TextView know that Android by default using the SP as the font size Units.</p></td> </tr> </tbody> </table><p><p></p></p><p><p>We can use the following ideas to explain why the dip instead of PX units:</p></p> <ol> <ol> <li>The device will end up with PX as the unit of Length.</li> <li>If we use PX directly as a unit it will cause the UI to appear inappropriate scaling on different resolution Devices. So we need a new unit that will eventually be able to convert the appropriate coefficients into PX to make the UI appear the right Size.</li> <li>Does the dip meet this requirement?</li> </ol> </ol><p><p>The corresponding formula for dip and specific pixel values <strong>dip value = device density/160* pixel value</strong> can be known</p></p><p><p><strong>pixel value =dip value/(device density/160),</strong> where the dip value is the length size we specify, then the pixel value, 160 is also colonization, that is, the final UI pixel value is only affected by the pixel density dip, this dip is equivalent to the conversion factor, The value of this coefficient is how much the device vendor is going to Decide. The dip therefore meets this Requirement.</p></p><p><p></p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top"><p align="center">Terms</p></td> <td valign="top"><p align="center">Description</p></td> <td valign="top"><p align="center">Note</p></td> </tr> <tr> <td valign="top"><p>Screen size</p></td> <td valign="top"><p>Refers to the actual physical size of the phone, such as the usual 2.8-inch, 3.2-inch, 3.5-inch, 3.7-inch</p></td> <td valign="top"><p>Motorola milestone phone is 3.7 inches</p><p>The Apple phone is 3.5 inch</p></td> </tr> <tr> <td valign="top"><p>Aspect Ratio (width/height Ratio)</p></td> <td valign="top"><p>Refers to the actual physical dimensions of the Width-to-height ratio, divided into long and nolong</p></td> <td valign="top"><p>Milestone is 16:9, belongs to long</p></td> </tr> <tr> <td valign="top"><p>Resolution (resolution)</p></td> <td valign="top"><p>The same as the computer resolution concept, refers to the phone screen vertical, horizontal direction of the number of pixels</p></td> <td valign="top"><p>Milestone is 854*480.</p></td> </tr> <tr> <td valign="top"><p>DPI (dot per Inch)</p></td> <td valign="top"><p>Pixels per inch, such as 120dpi,160dpi, assume that the screen physical size of the QVGA (320*240) resolution is (2 inches * 1.5 inches), dpi=160</p></td> <td valign="top"><p>Can reflect the sharpness of the screen, which is used to scale the UI</p></td> </tr> <tr> <td valign="top"><p>Density (density)</p></td> <td valign="top"><p>The pixel concentration in the screen, resolution/screen size can reflect the cell phone density,</p></td> <td valign="top"><p></p></td> </tr> <tr> <td valign="top"><p>Density-independent Pixel (dip)</p></td> <td valign="top"><p>Refers to the unit of logic density, the corresponding formula for dip and specific pixel values is dip/pixel=dpi value/160, which is px = DP * (DPI/160)</p></td> <td valign="top"><p></p></td> </tr> </tbody> </table><p><p></p></p><p><p>2. DPI value calculation</p></p><p><p>For example: calculate WVGA (800*480) resolution, 3.7-inch density dpi,1 shown</p></p><p><p></p></p><p><p></p></p><p><p>Figure 1</p></p><p><p>Diagonal pixel represents the pixel value (=) of the diagonal, dpi=933/3.7=252</p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p>3. Classification of mobile phone screen</p></p><p><p></p></p><p><p>3.1 According to the cell phone screen density (DPI) or screen size is divided into the following 3 classes, 2 shows</p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p>Figure 2</p></p><p><p></p></p><p><p>3.2 The corresponding relationship between screen classification and pixel density of mobile phones is shown in table 1:</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top"> <p>   </p> </td> <td valign="t OP "> <p> Low density (+), ldpi </p> </td> <td valign=" top "> <p> Medium density (), mdpi </p> </td> <td valign=" top "> <p> High density, hdpi </p> </td> </tr> <tr> <td valign=" top "> <p> Small screen </p> </td> <td valign=" top "> <p> QVGA (240x320) </p> </td> <td valign="top"> <p>   </p> </td> <td valign="top"> <p>   </p> </td> </tr> <tr> <td val ign="top"> <p> Normal screen </p> </td> <td valign="top"> <p> WQVGA400 (240x400) WQVGA432 (240x432) </p> </td> <td valign="P" "> <p> HVGA (320x480) </p> </td> <td valign=" top "> <p> WVGA800 (480x800) WVGA854 (480x854) </p> </td> </tr> <tr> <td val ign="top"> <p> Large screen </p> </td> <td valign="top"> <p>   </p> </td> <td valign="top"> <p> wvga800* (480x800) wvga854* (480x854) </p> </td> <td valign="top"> <p>   </p> </td> </tr> </tbody> </table><p><p>Table 1</p></p><p><p>3.3 Mobile phone size distribution (HTTP://DEVELOPER.ANDROID.COM/RESOURCES/DASHBOARD/SCREENS.HTML) 3, is mainly based on the resolution of 800*480 and 854*480 mobile phone users mostly</p></p><p><p></p></p><p><p></p></p><p><p>Figure 3</p></p><p><p>From the above screen size distribution, in fact, the phone just consider 3-4.5-inch density of 1 and 1.5 of mobile phones</p></p><p><p>4 UI Design</p></p><p><p>From a development perspective, the application will provide 3 sets of UI layout files based on the 3-class Android phone screen, but the corresponding interface icons also need to provide 3 sets, as shown in table 2</p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top"><p>Icon Type</p></td> <td colspan="3" valign="top" width="502"><p>Standard Asset Sizes (in Pixels), for generalized screen densities</p></td> </tr> <tr> <td valign="top"><p></p></td> <td valign="top"><p>Low Density screen (ldpi)</p></td> <td valign="top"><p>Medium Density screen (mdpi)</p></td> <td valign="top"><p>High Density screen (hdpi)</p></td> </tr> <tr> <td valign="top"><p>Launcher</p></td> <td valign="top"><p>X × px</p></td> <td valign="top"><p>x px</p></td> <td valign="top"><p>x px</p></td> </tr> <tr> <td valign="top"><p>Menu</p></td> <td valign="top"><p>X × px</p></td> <td valign="top"><p>x px</p></td> <td valign="top"><p>x px</p></td> </tr> <tr> <td valign="top"><p>Status Bar</p></td> <td valign="top"><p>x px</p></td> <td valign="top"><p>x + px</p></td> <td valign="top"><p>x px</p></td> </tr> <tr> <td valign="top"><p>Tab</p></td> <td valign="top"><p>x px</p></td> <td valign="top"><p>x + px</p></td> <td valign="top"><p>x px</p></td> </tr> <tr> <td valign="top"><p>Dialog</p></td> <td valign="top"><p>x px</p></td> <td valign="top"><p>x + px</p></td> <td valign="top"><p>x px</p></td> </tr> <tr> <td valign="top"><p>List View</p></td> <td valign="top"><p>x px</p></td> <td valign="top"><p>x + px</p></td> <td valign="top"><p>x px</p></td> </tr> </tbody> </table><p><p>Table 2</p></p><p><p>5 How do I adapt to the screen size?</p></p><p><p>1) Interface Layout Aspect</p></p><p><p>It is necessary to prepare 5 sets of layouts according to the size of the physical size, layout (put Some common layout xml files, such as the top and bottom layouts in the interface, will not change with the screen size, like the title bar of the WinDOS window), Layout-small ( Screen size less than 3 inches in layout), layout-normal (screen size less than 4.5 inches or so), layout-large (4 inches-7 inches), layout-xlarge (7-10 inches)</p></p><p><p>2) Picture Resources</p></p><p><p>5 sets of picture resources need to be prepared according to the DPI value, drawable,drawalbe-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi</p></p><p><p>Android has an automatic matching mechanism to select the corresponding layout and picture resources</p></p><p><p>Android Phone resolution Basics (dpi,dip Calculation)</p></p></span>