Could anyone help me with creating 9 patch image from a png image?

Question

I am creating a chat application.I want the to convert my png image for chat bubble into a 9patch image.I used this link.... http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

But the problem is that the chat bubble is always maintaining a minimum width even for small messages.For eg,if i type a text like "hello",it is displayed in a bubble of width much more than the message.How to create 9patch image properly ??

Here is my png image

Chromolithography

recreate small image of that, have little bit of transparent alpha around it, now create 9 patch. – Alp

This is what i used.But it has the problem i mentioned above – Chromolithography

9 patch tutorial adilsoomro.blogspot.com/2012/11/… – Gouge

You can also drag the image size in "interactive preview" for checking.. – Pilar

could u please edit the above image for me ??its not working properly for me :( – Chromolithography

ilikepixels.co.uk/drop/bubbler – Dreary

Answer 1

Your 9-patch image needs to be smaller than your smallest message. The system will expand 9-patch images, but will never shrink them in the 9-patch way. Also, make sure the name of your image file ends in ".9.png".

Here's an edited image that you can use in the Android Asset Tool to create your set of 9-patch images:

The following image shows how you should define your stretch regions in the 9-patch generator. You'll get a zip file with p-patch images in a few different densities. Put these into your drawables folders.

Parody

I edited my answer to make sure your image name was correct. To make your image smaller, just use any graphics program that handles PNGs (I use GIMP.) and shrink your starting image smaller. Then reprocess it via the Android Asset Studio. – Parody

could u please edit the above image for me ??its not working properly for me :( – Chromolithography

I've altered your source image and added it to my answer. If you process it through the 9-patch generator, you should get images that stretch appropriately. I'm not a graphics artist and don't guarantee that the images will look great. But you'll at least be able to see how it's done. – Parody

how to define the strech areas ?what is the idea behind it ? – Chromolithography

The stretch areas are places in your image that can be repeated in order to make the image wider or taller (i.e. stretched). So in your image above, if the one pixel wide vertical stripe was repeated sever times, your image would be widened without altering your rounded corners, speech-arrow, etc. And if the horizontal stripe was repeated, it could be made arbitrarily taller without ruining your rounded corners. Here's a short, well-done tutorial that describes what 9-patches are and how to define them: pencil.evolus.vn/wiki/devguide/Tutorial/Nine_Patches.html . – Parody

is there a recommended image size please,in case i;m creating a text messaging app. – Soubriquet

Answer 2

• There is a tool distributed along with the SDK called draw9patch. It should be already there in your SDK folder. Check <sdk-directory>/tools/draw9patch. This tool is easy to use and quite intuitive. Learn more about draw9patch here.

• On the other hand, you can use the Android Asset Studio cloud app here.

Wenz

Answer 3

Try the http://draw9patch.com/

Or you can use the sample app from here

http://warting.github.io/AndroidChatBubbles/

Ilke

could u please edit the above image for me ??its not working properly for me :( – Chromolithography

Answer 4

Actually it was a problem with the image i used for my app.The image i used was bigger in width.For 9patch images to work properly,the width should be minimum.I used another image of smaller width instead of this and bam !!! it worked perfectly :)

Chromolithography

That is not problem. If you are using large width image then it is also stretchable. You have to learn "how to create 9patch properly". – Thiamine