PMG Digital Made for Humans

iPhone Developers, Meet Android – Part V : Nine Patches

4 MINUTE READ | October 27, 2011

iPhone Developers, Meet Android – Part V : Nine Patches

Author's headshot


PMG is a global independent digital company that seeks to inspire people and brands that anything is possible. Driven by shared success, PMG uses business strategy and transformation, creative, media, and insights, along with our proprietary marketing intelligence platform Alli, to deliver Digital Made for Humans™. With offices in New York, London, Dallas/Fort Worth, Austin, Atlanta, and Cleveland, our team is made up of over 900+ employees globally, and our work for brands like Apple, Nike, Best Western Hotels & Resorts, Gap Inc., Kohler, Momentive, Sephora, and Shake Shack has received top industry recognitions including Cannes Lions and Adweek Media Plan of the Year.

The Nine Patch is a very simple concept, yet somehow so often it seems to get explained in terribly confusing ways. So, I’m going to try my hand at explaining the purpose, creation and use of a good Nine Patch. For this example I’m going to use a simple button:

There you have it, a nice, simple, clean button ready to put text on it and be pressed over and over again. But, wait! What if you don’t want your button to always be that same width or height? What if it needs to be bigger, or smaller? If you were to stretch it you would end up with this ugly mess:

That’s not what you want at all! Normally, to avoid this, you would have to make multiple different size buttons. A long one, a tall one, a short one, a thin one, and everything in between. But, that wouldn’t solve the problem of different screen sizes, not entirely anyway. So, here is the answer Google has given us:

Now, if you’re a genius, you probably got it just by looking at that one image. But, if you’re like me, you probably need a bit more explanation as to what this is you’re looking at. It’s really quite brilliantly simple. What you have is all of the important parts of your image, the parts that should never be stretched, corners, shadows, borders, and the like, retained at their appropriate size. Then, you take all of the stretchable parts, the middle pieces, shrunk down to as small as they can be, as few pixels as are necessary.

Then, you take your entire image and give it an extra transparent padding of one pixel on every edge. Using a single-pixel-wide, black line at the top and leftmost edge, you mark which parts should be allowed to stretch.

The green areas indicated here are what parts of the image will be stretched in order to fit the image within the allotted space.

Then, on the bottom and rightmost edge, you mark which parts the content is allowed to fill. If these sides are left empty the content area will be made to match the stretchable area.

You can set this image as the background on any TextView, Image, or any other UI element and the element will be forced to stay within the highlighted area and the surrounding area will stretch to fit around it just as you’ve always wanted it to. And there you have it! Perfectly stretchable buttons that can be almost any size without distorting the details!

Of course, this isn’t just restricted to buttons, you can do this with any image you like. Just remember, Nine Patches can’t shrink, at least not well, they only stretch. So, if your button or image needs to be shorter or thinner than the original Nine Patch, You will have to edit your Nine Patch to make it accommodate the smaller size.

Stay in touch

Bringing news to you

Subscribe to our newsletter

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy

In conclusion, remember, be careful. This is Android development; it’s not the safe, clean, shiny box that you’re so used to. Apple’s review process, as irritating as it can be to some, is great. It keeps out so much of the garbage that clutters up the Android Marketplace, and enforces some sense of continuity to the device itself. But, don’t think that just because Google doesn’t set those boundaries for you that they aren’t necessary, and don’t make the further mistake of assuming that the boundaries are the exact same boundaries as on the iPhone. Explore the environment, delve into the intricacies and fallacies of it. Learn what works and what doesn’t, because unlike Apple, Google won’t tell you. Google gives you the freedom to do whatever you want, which is nice. But sometimes, what we’re likely to do with said freedom, is give ourselves a time bomb of an application. So just remember, this isn’t Apple. You’re sailing in Google’s ocean now. Out here, there be monsters.

Related Content

thumbnail image

AlliPMG CultureCampaigns & Client WorkCompany NewsDigital MarketingData & Technology

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

thumbnail image

Applying Function Options to Domain Entities in Go

11 MINUTES READ | October 21, 2019

thumbnail image

My Experience Teaching Through Jupyter Notebooks

4 MINUTES READ | September 21, 2019

thumbnail image

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

thumbnail image

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

thumbnail image

Testing React

13 MINUTES READ | March 12, 2019

thumbnail image

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018