auto import from //depot/cupcake/@135843
diff --git a/docs/html/guide/developing/tools/draw9patch.jd b/docs/html/guide/developing/tools/draw9patch.jd
new file mode 100644
index 0000000..f25fabb
--- /dev/null
+++ b/docs/html/guide/developing/tools/draw9patch.jd
@@ -0,0 +1,58 @@
+page.title=Draw 9-patch
+@jd:body
+
+<p>The Draw 9-patch tool allows you to easily create a
+ {@link android.graphics.NinePatch} graphic using a WYSIWYG editor.</p>
+<p>For an introduction to Nine-patch graphics and how they work, please read
+the section on Nine-patch in the
+<a href="{@docRoot}guide/topics/resources/available-resources.html#ninepatch">Ninepatch Images</a> topic.</p>
+
+<div class="sidebox" style="width:auto"><br/>
+<img src="{@docRoot}images/draw9patch-norm.png" alt="" height="300" width="341" />
+</div>
+
+<p>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.</p>
+
+<ol>
+ <li>From a terminal, launch the <code>draw9patch</code> application from your SDK
+ <code>/tools</code> directory.
+ </li>
+ <li>Drag your PNG image into the Draw 9-patch window
+ (or <strong>File</strong> > <strong>Open 9-patch...</strong> to locate the file).
+ Your workspace will now open.
+ <p>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.</p>
+ </li>
+ <li>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.
+ </li>
+ <li>When done, select <strong>File</strong> > <strong>Save 9-patch...</strong>
+ <p>Your image will be saved with the <code>.9.png</code> file name.</p>
+ </li>
+</ol>
+ <p class="note"><strong>Note:</strong> A normal PNG file (<code>*.png</code>) 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 (<code>*.9.png</code>) will be loaded as-is,
+ with no drawing area added, because it already exists.</p>
+
+<div class="sidebox" style="width:auto"><br/>
+<img src="{@docRoot}images/draw9patch-bad.png" alt="" height="300" width="341" />
+</div>
+
+<p>Optional controls include:</p>
+<ul>
+ <li><strong>Zoom</strong>: Adjust the zoom level of the graphic in the drawing area.</li>
+ <li><strong>Patch scale</strong>: Adjust the scale of the images in the preview area.</li>
+ <li><strong>Show lock</strong>: Visualize the non-drawable area of the graphic on mouse-over.</li>
+ <li><strong>Show patches</strong>: Preview the stretchable patches in the drawing area (pink is a
+ stretchable patch).</li>
+ <li><strong>Show content</strong>: Highlight the content area in the preview images
+ (purple is the area in which content is allowed).</li>
+ <li><strong>Show bad patches</strong>: 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.</li>
+<ul>