From 4bdb437bc6f4b611308ecd3c18fb0a571beb7ac8 Mon Sep 17 00:00:00 2001 From: Rich Slogar Date: Thu, 22 Jan 2015 11:27:42 -0800 Subject: docs: 9patch tool update b/18019306 Change-Id: I8cd84afe47d0d3ac344f0581075c015049777e27 --- docs/html/tools/help/draw9patch.jd | 40 +++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 16 deletions(-) (limited to 'docs/html/tools') diff --git a/docs/html/tools/help/draw9patch.jd b/docs/html/tools/help/draw9patch.jd index 859b1cf..7c26441 100644 --- a/docs/html/tools/help/draw9patch.jd +++ b/docs/html/tools/help/draw9patch.jd @@ -2,42 +2,50 @@ page.title=Draw 9-patch page.tags=NinePatch @jd:body -

The Draw 9-patch tool allows you to easily create a - {@link android.graphics.NinePatch} graphic using a WYSIWYG editor.

-

For an introduction to Nine-patch graphics and how they work, please read -the section about Nine-patch in the -2D Graphics +

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.

+

For an introduction to NinePatch graphics and how they work, please read +the section about NinePatch Drawables in the +Canvas and Drawables document.

-

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.

+

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.

    -
  1. From a terminal, launch the draw9patch application from your SDK - /tools directory. +
  2. From a terminal, run the draw9patch command from your SDK + sdk/tools directory to launch the Draw 9-patch tool.
    3. -
  3. Drag your PNG image into the Draw 9-patch window +
  4. Drag your PNG image into the Draw 9-patch window (or File > Open 9-patch... to locate the file). Your workspace will now open.

    The left pane is your drawing area, in which you can edit the lines for the - stretchable patches and content area. The right + stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.

    5. -
  5. 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 +
  6. 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.
  7. When done, select File > Save 9-patch...

    Your image will be saved with the .9.png file name.

-

Note: A normal PNG file (*.png) will be - loaded with an empty one-pixel border added around the image, in which you can draw + +

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.

+ +

Note: A normal PNG file (*.png) 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 (*.9.png) will be loaded as-is, + A previously saved NinePatch file (*.9.png) will be loaded as-is, with no drawing area added, because it already exists.