Tutorials Mobile, Design

Use The 9-Patch Editor To Create Responsive Galaxy Themes Components

Tony Morelan

Senior Developer Evangelist

When building Galaxy Themes, certain graphic elements need to be a 9-patch PNG image to display correctly on a phone. An excellent example of this is a dialog box graphic that resizes depending on the amount of text it contains. In this blog, I'll walk you through how to create both a dialog box and a switch, so you're able to design Galaxy Themes that follow design best practices.

Getting Started

Create a graphic for the 9-patch image using a program like Photoshop or Gimp. Make sure that the background is transparent and that the artwork does not go to the edge. 9-patch images use the outer edge to determine what areas stretch and what areas contain text. These are called handles, one-pixel-thick lines that don’t appear when the graphic is used in the phone UI theme.

I created a 500-pixel square document for the dialog box example,. I then drew a centered, black 384-pixel square and a gray 10-pixel line with radius corners set to 50 pixels.

Note: Be sure to add a .9 before the file name extension when saving your PNG, this ensures the file is recognized as a 9-patch image. Example: filename.9.png.

Using the 9-Patch Editor

  1. Open the Samsung Themes Editor software.

  2. Click the [Common] sidebar button and then the [Dialog] button.

  3. From within the [Background] section, click the pencil icon to open the 9-Patch Editor.

  4. Click the [Open] button and navigate your hard drive to select your .9.png file.

  5. Determine what part of the graphic will stretch. Use the pencil tool to draw a single-pixel-thick line at the edge of the canvas area. The top edge denotes the horizontal stretch area, and the left edge the vertical stretch area.

  6. Make sure [Show patches] is selected at the bottom of the editor window, and then select the pencil tool in the lower-left corner.

  7. Using the pencil tool can be a little tricky since it only activates when your cursor is at the single-pixel-edge of your canvas. You’ll know you are at the edge when your cursor arrow turns into the pencil tool. Place the pencil tool at the approximate horizontal center of the graphic, and draw to the right. As you draw, guidelines and a shaded green area expand. The shaded area represents the part of the graphic that will stretch to resize the dialog box. Draw a matching line at the center of the left side of the canvas to determine the vertical stretch area. If needed, you can re-adjust the handles by clicking and dragging the guides.

Once drawn, the numeric value for the length of the handles is displayed, along with values for the unaffected areas. These non-affected areas of the graphic will not stretch, thus maintaining the perfect arc for each rounded corner.

  1. Next, we determine the content area in which the text is displayed. Make sure [Show content] is selected at the bottom of the editor window. Then draw handles on the bottom and right edge of the canvas, aligned with the beginning of each rounded corner. Think of this as setting the margins for the text area. In the right-side preview area, you’ll see a purple shaded box that represents the content area for the text within the dialog box.

Determining the content area is optional. You might have a 9-patch image that is strictly a graphic without any text. For the 9-patch image to function correctly, all you need are the patch handles at the top and left.

  1. Click [Save] and then [Exit] to save the 9-patch image. A popup window will appear asking you to confirm importing the image into Samsung Themes Editor. Click “OK” to import the 9-patch image.

  2. In the preview window, you’ll see that the imported dialog box has stretched to fit the dialog text and buttons without stretching the rounded corners.

Advanced 9-patch

An example of a more complex 9-patch image is the background track area of a switch. Let’s take a closer look to see how this type of button is built.

  1. With the [Common] sidebar button selected in Themes Editor, choose [Switches].

  2. Right-click on the Track graphic symbol to download the 9-patch image file. Take note of where on your computer the 9-patch image will be saved.

  3. Click the Pencil button to open the 9-patch Editor and then select [Open]. Navigate your hard drive to choose the downloaded 9-patch image.

  4. Use the Zoom feature to enlarge the workspace area to get a closer look at the handles. Notice that even though the graphic is a circle, by drawing a small horizontal patch handle at the top, the circle stretches horizontally as needed while still maintaining nicely-curved sides. Handles should be at least two pixels long for the stretched 9-patch image to display correctly when resized.

Two handles have been drawn in the empty vertical area on the right side of the canvas to prevent the circle image from stretching vertically. This means that the area without the handles will not stretch.

Note: The content area for this example image is set by the left and bottom handle lines; however, there’s no text within this 9-patch image so content area handles are not required.

Using 9-patch images ensures that your Galaxy Themes look great and function correctly. If you would like to become a Galaxy Themes developer and download our Themes Editor software, read our resource page on how to get started.

Recent Posts