.png?width=180&height=67&name=Crank-AMETEK-HZ-Rev%20(4).png)
Application design usually means working with an abundance of graphics, and when designing applications for multiple screen sizes, designers have to keep in mind how those images will scale when deployed across different resolutions and aspect ratios. A button that looks great on one screen might have awkward corners or warped text when scaled to fit a screen of a different size. To avoid this, designers often create multiple versions of their graphics in various sizes. While this allows for tight control over the visual presentation of the graphics, it also means extra time, effort, and resources.
So how do we create graphics with scalability in mind without having to duplicate effort, bloat file resources, or sacrifice quality? Enter 9-patch.
What is a 9-patch image?
Essentially, a 9-patch image is a custom graphic that scales the way that you intend it to, which you define when creating the graphic. Where supported, this stretchable image is automatically resized to accommodate the content as defined. The "as defined" part is what allows designers to retain control over how a graphic looks even when it is resized.
Check out this example. Both buttons look the same before, but the 9-patch button retains it's original appearance when resized to be slightly wider and much higher. The other image scales poorly, especially at the border and corners.
How to define the stretchable areas of an image
`A 9-patch image is a standard PNG image that includes an extra 1-pixel-wide border and must be saved with the extension .9.png. When creating 9-patch images, designers can indicate which areas can and cannot be stretched. We will post our own tutorial when we release the next version of Storyboard Suite, but for now see this tutorial to learn how to create 9-patch images. For more information on the background of 9-patch, check out the Android Developer documentation.
We are stoked about the new features and enhancements that are coming out in the next release of Storyboard, which is just around the corner. 9-patch support is just one of the many features we've added to streamline the design process, so stay tuned for release information!
