Draw9patch Draw9patch For Mac
This post was edited by Roussinov at 12:25, Jun-29-2014 So, many of us has encountered a problem with the.9png files during theming. Here i collect some guides and info from net.
Draw 9-patch The Draw 9-patch tool allows you to easily create a graphic using a WYSIWYG editor. For an introduction to Nine-patch graphics and how they work, please read the section about Nine-patch in the document. Here's a quick guide to create a Nine-patch graphic using the Draw 9-patch tool.You'll need the PNG image with which you'd like to create a NinePatch.
From a terminal, launch the draw9patch application from your SDK /tools directory. Drag your PNG image into the Draw 9-patch window (or File Open 9-patch. To locate the file). Your workspace will now open. The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area.
The right pane is the preview area, where you can preview your graphic when stretched. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area.
Right-click (or hold Shift and click, on Mac) to erase previously drawn lines. When done, select File Save 9-patch. Your image will be saved with the.9.png file name.
Note: A normal PNG file (.png) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved 9-patch file (.9.png) will be loaded as-is, with no drawing area added, because it already exists. Optional controls include:. Zoom: Adjust the zoom level of the graphic in the drawing area.
Patch scale: Adjust the scale of the images in the preview area. Show lock: Visualize the non-drawable area of the graphic on mouse-over. Show patches: Preview the stretchable patches in the drawing area (pink is a stretchable patch). Show content: Highlight the content area in the preview images (purple is the area in which content is allowed). Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.
Source:. Source:. Android How to use 9 patch png? Hi, 2nd blog post after almost 1.5 year:) Today I'm going to discuss about 9 patch image and how to use 9 patch png in android apps. What is 9 patch?
9 patch is technique used to scale the image in such a way that the 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis. So the graphical representation of this scenario will be something like this.
Simple Icon file The image at left side when divided into 9 patch will look like the image at the right side. Now the interesting part, the four corners of the image will be remain unscaled and the edges will be scaled in single axis, which may be X or Y. And the center of the 9 patch image will be scaled in both axis. Now we include an image which will represent the parts of image unscaled, scaled into Y axis and scaled into Y and scaled into both direction with color differentiation. Barcode for mac. Consider the preview portion, first preview (circled with blue line) is scaled in Y axis and second (circled with blue line) is scaled into X axis and third one is scaled into both axis. You can see the way these images are now scaled is not looking good, and will cause weired results, Lets make it 9 patch. Draw9patch automatically add 1 px to every side of the image, so that we can draw patch.
Draw9patch Draw9patch For Mac
3 things to keep in mind while drawing patches. Top and Left side drawings determine the patches (Area from where to scale).
Bottom and Right side drawings determine the contents area. (padding or the area which will be occupied by contents). You draw path with left click (hold) and drag, and remove path with holding shift and click and drag or right click and drag. Drawing Patches: Here is the screenshot of patch drawings.
By default content preview is also not shown, you have to check the 'Show Content' check box. Adjust the padding of content inside the image according to your desire. Now save it in your drawable folder and use it in your android project. While I was working on, I found 9-patch (aka 9.png) to be confusing and poorly documented.
After a little while, I finally picked up on how it works and decided to throw together something to help others figure it out. Basically, 9-patch uses png transparency to do an advanced form of.
The guides are straight, 1-pixel black lines drawn on the edge of your image that define the scaling and fill of your image. By naming your image file name.9.png, Android will recognize the 9.png format and use the black guides to scale and fill your bitmaps. Here’s a basic guide map. As you can see, you have guides on each side of your image. The TOP and LEFT guides are for scaling your image (i.e. 9-slice), while the RIGHT and BOTTOM guides define the fill area.The black guide lines are cut-off/removed from your image – they won’t show in the app.
Guides must only be one pixel wide, so if you want a 48×48 button, your png will actually be 50×50. Anything thicker than one pixel will remain part of your image. (My examples have 4-pixel wide guides for better visibility. They should really be only 1-pixel). Your guides must be solid black (#000000).
Even a slight difference in color (#000001) or alpha will cause it to fail and stretch normally. This failure won’t be obvious either., it fails silently! Now you know. Also you should keep in mind that remaining area of the one-pixel outline must be completely transparent. This includes the four corners of the image – those should always be clear.
This can be a bigger problem than you realize. For example, if you scale an image in Photoshop it will add anti-aliased pixels which may include almost-invisible pixels which will also cause it to fail. If you must scale in Photoshop, use the Nearest Neighbor setting in the Resample Image pulldown menu (at the bottom of the Image Size pop-up menu) to keep sharp edges on your guides.(updated 1/2012) This is actually a “fix” in the latest dev kit. Previously it would manifest itself as all of your other images and resources suddenly breaking, not the actually broken 9-patch image. The TOP and LEFT guides are used to define the scalable portion of your image – LEFT for scaling height, TOP for scaling width. Using a button image as an example, this means the button can stretch horizontally and vertically within the black portion and everything else, such as the corners, will remain the same size. The allows you to have buttons that can scale to any size and maintain a uniform look.
It’s important to note that 9-patch images don’t scale down – they only scale up. So it’s best to start as small as possible. Also, you can leave out portions in the middle of the scale line. So for example, if you have a button with a sharp glossy edge across the middle, you can leave out a few pixels in the middle of the LEFT guide. The center horizontal axis of your image won’t scale, just the parts above and below it, so your sharp gloss won’t get anti-aliased or fuzzy.
Fill area guides are optional and provide a way define the area for stuff like your text label. Fill determines how much room there is within your image to place text, or an icon, or other things. 9-patch isn’t just for buttons, it works for background images as well. The above button & label example is exaggerated simply to explain the idea of fill – the label isn’t completely accurate. To be honest, I haven’t experienced how Android does multi-line labels since a button label is usually a single row of text.
Finally, here’s a good demonstration of how scale and fill guides can vary, such as a LinearLayout with a background image & fully rounded sides. With this example, the LEFT guide isn’t used but we’re still required to have a guide. The background image don’t scale vertically; it just scales horizontally (based on the TOP guide). Looking at the fill guides, the RIGHT and BOTTOM guides extend beyond where they meet the image’s curved edges.
This allows me to place my round buttons close to the edges of the background for a tight, fitted look. So that’s it.
9-patch is super easy, once you get it. It’s not a perfect way to do scaling, but the fill-area and multi-line scale-guides does offer more flexibility than traditional 9-slice and scale9. Give it a try and you’ll figure it out quickly. And here is an ONLINE.9PNG GENERATOR.