Nine-patch versus Vector graphics

Question

I am learning about Android UI and am unclear why people use nine-patch, when you could use vector graphics, because those are scalable without any pixel degradation. I am a beginner in Android, so I hope I am not missing anything here, but it seems like it would be easier to build vector graphics and use those. You would not need the special editor to build them.

Can anyone explain the advantages to using nine-patch over vector? (Don't just explain advantages of nine-patch, as that is already done on StackO., but rather the advantages that vector does not have). Because it seems like Android recommends nine-patch. Thanks.

Benthamism

Vector graphics isn't supported natively by Android (only in WebView the support is native, not in REAL APPS). You must use 3rd party libraries to use SVG and the support isn't complete. – Transference

Thanks Der, that is good to know. Do you mean through WebView that since you can view web pages with this, that a vector graphic on a web page is okay? Although I guess this is not using vector with Android directly. Or is there a better interpretation for this? – Benthamism

Yes html pages can include svg graphics, and the WebView can display them. In REAL Android apps you have to use 3rd party libraries – Transference

We need something like PaintCode for Android :''''( – Springer

Answer 1

In vector graphics all side are scale or stretch when we set it to any background whereas in 9-patch we can define which sides can scale or strech so at runtime only those side scale which we set it to scale in 9-patch tool.

from this -> The advantage of using 9-patch images is that when using it as a background, for instance, the image won't stretch and loose proportions in different screen sizes. the center 'patch' will remain as is and the 'borders' patches will be stretched to fit the screen/view size.

let say you have this image.

and a button with fill parent width. if you set this image to button background it will scale completely and your image gets blur (mean t will expand to button width)and it will not look good. so what 9 - path tool do that you define that online scale some part of image let say if width is fill parent. dont scale whole image . let say we set that after t (in image). scale whole area, so t will not get blur. so this will make good your button.hope you got my point..:)

after making your image 9 patch and setting to button background. your button look like this.

instead of t(in image). whole area expand and fill the buttons width.

Doble

Okay, thanks. But is there a need to be able to control which sides we scale? I am trying to imagine. So maybe like if we have a complex graphic, with multiple colors, then you think it would scale better in 9-patch? I guess having control sounds better, in case you only want either vertical or horizontal scaling for instance. I guess I've just never seen an example so it's hard to understand why it's better than vector graphics. But that makes sense - for uneven scaling you can control. – Benthamism

Thanks wq... ! That link is very nice too, lots of examples. But if the image is vector, it would not blur, right? Only if it is bitmap? Or I could be wrong.... – Benthamism

it will not blur but it will stretch so your button background not looks good. – Doble

i am editing my answer.see the image that im adding now. this will show you what 9-patch do...:) – Doble

Oh nice, yes it does scale in a very specific way, in this case, horizontally. That does seem to be a very powerful and useful technique. – Benthamism

Answer 2

Imagine a button with rounded corners. How do you scale it? If you scale it only horizontally, you will have elliptic corners, which would be ugly.

This is what 9-patch is for.

Seppala

Thanks 18... ! That does help a little to understand that some warping could happen with regular images. – Benthamism

Answer 3

You can define content are on a 9-patch image which means (for example) text will always be placed in that specific area, I think you cannot do this in Vector image. Android has built-in support for 9-path but for vectors you have to use a library.

Folie

Thanks pokerface! That is a good point too, that Android is more supportive of 9-patch. I didn't realize we needed external libraries for using vector, I assumed you could just drop a vector file into your drawable folder. – Benthamism

Answer 4

9-patch rendering is easy to implement and efficient. If you have an image that can be scaled by stretching horizontal or vertical lines (e.g. buttons or rectangular icons), then use a 9-patch. If you have some icons that don't scale well, then create multiple versions at different resolutions and use Android's resource management to handle it. Both of these approaches are much easier and more efficient than vector graphics.

If you have large images or scenes to render, and you don't want to take up a ton of space with bitmaps, thats when you start thinking about vector graphics.

Neurosurgery

Thanks Dane, that is very interesting. But what is the reason that vector files would be harder to deal with? Although I am understanding that 9-patch has many more advantages, but say you did not mind if an image or icon scaled evenly, why would it be hard to just drop a vector file into your drawable folder, does Android accept the vector file formats? – Benthamism

Android supports a ShapeDrawable XML resource in your drawables folder developer.android.com/guide/topics/resources/…. This is fine for simple shapes, but not for something more complicated. If you're wanting to use something like SVG, then you could start with this github.com/pents90/svg-android. – Neurosurgery

Answer 5

i hate 9patches. i am quite attentive when doing my artwork. i don't even use photoshop. i go with illustrator. i do everything right when exporting my artwork, i used to do my 9 patches with insane zoom on, maybe check afther that in photoshop for misplaced pixels... ** sad trumpet ** when put on a view, if i used some subtle round corners like 6px or 10px and a stroke everything looks awful at mdpi.

So I solved my problems by marrying the two. I wrote my own 9patch which uses vectors. :)

Everything looks like it's been touched by baby Jesus. Perfect corners, strokes and, best of all, you can use one asset for all the screen sizes, densities while, of course, no more transparent borders, wicked errors because 9patch won't stretch inward, so on and so forth.

I use vectors for icons too. While there sometimes are issues with various effects, these are minimal and easily avoided if you do some reading on how to avoid them.

Best of luck to all you guys!

This is a very basic example.

You can do whatever strikes your fancy. Because of the performance impact of svg's on an app, when first run [or when the user changes appearance options, i like to save the newly generated bitmaps as pngs, if possible.

You don't get any more "best of both worlds" than this.

Lollipop

Interesting perspective! – Benthamism

Mmm there is any url where we can get your library? Or is it closed source and we have to create our own? – Pretended

Hey... Where can I find one of this married couple for my own? – Bedaub