This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

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

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.

Insights meet inbox

Sign up for weekly articles & resources.

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.


Posted by PMG Advertising Agency

Related Content

thumbnail image

Get Informed

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

Get Informed

Applying Function Options to Domain Entities in Go

11 MINUTES READ | October 21, 2019

thumbnail image

Get Informed

My Experience Teaching Through Jupyter Notebooks

4 MINUTES READ | September 21, 2019

Get Informed

Trading Symfony’s Form Component for Data Transfer Objects

8 MINUTES READ | September 3, 2019

Get Inspired

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

Get Informed

Parsing Redshift Logs to Understand Data Usage

7 MINUTES READ | May 6, 2019

Get Inspired

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

thumbnail image

Get Informed

Testing React

13 MINUTES READ | March 12, 2019

Get Inspired

Tips for Designing & Testing Software Without a UX Specialist

4 MINUTES READ | March 6, 2019

Get Informed

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018

ALL POSTS