Nine-Patch (.9.png) Workflow with App Image Kit

What is a Nine-Patch?

A .9.png file is a specially formatted PNG that tells Android exactly which parts of an image may stretch when a View grows larger, and where content (such as text inside a button) should be positioned. The name "nine-patch" refers to the nine regions created by two horizontal and two vertical dividing lines: four corners that never scale, four edges that scale in one direction only, and a centre region that scales in both directions.

This format is essential for any UI element that must adapt to dynamic content widths or screen sizes. Common use cases include:

• Chat bubbles — grow horizontally for short messages, vertically for long ones.
• Buttons and input fields — maintain rounded corners regardless of label length.
• Notification backgrounds — stretch to fit varying title and body lengths.
• Toolbar and card backgrounds — fill the screen width on phones of different sizes.
• Onboarding illustration frames — scale to different tablet and phone proportions.

Without nine-patch, you would need to define every button background as a programmatic shape drawable in XML, which cannot use custom artwork, gradients, or photo textures. Nine-patch bridges the gap between pixel-perfect design and flexible layouts.

How the 1-pixel border works

A nine-patch file is a standard PNG that has been padded by 1 pixel on each side. The extra pixels carry the stretch and content markers:

Any region of the top/left border left transparent (no black pixel) is treated as fixed — those pixels will not stretch. App Image Kit writes these border pixels for you based on percentage values you enter in the export dialog. You design only the inner art; the tool handles the 1-pixel encoding.

Design guidelines before you start

A well-designed nine-patch source image makes the export step straightforward. Follow these principles:

• Keep corners visually distinct from the centre. Rounded corners, shadows, and ornaments should all fall within the fixed corner quadrants so they never distort.
• Make the stretch region as simple as possible. A single pixel of a flat colour or a repeating pattern stretches cleanly. Complex gradients in the stretch zone can look inconsistent when the view is very narrow or very wide.
• Design at mdpi logical size. For a button cap that is 10 dp tall with 4 dp rounded corners, design an image 10 px tall. App Image Kit will produce the hdpi (15 px), xhdpi (20 px), xxhdpi (30 px), and xxxhdpi (40 px) variants automatically.
• Do not add your own 1-pixel border. App Image Kit adds the guide border at export time. If your source image already has a 1 px frame, the exported nine-patch will have an extra layer of transparent pixels and the stretch guides will be offset.
• Use transparency carefully. The nine-patch border pixels must be either fully opaque black (stretch/padding markers) or fully transparent (fixed regions). Semi-transparent border pixels can produce unexpected rendering artifacts on some Android versions.

Step-by-step in App Image Kit

1. Open App Image Kit and upload your panel graphic.
2. In the Adjust panel, set the canvas to the mdpi pixel dimensions of the inner art (not counting the future 1 px border).
3. Adjust background colour, position, and filters if needed — the same controls as any standard export.
4. Check the image thumbnail checkbox for export and click Export.
5. In the export dialog, choose platform Nine-Patch.
6. Set the stretch handles using percentage sliders:
   • Horizontal stretch start / end — the percentage range across the width that can stretch. For a chat bubble with 8 dp rounded corners on a 100 dp wide asset, use roughly 8%–92%.
   • Vertical stretch start / end — the range along the height that can stretch. For a button with 5 dp top and bottom caps, use roughly 50%–50% (stretch a single pixel row in the centre).
   • Content padding — defaults to match the stretch zone. Adjust if you want text to sit inside a tighter or wider inset than the stretch area.
7. Click Download ZIP.

The ZIP contains:

drawable-mdpi/chat_bubble.9.png
drawable-hdpi/chat_bubble.9.png
drawable-xhdpi/chat_bubble.9.png
drawable-xxhdpi/chat_bubble.9.png
drawable-xxxhdpi/chat_bubble.9.png

Each file includes the 1-pixel guide border, so the stored image is 2 pixels wider and 2 pixels taller than the canvas size you set.

Using the asset in Android layouts

Reference the nine-patch in XML without the .9 extension — Android resolves the correct file from the density folder automatically:

<!-- Set as a background on any View -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/chat_bubble"
    android:padding="8dp"
    android:text="Hello!" />

With layout_width="wrap_content", the view grows to fit the text and the nine-patch stretches the designated region accordingly. Corners, shadows, and decorative edges remain pixel-perfect at every size.

You can also use the nine-patch as a src for ImageView, or as a layer in a LayerDrawable XML. The runtime interprets the guide border in all cases.

Verify in Android Studio

Android Studio ships with a built-in nine-patch preview. Open any .9.png file in the IDE — you should see the stretch guides overlaid as coloured lines on the image. The preview pane shows how the asset will look at different View sizes.

1. In the Project panel, navigate to res/drawable-mdpi/ and double-click the .9.png file.
2. The editor shows the image with pink stretch regions and a blue content padding overlay.
3. In the right panel, drag the resize handles to simulate the View at different sizes and confirm the corners remain crisp.

If stretching looks wrong — for example, the rounded corners are distorting — re-export with narrower stretch bands or move artwork further from the edges before exporting. Small adjustments to the percentage values in the export dialog make a big difference.

Common issues and fixes

Further reading

• Android drawable folder naming — full reference for density bucket dimensions.
• Export Android icons — the same workflow for standard (non-stretchable) icons.
• App Image Kit documentation — full ZIP layout reference and export dialog options.