frameworks/base/docs/html/guide/developing/tools/draw9patch.jd

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