Using nine-patch layers

Nine-patch layer is used for showing framed images and buttons that change in size, because it scales the frame to match the size of the layer. Nine-patch layer scales images in the layer in a controlled way, instead of scaling them as one unit.

Nine-patch layer places nine images in a 3x3 grid. The images on the edges form the frame, while the center image holds the content of the nine-patch layer.

When you create nine-patch layers, keep the following in mind:

• The center image stretches in all directions. For the best results keep that image transparent or solid color.
• The thickness of the corners defines the thickness of the frame for the central image. Corners in a nine-patch layer are not scaled.
• By default as the size of the nine-patch layer changes, the top, bottom, right, and left textures scale according to the change in space between the corner textures. You can control this setting with the Wrap Mode and the texture type properties for each texture. See Creating a nine-patch layer.

Creating a nine-patch layer

To create a nine-patch layer:

1. In the Project right-click the scene where you want to create a nine-patch layer and select Create > Nine-Patch Layer.
2. In the Properties set the Nine-Patch Layer Textures properties to the images you want use for the nine-patch layer:
   • Top-Left Texture to the texture for the top left corner
   • Top Texture to the texture for the top border
   • Top-Right Texture to the texture for the top right corner
   • Left Texture to the texture for the left border
   • Center Texture to the texture for the center
   • Right Texture to the texture for the right border
   • Bottom-Left Texture to the texture for the bottom left corner
   • Bottom Texture to the texture for the bottom border
   • Bottom-Right Texture to the texture for the bottom right corner
3. (Optional) You can control how the top, right, bottom, and left textures are displayed.
   
   1. In the Library select the texture and set the Wrap Mode property.
   2. In the Project select the nine-patch layer and in the Properties set the texture stretch property for the textures you want to control (Top Texture Type, Bottom Texture Type, Left Texture Type, Right Texture Type, Center Texture Type).

   Wrap Mode property value	Texture Stretch property value	Description
   Clamp	Stretch	Default value. Scale the texture to fill the space between the corner textures of the nine-patch layer.
   Clamp	Wrap	Extend the last column or row of pixels of the selected texture when the width or height of the space between the corner textures of the nine-patch layer exceed the width or height of the selected texture.
   Repeat	Stretch	Scale the texture to fill the space between the corner textures of the nine-patch layer.
   Repeat	Wrap	Tile the texture when the width or height of the space between the corner textures of the nine-patch layer exceed the width or height of the selected texture.

See also

Layers

Open topic with navigation