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

What is a Nine-Patch?

A .9.png file is a PNG with a 1-pixel transparent border that tells Android which rows and columns may stretch when the view grows, and where content (text) should sit. It is ideal for chat bubbles, toolbars, and buttons that must scale to different screen widths without distorting corners.

App Image Kit draws the required black guide pixels on that border automatically after you define stretch zones in the export dialog — you only design the inner graphic.

Design guidelines

• Keep corners and fixed ornaments in the non-stretchable centre region.
• Use a horizontal stretch band across the middle for wide panels; vertical band for tall backgrounds.
• Export the inner art at mdpi logical size on the canvas (e.g. 100×40 for a button cap).
• Do not draw your own 1px border — the tool adds it on export.

Step-by-step in App Image Kit

1. Upload your panel graphic and set the canvas to the mdpi pixel dimensions of the asset.
2. Adjust background, position, and filters if needed — same as any other export.
3. Select the image for export and open the Export dialog.
4. Choose platform Nine-Patch.
5. Set stretch handles (percentages along width and height) so the top and left black lines mark stretchable ranges; bottom and right define content padding (defaults follow stretch zone).
6. Download nine-patch-export.zip.

ZIP paths look like:

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

Using the asset in XML

Reference the file without the .9 extension in layouts:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/chat_bubble" />

Android scales the nine-patch according to the view size. Test on a narrow phone and a tablet emulator to confirm corners stay crisp and text padding feels correct.

Verify in Android Studio

Open the .9.png in Android Studio's drawable preview — you should see the stretch and content guides overlaid. If the image looks like a normal PNG with a coloured border in other viewers, that is expected; only Android's runtime interprets the guides.

If stretching looks wrong, re-export with narrower stretch bands or move artwork away from the edges before export.

Further reading

See documentation for ZIP layout details and drawable folder naming.