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.
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.
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.
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.
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.
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.
I have been spending quite some time on looking for an answer for this, but weird enough it does not seem to exist. So I guess the answer is simple, or no-one needs nine patch for these shapes.
How does one handle draw 9-patching this? Is the only way to supply different sizes and use the different drawable folders and let it scale?
Or is there a way to add a patch on it?
I want to be able to stretch it vertical, but keeping the tip nice...if I would add a patch in the middle at the left side, I expect the tip will get blunt...
U can set any image with 9 patch just set layout bounds on their edges which is to be expand
OK, I've read a lot of tutorials and even downloaded some examples, but for the love of Stackoverflow, I can't get my image to stretch like I want it to and I'm hoping that someone can help me out here.
I create an image that is to be the background of a button object in Android. Here is the image:
Now, I'd like for it to stretch to the desire size of the button, whether the button is 50x50dp or 200x100dp. One thing I don't want is the border to stretch as it will look distorted, so I want to specify not to include the border, but stretch everything else to the desired size of the button.
Can someone please show me where the black lines need to go in order to achieve my goal? Do I have to change my original image in order to achieve my goal?
Thank you in advanced.
David
It's very simple using this tool Android Asset Studio: Simple 9-Path Generator. Although no matter how you do it you will have stretching and distortion due to the textured (non-patterned) background. I would stay away from that style both personally and for usability.
I am trying to create a drawable such as this in Android:
I don't think a nine patch will work because there is nowhere that can safety scale vertically. So next I tried a shape drawable but it does not support triangles.
I want to render this image on the fly so there are no artifacts. Also I want to be able to use it in a selector, so I need to be able to represent this image in xml. Maybe I need to extend some class to manually make the shape. If so how do I embed a tag in the xml to tell it where to render? Does anyone know where to start with this or have an example of something similar?
I have read the first 10 pages of hits on stack overflow and google and am not getting anywhere. Thanks very much for any help.
I think a 9-patch would work. For the vertical stretching on the left boundary, fill in the line from top to bottom.
Id like to have a button shaped like a cloud. A 9 patch might be unusable since every time I create large borders around my cloud image, I get warnings about "bad patches" in the 9 patch tool. Using 1px borders gives weird results too 1. When replacing my resource with the btn_default from api 4 I get expected results, ruling out xml issues.
Without using 9 patches, wrap_content seems to work no more, growing the image to 100% width regardless of content. The 9 patch used is shown below.
I wouldn't mind some distortion, as long as content does not overflow. What would be the best solution?
I am not allowed to post images yet, apparently. Please see
zip containing screenshots and 9patch
Nice question.
I think there is no way to use those images and you might need to change them, but I will leave you some tips or things I would try:
To avoid overflow you will need to define the fill area. You can try just adding a fill area but not a scale area. If this works, you will have the cloud image with the text inside it.
Remember that 9patches scale up and not down.
Here is a link with a very good explanation of how everything works.
If nothing worked so far I would ask the designer to create a new image resource with a stretchable area. For instance, having cloud shape just in the corners.