Considerations for splitting Android Images

Considerations for splitting Android Images

Considerations for splitting Android Images

1. Two sets of resolutions are required for the cut graph: 480*800,720*1280. In different folders, the same image must have the same name in the two folders.

2. In case of Stretched and flat images, you can use 9patchto to prepare them and use xxx.9.png images. Advantages: high flexibility, reusable, reduced package size, and increased program running efficiency. (For example, the background of the Button)

3. Recommended order of plotting: Plot every page as a unit to facilitate program development.

(There are duplicate pages, repeated images, no longer cut ?) Repeated

4. button: For Button buttons, you need to give the following status picture: Focus state (usually selected by trackball) (naming rule: btn_xxx_focused.9.png), UnFocus general state (naming rule: btn_xxx_normal.9.png ), click status (Click status) (naming rule: btn_xxx_pressed.9.png ). Generally, the Focus image is the same as the Click image. 5. List: For the ListItem list, you need to give the background image of the following State: Focus state (usually selected by trackball), UnFocus state, Click state (Click State ).

6. Menu: the icon image is required for the pop-up Menu of all Menu keys.

(Also three sizes ?) Either

7. When cropping a graph, consider the top notification bar, 480*800 for the top notification bar, and 720*1280 for 50px.

8. annotation: the width, height, margins (left, right, top, bottom), and text color values of all elements must be given.

Example of AndroidApp cropping:

When designing the android version, there are many types of dimensions. In this case, we need to use a dimension as the benchmark, which is 480px * 800px. After the design is complete, we start to cut the image, I will explain it with an example of my previous design:

When we see the above design drawing, we will first analyze which charts should be cut for the technology (to avoid minor changes in the future, we recommend that you first communicate with the technology before the cut );

1. icon and background of the bottom column:

There are two common cut methods: (default and selected results)

2. Background cut of the top column:

Because the gradient style is in the top navigation bar, you only need to cut the image into a small one, and the technology can be tiled and stretched-(PS: if it is a pattern background, you must cut the whole, because a small part of the pattern will be stretched --)

3. Text Size and line spacing: (in this example, I have marked the text, please refer)

Download