Home java How to use Nine-patch correctly?

How to use Nine-patch correctly?

Author

Date

Category

Can you explain what this format is for? As I understand it, it was made to optimize png images when scaling …

Then 2 questions,

  • why all images are not used by default at once in this format
    if it’s so convenient?
  • Why not use the svg format in this case?

I just read about this format today and am trying to figure out where I can use it in my project and I can’t think of it … I already have all the pictures look fine, and if necessary, I use the scalable svg .

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

Help me figure it out))


Answer 1, authority 100%

Nine-patch (9-patch) is a special format that allows you to specify areas to stretch (left and top) and place content on an image (right and bottom). This format is not used for optimization, on the contrary, it requires more calculations and it makes no sense to use it unnecessarily (not for direct use).

This format is used mainly for graphically complex backgrounds for widgets, when the final size of the widget can change, or its relative sizes (proportions) can change. For example, buttons.

Suppose we need to set a button to look like this:

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

Naturally, this is no good, and here 9-patch comes to the rescue – we set this background to stretch areas that do not contain an image that can be distorted when stretched, here these are the contour lines (green area in the screenshot) and the content area, so that the text in the button did not overlap and did not align with the contours of the image – in the screenshot there is a purple area (the text will be placed only within this area):

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 allocated to it, running over the ornament:

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 obsolete and, if necessary, is also 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 in 9-patch – file abc_spinner_mtrl_am_alpha.9.png or tab indicator – file abc_tab_indicator_mtrl_alpha.9.png – make such outwardly simple backgrounds in Shape more complicated 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 by stretching areas. This allows you to slightly reduce the size of the resulting APK.

It is worth noting that modern design requirements are going towards simplifying the appearance of the widgets – simple forms, primitive contours and currently the same problem is usually solved using graphic primitives (class Shape or equivalent in XML markup) – they are well scalable, including a distortion of proportions, is easier for the processor and preference 9-patch format is to be given only when using Shape to draw the desired view is impossible, or difficult.

PS: Pictures took pictures in this article , there the topic is disclosed somewhat fully.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions