Develop Reference

Create simple 9 patch image that keeps logo in centre

I am trying to create a simple 9-patch image that keeps the image in the centre.
The logo I am using is similar to this:
The stretchable regions would of course be the sides and the top. The static region would the be the logo itself.
The tool I am using is the following:
https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example
Unfortunately, no matter how much I try I just can't seem to get this right.
I can easily make the logo stay on the top right, but not in the centre.
How do I get it so the logo stays in the centre?
Can someone show me how to achieve my desired behaviour. A screenshot will be ideal!

It turns out it was not possible using that tool as you can only place 2 stretchable regions.
Instead I used the tool provided by the android sdk located at:
path-to-android-sdk/tools/lib/draw9patch.jar
The above tool allows you to state multiple stretchable regions.
You need 4 to achieve the centre behabiour.
One on either side of the top edge and one on either side of the left edge.

9-patch app doesn't work properly?

I'm trying to create a 9-patch image that only stretches horizontally, and as you can see in the attached image, I drew only in the center top.
The second image in the preview (the middle one) shows what I think it's wrong. I just want to stretch the middle, so it makes no sense to me why it isn't displaying the right part of the image - the frill. The left part is OK, thought.
Any help is appreciated!
Edit: Added another image to show it with "show patches" and "show content" enabled:

The layout defines how much and in what direction an image gets stretched. A 9-patch can only define what parts of an image should be stretched and which parts not. You can basically exclude parts of the image from stretching. In your example the left and the right parts won't be horizontally stretched. They will, however, still be stretched vertically. Since you have selected nothing on the vertical side, the image gets stretched equally.

How does it look in-app? It may just be that the draw9patch tool is not previewing it correctly. Try stretching the window as wide as possible. Also checking the "show content" and "show patches" checkboxes might help to show you what the tool thinks is going on.
Also, be sure that the tray containing the stretch pixels is completely transparent, is exactly 1 pixel wide, and goes around the entire bitmap.

Android: how to use the 9patch creator?

I am trying to create a stretchable scroll handle for my app.
The first image is the scrollhandle.9.png that I include in my app's resources.
The second image shows what this 9patch image looks like when used in my app.
Any advice on how to accomplish a stretchable scroll handle?
Edit: With help from posters, I was able to get an image that works. I added it below to help those who may find this in the future.

The area covered by the top and the left black line(dots) will be used while scaling your image. This area will be highlighted to you when you click the "show patch" option. You can see how the image scales by using the "Patch scale" option given in the draw9patch tool.
The area covered by the right and bottom lines(dots) will hold the content for the background.
Eg: You can define boundaries for the text inside 9 patch image for editor background. For your case you don't need right and bottom lines.
So for your case place two dots at the top corner and two dots at the left corner. Make sure patches doesn't fall in the arrow image of the scroll(if they do fall your arrow image will also get stretched) . Try putting the dots only in the left and top lines till you get the desired preview with "Patch scale" option.

If you use only one dot (instead of four) at the top and bottom left, and one at image top center, it should stretch the way you want it to.

Ninepatch inconsistent for arrow button

The problem with rendered images is that the left side triangle isn't smooth enough. There is a bit of jagged edge on the slopes. This was found in the draw9patch tool's preview too, but couldn't tackle it so far.
Any hint regarding solution will appreciated.

This happens because you specify too wide area for the height shrink/stretch. Put just one black pixel in the leftmost pixel column (it's tricky where to put it, actually. I'd put one pixel in the very top of your image and one more - in the very bottom).

Transparent 9patch image: line showing through

I got a transparant 9patch image which has the 9patch lines showing trough.
This is the output:
Obviously I don't want the horizontal lines to be visible.
This is how I created the 9patch:
This is the final image that is used in the application:
AFAIK the 9patch is correct. What do I need to change in order for the horizontal lines to disappear?

The unwanted lines come from the fixed (non-stretched) parts of the ninepatch overlapping. This is happening because you are drawing it at a pixel height that is smaller than the sum of the heights of the fixed sections.
As #kcoppock said above and then curiously retracted, the left hand edge should be solid black where it is vertically stretchable.

Try connecting the two dots on the left edge, making it a solid line, see if that fixes the problem. You also only need 1 dot along the top for the exact same result.
EDIT: Ignore the above, I don't know what I was thinking. Connecting the line on the left is definitely not allowed, that's my mistake.
EDIT: Ignore the above edit -- Reuben's right. :)
I don't know that it's what's causing the problem, but I noticed that along the top edge, there are some pixels that are not fully transparent (e.g. pixels(5,0) through (28,0) are a very light shade of gray) likely due to some bleeding over of the anti-aliasing of the shape. Try flattening the image, and erasing all the outermost pixels, other than the black pixels, of course. That should only cause a compiler error, though, it shouldn't cause that sort of an artifact. I wish I could test it myself right now but I can't.