What is a 9 patch image and how is it useful?

A 9 patch image is a regular png (.PNG) image which is needful for android app developers where they require to wrap any content within a background image without pixelating the background image. Usually background images have a fixed height and width, but sometimes we may require background images which does not pixelate though stretched, this now becomes a challenge with regular PNG images.

For example: The most popular chat app which most us use on our mobile phone is “Watsapp”. If you can observe the chat conversations on your chat screens the height of those images will depend on the content or the text which you have received. The text will nicely be wrapped within a 9 patch image.

patch image

In the above image you can clearly observe that the background image height and width varies. Then how do you handle such a situation? Do you need to create thousands of images with different heights and widths? The answer is “NO”.  This situation gave way to a new kind of image which is now called a (9 PATCH) image. It is an extension of a simple png image which can be modified using a tool and append it with a different extension.

To create such images you need to follow a few simple steps below:

  1. Create the desired image shape from any of your graphic software tools like Photoshop and save it as a PNG image.
  2. From your android SDK or terminal open the DRAW 9 PATCH application.
  3. Open the png image which you created
  4. You can customize your image now indicating the areas of the image which you need to expand the areas which you do not stretch when the content increases. (I’ll explain the step by step process of creating such images in my next blog)
  5. Now you can save or export your image.
  6. Your image will be saved with the .9.pngfile name.

Now your PNG image is converted into a 9 patch image that can be used by the developers as usable wrappers around the content of their applications regardless of the functions nor worrying about the length’s breadth’s depth of the image and quality. The image acts just like a vector image with a content place holder within it. 

Your 9 patch image looks like this:

A recently generated 9 path image in one of project which was an android chat application-

patch sample




Post a Comment

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
  • Key Metrics to Measure DevOps Success

    DevOps words means many things to many people and all the definitions might be partly right. DevOps is all about continuously seeking feedback, understanding challenges, and improving the way the soft...
  • Bulk Export Import Test Cases to Azure DevOps Test Plans using CSV file

    As a user of Azure DevOps Test Plans or TFS Test Management for manual testing, from a long time everyone including me had a wish, that copy of test cases from excel or csv file along with test steps ...
  • Azure DevOps Overview

    Now a days Azure DevOps is very famous with IT and Operations team along with developers, so what is Azure DevOps? It is a Software as a service (SaaS) platform from Microsoft that provides features r...
  • Volume Management in Kubernetes

    Since pods created in k8s are ephemeral, we are able to get the data as long as pods are alive, but if pods are terminated data stored in it completely lost and it cannot get back, for that we need to...
Monthly Archive

Contact Us
  • *
  • *