Android Phone UI Design resolution Basics

1. Terminology and concepts

Android Phone UI Design resolution Basics

Screen size (on-screen dimensions)

Refers to the actual physical size of the phone, such as 2.8-inch, 3.2-inch, 3.5-inch, 3.7-inch

Motorola Milestone mobile phone is 3.7 inches

Aspect Ratio (Wide-high ratio)

Refers to the actual physical dimensions of the wide-high ratio, divided into long and nolong

Milestone is 16:9 and belongs to long.

Resolution (resolution)

As with the computer resolution concept, refers to the mobile phone screen vertical and horizontal pixel number

Milestone is 854*480.

DPI (dot per inch)

Pixels per inch, such as 120dpi,160dpi, assume that QVGA (320*240) Resolution of the screen physical size is (2 inches * 1.5 inches), dpi=160

Can reflect the sharpness of the screen, which is used to scale the UI

Density (density)

Pixel concentration in the screen, Resolution/screen size can reflect cell phone density,

Density-independent Pixel (DIP)

Refers to the logical density unit of calculation, dip and specific pixel value of the corresponding formula is dip/pixel=dpi value/160, that is, PX = DP * (dpi/160)

2. DPI value calculation

For example: Compute WVGA (800*480) resolution, 3.7-inch density dpi, as shown in Figure 1

Figure 1

Diagonal pixel represents the pixel value of the diagonal line (=

), dpi=933/3.7=252

3. The classification of mobile phone screen

1 According to the mobile screen density (DPI) or screen size is divided into the following 3 categories, as shown in Figure 2

Figure 2

2 The Cell Phone screen classification and pixel density of the corresponding relationship as shown in table 1:

Low density (in), ldpi

Medium Density (160), MDPI

High Density (hdpi),

Small screen

QVGA (240x320)

Normal screen

WQVGA400 (240x400) WQVGA432 (240x432)

HVGA (320x480)

WVGA800 (480x800) WVGA854 (480x854)

Large screen

wvga800* (480x800) wvga854* (480x854)

Table 1

3 Mobile phone size distribution (http://developer.android.com/resources/dashboard/screens.html), as shown in Figure 3, is currently mainly based on the resolution of 800*480 and 854* 480 of mobile phone users are mostly

Figure 3

From the above screen size distribution, in fact, the mobile phone only consider 3-4 5 inches between the density of 1 and 1.5 of the cell phone

4. UI Design

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 icon also needs to provide 3 sets, as shown in table 2

Icon Type

Standard Asset sizes (in Pixels) for generalized screen densities

Low density screen (ldpi)

Medium density screen (MDPI)

High density screen (hdpi)

Launcher

(x) px

X (px)

X-px

Menu

(x) px

X (px)

X-px

Status Bar

x px

x px

X (px)

Tab

x px

x px

X (px)

Dialog

x px

x px

X (px)

List View

x px

x px

X (px)

Table 2

5. How to achieve the adaptive screen size?

1) Interface layout aspect

You need to prepare 5 sets of layouts based on the size of the physical size, layout (put some generic layout XML files, such as the top and bottom layouts in the interface, not with the size of the screen, similar to the title bar of the WinDOS window), Layout-small ( Screen size less than 3 inch layout), Layout-normal (screen size is less than 4.5 inches), layout-large (4 inches-7 inches), Layout-xlarge (7-10 inches)

2) Picture resource aspect

5 sets of picture resources need to be prepared according to the DPI value, drawable,drawalbe-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi

Android has an automatic matching mechanism to choose the corresponding layout and picture resources