Audience: designers and frontend engineers shipping Android .9.png HUD and reusable UI chrome. You need a clean one-pixel control frame, density-accurate exports, and a binary QA contract so art stops bouncing between Figma and Gradle.
Outcome: stretch versus padding in plain language, a comparison table for border and ICC choices, and remote Mac mini M4 batch knobs. See also sRGB versus Display P3, Figma PNG pixel alignment, and OpenClaw PNG QA on remote Mac.
Table of Contents
Why 9-patch PNGs fail in production
Most breaks are geometry and metadata, not taste. They show up only after scaling on hardware.
- Narrow stretch: one layout pixel of stretch becomes one noisy device pixel when alignment slips.
- Padding vs Figma safe zones: black marks define insets; if design still uses canvas guides, copy hits rounded corners.
- Soft control ring: semi-transparent gray on the outer row shifts padding by about one dp.
- ICC drift: un-tagged exports look fine on Display P3 studio monitors but dull or neon on sRGB-first QA phones.
Specification decode (stretch vs content)
The outer one-pixel border is metadata, not decoration. Black on top and left marks stretchable columns and rows. Black on bottom and right marks the padding box for child views. Border pixels must be opaque black or fully transparent only. Corners stay transparent so the decoder can read horizontal and vertical marks independently. Keep anti-aliased interior art at least one pixel inside so resamplers never touch the skirt.
Comparison: border rules, transparency, scale, sRGB
Use this table as the design-to-build contract. Baseline assumes classic mdpi naming unless your studio standard says otherwise.
| Topic | 1 px border rule | Transparent edge | Scale (@1x / @2x / @3x) | sRGB export |
|---|---|---|---|---|
| Stretch marks (top + left) | Continuous black; ≥ 2 px wide per axis at native export | Non-mark cells fully transparent | Scale baseline by 1.0 / 1.5 / 2.0 / 3.0; avoid double rounding | Embed sRGB IEC61966-2.1; P3 only if signed off |
| Padding marks (bottom + right) | Match ticketed insets; symmetric unless asymmetry is explicit | Corners transparent so both axes decode | Re-check dp in layout inspector after export | Same ICC as stretch; one toolchain per drop |
| Interior artwork | Live pixels ≥ 1 px inside the ring | Feather stays inside, not under the skirt | Rasterize at target density; document any downscale sharpen | sRGB then lossless recompress; log ICC in manifest |
Batch export workflow
Ordered steps keep nightly QA deterministic and give producers a shared definition of done.
- Freeze logic: dp width, corner radii, and which edges stretch; export one master per density bucket so padding math stays traceable.
- Markers last: paint stretch and padding on a vector overlay snapped to the pixel grid, then merge so audits can diff overlays quickly.
- Folder naming: consistent
drawable-*dpior flavor paths so CI globs apply the right byte and dimension caps per bucket. - Single toolchain: macOS
sipsor ImageMagick for the whole sprint avoids ICC surprises when Windows and Mac exports mix. - Script gates: require an alpha channel; reject outer-ring RGB values strictly between 1 and 254; flag odd dimensions if your pipeline forbids them.
- Manifest: ship
sha256,px_w,px_h,density,icc, and preset version beside the PNGs.
Color shift & jagged-edge FAQ
Why do neutrals tint after stretch?
Premultiplied edges plus wrong gamma skew grays. Use straight alpha, embed sRGB, preview on a mid sRGB phone.
Hairline seams at repeat?
Stretch zone too thin or holds a gradient. Widen solid stretch bands; move gradients to fixed rows.
WebP instead of nine-patch?
Not a drop-in for classic View nine-patch. Vector or Compose migrations are separate epics.
Remote M4 batch parameters
Use a remote Mac mini M4 for overnight passes so laptops stay free. Apple Silicon unified memory keeps many medium PNGs resident while ImageMagick walks alpha statistics. Start conservative, tighten thresholds once your false-positive rate is near zero.
- Parallelism: ImageMagick workers ≤ physical cores minus one.
- Debounce: 20–40 s quiet after last write before QA.
- Alpha dust: fail if alpha 1–254 within 2 px of the ring unless waived.
- Bytes: HUD plates often < 180 KB at xhdpi; heavy chrome ≤ 400 KB without embedded animation.
- ICC: require embedded sRGB or a documented no-profile waiver beside the manifest.
Recap & next step
Nine-patch is a layout API in raster form. Honoring the single-pixel contract plus scripted gates stops “almost right” chrome on budget phones. A remote Mac M4 matches art-director exports and frees laptops for comp work.
Browse MacPng plans and nodes without signing in for a limited time, then use the remote access guide to pin QA on Apple Silicon.