1page.title=Draw 9-patch 2page.tags=NinePatch 3@jd:body 4 5<p>The Draw 9-patch tool is a WYSIWYG editor that allows you to create bitmap images that 6automatically resize to accommodate the contents of the view and the size of the screen. Selected 7parts of the image are scaled horizontally or vertically based indicators drawn within the image. </p> 8<p>For an introduction to NinePatch graphics and how they work, please read 9the section about NinePatch Drawables in the 10<a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">Canvas and Drawables</a> 11document.</p> 12 13<img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341" 14/> 15 16<p>Here's a quick guide to create a NinePatch graphic using the Draw 9-patch tool. 17You'll need the PNG image with which you'd like to create a NinePatch image.</p> 18 19<ol> 20 <li>From a terminal, run the <code>draw9patch</code> command from your SDK 21 <code>sdk/tools</code> directory to launch the Draw 9-patch tool. 22 </li> 23 <li>Drag your PNG image into the Draw 9-patch window 24 (or <strong>File</strong> > <strong>Open 9-patch...</strong> to locate the file). 25 Your workspace will now open. 26 <p>The left pane is your drawing area, in which you can edit the lines for the 27 stretchable patches and content area. The right 28 pane is the preview area, where you can preview your graphic when stretched.</p> 29 </li> 30 <li>Click within the 1-pixel perimeter to draw the lines that define the stretchable 31 patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase 32 previously drawn lines. 33 </li> 34 <li>When done, select <strong>File</strong> > <strong>Save 9-patch...</strong> 35 <p>Your image will be saved with the <code>.9.png</code> file name.</p> 36 </li> 37</ol> 38 39 <p>To make sure that your NinePatch graphics scale down properly, verify that any 40 stretchable regions are at least 2x2 pixels in size. 41 Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in 42 the graphics before and after stretchable regions to avoid interpolation during scaling that may 43 cause the color at the boundaries to change. </p> 44 45 <p class="note"><strong>Note:</strong> A normal PNG file (<code>*.png</code>) will be 46 loaded with an empty one-pixel border added around the image, in which you can draw 47 the stretchable patches and content area. 48 A previously saved NinePatch file (<code>*.9.png</code>) will be loaded as-is, 49 with no drawing area added, because it already exists.</p> 50 51<img src="{@docRoot}images/draw9patch-bad.png" style="float:right;clear:both" alt="" height="300" width="341" 52/> 53 54<p>Optional controls include:</p> 55<ul> 56 <li><strong>Zoom</strong>: Adjust the zoom level of the graphic in the drawing area.</li> 57 <li><strong>Patch scale</strong>: Adjust the scale of the images in the preview area.</li> 58 <li><strong>Show lock</strong>: Visualize the non-drawable area of the graphic on mouse-over.</li> 59 <li><strong>Show patches</strong>: Preview the stretchable patches in the drawing area (pink is a 60 stretchable patch).</li> 61 <li><strong>Show content</strong>: Highlight the content area in the preview images 62 (purple is the area in which content is allowed).</li> 63 <li><strong>Show bad patches</strong>: Adds a red border around patch areas that may 64 produce artifacts in the graphic when stretched. Visual coherence of your stretched 65 image will be maintained if you eliminate all bad patches.</li> 66<ul> 67