Merge "docs: 9patch tool update" into lmp-docs

page.tags=NinePatch

@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 about Nine-patch in the 

<a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">2D Graphics</a>

<p>The Draw 9-patch tool is a WYSIWYG editor that allows you to create bitmap images that

automatically resize to accommodate the contents of the view and the size of the screen. Selected

parts of the image are scaled horizontally or vertically based indicators drawn within the image. </p>

<p>For an introduction to NinePatch graphics and how they work, please read

the section about NinePatch Drawables in the

<a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">Canvas and Drawables</a>

document.</p>

<img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341"

/>

<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>

<p>Here's a quick guide to create a NinePatch graphic using the Draw 9-patch tool.

You'll need the PNG image with which you'd like to create a NinePatch image.</p>

<ol>

  <li>From a terminal, launch the <code>draw9patch</code> application from your SDK 

    <code>/tools</code> directory.

  <li>From a terminal, run the <code>draw9patch</code> command from your SDK

    <code>sdk/tools</code> directory to launch the Draw 9-patch tool. 

    </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).

    <p>Your image will be saved with the <code>.9.png</code> file name.</p>

    </li>

</ol>

   <p>To make sure that your NinePatch graphics scale down properly, verify that any

   stretchable regions are at least 2x2 pixels in size.

   Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in

   the graphics before and after stretchable regions to avoid interpolation during scaling that may

   cause the color at the boundaries to change. </p>

    <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, 

     A previously saved NinePatch file (<code>*.9.png</code>) will be loaded as-is,

     with no drawing area added, because it already exists.</p>

<img src="{@docRoot}images/draw9patch-bad.png" style="float:right;clear:both" alt="" height="300" width="341"