Android screen adaptation

Concepts required for image display:

Pixel: the display of an image is composed of many small squares with different colors. Such a small square is called a pixel, which is the smallest unit of the image. but what is the specific size of this pixel? This depends on the size of the fluorescent point of a pixel on the physical device that displays the image. an image file only records the number of pixels and the color of each pixel. The size of its physical size is unknown to itself, for example, A 480*800 pixel image displayed on a computer display is much larger than that displayed on a mobile phone screen, and the image itself has not changed. the cell phone screen is much more refined than the computer display screen, that is, each physical pixel is much smaller, and the density is much larger.

Resolution: divided into "image resolution" and "physical display resolution ". They are the product of horizontal pixel points and vertical pixel points, that is, the total number of pixels. Image resolution refers to the number of records in an image file. The physical display resolution refers to the product of the number of rows displayed horizontally and vertically on the physical display. some people say that the higher the Resolution, the clearer the displayed image. This is for the same physical size, because the same resolution may have different sizes, in this way, the resolution is incomparable to the definition.

Density: the number of records in the unit size on the physical device. Of course, the larger the density, the clearer the image display.

 

Length unit of the Android system:

Px: pixel. A physical pixel on the terminal. For example, a screen of 480*800 has 320 pixels horizontally and 480 pixels vertically.

Dip (DP): It is an abstract unit based on screen density and is called "device independent pixel ", the screen density is automatically adjusted.

SP: proportional pixel. It mainly deals with the font size and can be scaled based on the user's font size preferences.

In: inch, standard length unit

MM: Mm, standard length unit

PT: LB, standard length unit, 1/72 inch

 

Android screen adaptation:

Why is it necessary to adapt: the physical size of the android terminal and a large number of resolution categories, you may have designed a set of UI for a terminal to meet the requirements, however, the display on another type of physical terminal is not what you want.

Solution: in this case, Android provides a set of standards that divide the screen into three categories. Therefore, when you create an android project, the project automatically creates three for you to store different resolutions, ui folders at different density, such:

The UIS in the three folders correspond to screens with different resolutions and density. The relationship is as follows:

	Screen type	Resolution	Density	Dimensions
Drawable-hdpi	WVGA	480*800	240	Large
Drawable-ldpi	Qvga	240*320	120	Small
Drawable-mdpi	Hvga	320*480	160	Medium

These three folders only tell android which Screen Resolution and density the UI is designed, when an app is opened, Android platform automatically matches images with similar UI resolution and density as provided in the folder Based on the terminal type.

Assume that the terminal screen is of the WVGA type, that is, the density is 240.ProgramWhen it is enabled, the drawable-hdpi folder is extracted, and a physical pixel is used to display an image pixel, because you put the image under the drawable-hdpi folder, that is, to tell android that the UI you designed is for 480*800 with a density of 240, it will not zoom in or out the image, A physical pixel is used to display an image pixel.

 

If the image density is the same as the screen density, no scaling is performed.

If the image density is different from the screen density, the image is scaled.

 

Lab 1:

For the 480*800 screen, I designed an image (the resolution is 480*100), which is displayed on different physical resolution terminals to see if Android displays abnormally. The image is as follows:

 

Layout file:

 
<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: gravity = "center"> <imageview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/density480800"/> </linearlayout>
 

 

Suppose the image is 480 pixels in width and 100 pixels in height. I put it in the drawable-hdpi folder, it is to tell android that my design intent is for Android terminals of 480*800, so it will display an image pixel with a physical pixel on the terminal of 480*800, if it is placed on a terminal with a resolution of 240*320 for display, if Android does not process the display, it will still display an image pixel in a physical pixel, the terminal cannot display this image because the number of pixels exceeds the number of physical pixels.

 

Note: I have designed only one image and placed it in the drawable-hdpi folder. The corresponding image is not placed in other folders, this image can only be matched when Android matches.

 

Result:

WVGA screen: Compare the source image. It is displayed in the same size.

 

Hvga screen: Compares the source image to show down the image.

 

Qvga screen: Compares the source image to show it, and reduces the image size.

 

 

Lab 2:

For the 240*320 screen, I designed an image (resolution: 240*100), which is displayed on different physical resolution terminals to see if Android displays abnormally. The image is as follows:

 

Layout file:

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: gravity = "center"> <imageview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/density240320"/> </linearlayout>
 

This figure is specially designed for the screen of 240*320. The design intent is that the image is full of screen width, so it is enough to set it to wrap_content without considering other screens.

 

Suppose the image is 240 pixels in width and 100 pixels in height. I put it in the drawable-ldpi folder, this is to tell android that my design intent is for Android terminals with a density of 240*320 and a density of 120, so it will display an image pixel with a physical pixel on the terminal of 240*320, if it is placed on a terminal with a resolution of 480*800 for display, if Android does not process the display, it will still display an image pixel in a physical pixel, the image will definitely deviate from the design intent (the image was designed to be full of a terminal screen), because the number of pixels in the image is smaller than the number of physical pixels.

 

 

Qvga screen: Compare the source image, just fill the screen width

 

Hvga screen: Compared to the source image, although it is set to wrap_content, Android still zooms on it.

 

WVGA: Same as above

 

Summary:

1: As long as a UI is designed for a screen, android can always adapt to the screen by enlarging or downgrading the screen to ensure the design intent. The premise is that the layout unit is dip.

2: Although Android is always smart enough to ensure your design intent, it is best to design several more UIS in actual work, because in Experiment 2, the enlarged image is obviously blurred.

3: If you only want to design a set of UIS for the design workload, it is best to design a large-resolution terminal. This way, the image downsize is better than the image magnification.

 

Lab 3:

The above images are obtained from the drawable folder, so Android knows the density of the images to be processed (zoomed in or out ), if the image is obtained from the data/data directory or SD card, Android treats the image as the reference density of 160 by default, and puts the image of Experiment 2 into data/upload? The result is as follows:

 

CodeAs follows:

 
Public class test4activity extends activity {private imageview IV; @ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); IV = (imageview) findviewbyid (R. id. image); IV. setimagedrawable (New bitmapdrawable (bitmapfactory. decodefile ("Data/data/cn.com/density-240-320.png ")));}
 

 

Hvga screen:

 

Result: The picture is not filled with screen width as expected, because Android treats the image density as the 160 baseline density, and the terminal screen density is exactly 160, images with the same density are not scaled, so the secondary node displays an image pixel with a physical pixel. Therefore, images of 240 pixels in width cannot be filled with screens of 320 pixels in width.

 

Processing: If you want to obtain images from a non-drawable directory and android can help us intelligently scale the images, you need to tell Android how high the image density is to be processed. The details are as follows:

 

Public class test4activity extends activity {private imageview IV; @ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); IV = (imageview) findviewbyid (R. id. image); bitmapfactory. options = new bitmapfactory. options (); // set the factory to read the options of the image file at a density of 120. indensity = 120; bitmapdrawable image = new bitmapdrawable (bitmapfactory. decodefile ("Data/data/cn.com/density-240-320.png", options); // you can specify the terminal density to display the image. settargetdensity (getapplicationcontext (). getresources (). getdisplaymetrics (); IV. setimagedrawable (image );}
 

 

Final effect:

Hvga screen:

 

End: In Android, it is best to use the logical pixel dip unrelated to physical pixels, so that android can help us automatically adapt to different screens and maintain the design intent.

In Android, the image size conversion is based on the density, and has nothing to do with the screen resolution and size.