The Android Open Source Project | 9066cfe | 2009-03-03 19:31:44 -0800 | [diff] [blame] | 1 | page.title=Draw 9-patch |
Scott Main | 239f3ee | 2013-06-11 15:08:54 -0700 | [diff] [blame] | 2 | page.tags="NinePatch" |
The Android Open Source Project | 9066cfe | 2009-03-03 19:31:44 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <p>The Draw 9-patch tool allows you to easily create a |
| 6 | {@link android.graphics.NinePatch} graphic using a WYSIWYG editor.</p> |
| 7 | <p>For an introduction to Nine-patch graphics and how they work, please read |
Scott Main | 58d1966 | 2010-12-15 17:21:30 -0800 | [diff] [blame] | 8 | the section about Nine-patch in the |
| 9 | <a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">2D Graphics</a> |
| 10 | document.</p> |
The Android Open Source Project | 9066cfe | 2009-03-03 19:31:44 -0800 | [diff] [blame] | 11 | |
Scott Main | 3b3145e | 2010-03-17 12:39:51 -0700 | [diff] [blame] | 12 | <img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341" |
| 13 | /> |
The Android Open Source Project | 9066cfe | 2009-03-03 19:31:44 -0800 | [diff] [blame] | 14 | |
| 15 | <p>Here's a quick guide to create a Nine-patch graphic using the Draw 9-patch tool. |
| 16 | You'll need the PNG image with which you'd like to create a NinePatch.</p> |
| 17 | |
| 18 | <ol> |
| 19 | <li>From a terminal, launch the <code>draw9patch</code> application from your SDK |
| 20 | <code>/tools</code> directory. |
| 21 | </li> |
| 22 | <li>Drag your PNG image into the Draw 9-patch window |
| 23 | (or <strong>File</strong> > <strong>Open 9-patch...</strong> to locate the file). |
| 24 | Your workspace will now open. |
| 25 | <p>The left pane is your drawing area, in which you can edit the lines for the |
| 26 | stretchable patches and content area. The right |
| 27 | pane is the preview area, where you can preview your graphic when stretched.</p> |
| 28 | </li> |
| 29 | <li>Click within the 1-pixel perimeter to draw the lines that define the stretchable |
| 30 | patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase |
| 31 | previously drawn lines. |
| 32 | </li> |
| 33 | <li>When done, select <strong>File</strong> > <strong>Save 9-patch...</strong> |
| 34 | <p>Your image will be saved with the <code>.9.png</code> file name.</p> |
| 35 | </li> |
| 36 | </ol> |
| 37 | <p class="note"><strong>Note:</strong> A normal PNG file (<code>*.png</code>) will be |
| 38 | loaded with an empty one-pixel border added around the image, in which you can draw |
| 39 | the stretchable patches and content area. |
| 40 | A previously saved 9-patch file (<code>*.9.png</code>) will be loaded as-is, |
| 41 | with no drawing area added, because it already exists.</p> |
| 42 | |
Keiji Ariyama | 19bbdcc | 2011-01-30 03:50:55 +0900 | [diff] [blame] | 43 | <img src="{@docRoot}images/draw9patch-bad.png" style="float:right;clear:both" alt="" height="300" width="341" |
Scott Main | 3b3145e | 2010-03-17 12:39:51 -0700 | [diff] [blame] | 44 | /> |
The Android Open Source Project | 9066cfe | 2009-03-03 19:31:44 -0800 | [diff] [blame] | 45 | |
| 46 | <p>Optional controls include:</p> |
| 47 | <ul> |
| 48 | <li><strong>Zoom</strong>: Adjust the zoom level of the graphic in the drawing area.</li> |
| 49 | <li><strong>Patch scale</strong>: Adjust the scale of the images in the preview area.</li> |
| 50 | <li><strong>Show lock</strong>: Visualize the non-drawable area of the graphic on mouse-over.</li> |
| 51 | <li><strong>Show patches</strong>: Preview the stretchable patches in the drawing area (pink is a |
| 52 | stretchable patch).</li> |
| 53 | <li><strong>Show content</strong>: Highlight the content area in the preview images |
| 54 | (purple is the area in which content is allowed).</li> |
| 55 | <li><strong>Show bad patches</strong>: Adds a red border around patch areas that may |
| 56 | produce artifacts in the graphic when stretched. Visual coherence of your stretched |
| 57 | image will be maintained if you eliminate all bad patches.</li> |
| 58 | <ul> |