basic draw 9patch tutorial

7/29/2019 Basic Draw 9patch Tutorial

1/17

Brought to you by EB70 and the

Simply Galaxy Team


2/17

Drag Image to Draw9Patch Tool

With your sdk tools folder open next to your folder

containing your images drag the image on top

of the draw9patch tool.


3/17

9patch Areas Explained

There are four 1 pixel areas on the outside of our image. The top and left control how the

image is stretched. The right and bottom control how much of the area can be filled and

where. (Note: if you have an image that should be 9.png but isnt because it lacks the 1

pixel area you can open that image with Adobe Fireworks, or any image editing software,

and modify the size by adding 2 pixels to vertical and horizontal whichs equals 1 pixel onall sides.)


4/17

The Settings

There are really only 2 settings to concern ourselves with, show patches (green and pink below),

and show content (purple below) The top slider will zoom in and out on your image and the

bottom will zoom in and out on the content images (3 of them.)


5/17

What to Do

Starting with the image from before youll notice I removed almost all of the patches from the

bottom of our image. On the right you see that the purple area is smaller. This is your contentarea where buttons and boxes will be placed. The previous image allowed content to be

placed anywhere in the image. Our changed image only allows content to be placed in the

very center of our image. (To add and remove patches point your cursor at the edge of the

image until a small box shows. Click to add a patch and hold shift and click to remove a patch.)

Also notice that the stretchable area is only set at the center. This being a square image it

allows the whole image to be stretched. More info coming up.


6/17

Non-Square Images

Our image here has rounded corners which we want to stay round. To do this we patch the top

and left almost to the edge of our image which keeps our corners round.


7/17

Odd ShapesHere we have a typical slider. Notice that there are 2 patches on

the left side, this allows the image to be stretched up and down

yet keep its round edge. The top patch is NOT centered on the

image but rather centered on the square part, this allows the

image to be stretched left to right on the straight edge part and

our round edge stays with no stretching.

In addition, our content area is more center on the square part

of the image. In this case the content is text. Grab your phone

and set the lock screen to Android and lock your phone. Now go

to unlock it by sliding but not all the way. Notice the text there is

centered on the square area and not overlapping the rounded

area.


8/17

Images Within Images

In this image we have an image within an image. In this case we only want certain areas to

stretch, the top and bottom and left and right side. We want our + sign to remain where it is.

Placing a patch centered left and right and top and bottom will achieve this. The next slide

shows what happens when you just place your stretch patches centered.


9/17

Wrong

Notice how the images on the right show how the image will look stretched. Not the effect wewant. The next slide will demonstrate how not adding enough patches will effect the placement

of the image inside.


10/17

Wrong Again

In this example I have placed one patch at top/right and left/top. The images on the right show

that my image inside is now placed off center, again not the effect you may want. The next slide

will show another example of the correct way to do multiple stretch patches.


11/17

Now Youre Getting It

Notice again how Ive placed the patches on top and left at the center of the area that doesnt

contain anything, the area that I want to stretch. In this example I could very well have placed

my left patch at the center but the result would have been a separation of the sets of lines.


12/17

Stretch and Content

In this image Ive allowed the whole thing to be stretched left to right but only above the

triangle gets stretched. My content area is completely top to bottom but only left of the

triangle.


13/17

More on Content

Content placement is very important. Having our content too close to the edge will result in

buttons and boxes being cut off. Our three images on the right show that our content area

(purple) is nicely placed within the grey area of the image meaning buttons and boxes and textwill only be placed within that region.


14/17

Even More on Content

In this example my content area fills the whole of the black section. The images on the right

show the black area completely covered with purple. Buttons placed say at the bottom of this

image will probably be cut off as they will be too close to the bottom. Likewise if they are placed

left or right they will also be cut off being too close to those edges.


15/17

Correct Left to Right

Here we see a better left to right content placement. Notice the images on the right. The purple

does not cover the whole of the black area. Any buttons or boxes placed left to right will be

moved in towards the center more away from the edges.


16/17

A Trick Ive Learned

Modifying .9.png images with image editing software will most likely break the 9patch if not

done properly. In this example of the proper way of doing it I have my image open in Adobe

Fireworks and I have selected the area that contains the image ONLY. I can now modify this

image by changing its color or I can cut this image out and place a new image in. My 9patches

will remain intact and draw9patch will NOT be needed.


17/17

Parting Words

This has been a very basic tutorial. Practice along with trial and error are needed before youmay see perfect results. You can always grab source images to compare the patched areas

against what you are trying to achieve. In addition modifying source images the way that I

explained in the last slide will keep you from having to fix a 9patched image.

I hope this has been helpful, happy moddingExplodingboy70 (Simply Galaxy Team)

basic draw 9patch tutorial

Documents