Can you explain why this format is needed? I understand that it was made to optimize png images when scaling ...

Then 2 questions

  • Why are all pictures not used by default immediately in this format if it is so convenient?
  • Why not use the svg format in this case?

It's just that today I read about this format and try to understand where I can use it in my project and I can’t think it out ... Even if I have all the pictures, they look normal, and if necessary, I can use svg scale.

I thought maybe this is an outdated format? Since those articles that found everything from 2011-2013 ... Maybe it is not already used?

Help me to understand))

    1 answer 1

    Nine-patch (9-patch) is a special format that allows you to specify areas of stretching (left and top edge) and content placement on the image (right and bottom edge). This format is not used for optimization, on the contrary, with its application it is required to carry out more calculations and there is no point in using it without the need (not for direct application).

    scrn1

    This format is used mainly for graphically complex backgrounds of widgets, when the total size of the widget may vary, or its relative dimensions (proportions) may vary. For example, buttons.

    Suppose we need to ask the button to look like this:

    scrn2

    This is easier to draw in a raster than in a vector format or with the help of primitives, but there is a problem that when changing relative sizes, (for example, the length is 5 times greater than the width), which is natural for a button, because it can be small or on the entire width of the screen and at the same time narrow, the image will be distorted and such horror will turn out:

    scrn3

    Naturally, this is no good, and here 9-patch comes to the rescue - we give this background stretch areas that don't have an image that can be distorted when stretched, here are the contour lines (in the screenshot is the green area) and the content area so that the text in the button did not overlap and was not combined with the contours of the image - in the screenshot is a purple area (the text will be placed only within this area):

    scrn4

    Now our button will always have geometrically correct proportions, regardless of the proportions and sizes of the widget, and the text inside it will never go beyond the zone assigned to it, hitting the ornament:

    scrn5

    To do this by any other means is either impossible or very difficult, including the SVG format, which scales only proportionally.

    This format is not outdated and, if necessary, is used, for example, in the modern Google library - AppCompat. So, the background of the Spinner widget (white triangle pointing down to the right) is made at 9-patch - the file abc_spinner_mtrl_am_alpha.9.png or the tab indicator - the file abc_tab_indicator_mtrl_alpha.9.png - to make such, seemingly simple backgrounds in Shape would be more difficult and using 9- patch is justified. It is also necessary to pay attention to their size - the files are very small (literally a few pixels) and contain only the necessary image, everything else is added with stretch areas. This allows you to slightly reduce the volume of the resulting APK.

    It is worth noting that modern design requirements go in the direction of simplifying the appearance of widgets - simple forms, primitive contours and now the same problem is usually solved with the help of graphic primitives (of the Shape class or equivalent in the xml markup) - they are well scaled, including the distortion of proportions is easier for the processor and the preference for the 9-patch format should be given only in the case when using Shape it is impossible to draw the desired look, or it is difficult.

    PS: I took the pictures in this article , the same topic is revealed in a slightly more complete way.