Skip to content

Most visited

Recently visited

navigation

Create Resizable Bitmaps (9-Patch files)

The Draw 9-patch tool is a WYSIWYG editor included in Android Studio 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 on 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.

Figure 1. A NinePatch image in Android Studio's Draw 9-patch tool.

Here's a quick guide to creating a NinePatch graphic using the Draw 9-patch tool in Android Studio. You'll need the PNG image with which you'd like to create a NinePatch image.

  1. In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click Create 9-patch file.
  2. Type a file name for your NinePatch image, and click OK. Your image will be created with the .9.png file extension.
  3. Double-click your new NinePatch file to open it in Android Studio. 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 pane is the preview area, where you can preview your graphic when stretched.

  4. 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.
  5. When done, click File > Save to save your changes.

You can open an existing NinePatch file in Android Studio by double-clicking the file.

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 NinePatch file (*.9.png) will be loaded as-is, with no drawing area added, because it already exists.

Figure 2. A NinePatch image showing content, patches, and bad patches.

Optional controls include:

This site uses cookies to store your preferences for site-specific language and display options.

Hooray!

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.