Give us a call 888-856-2664
Get a Quote Today

Things a Chameleon Would Say

Web design

Android: Resizable background images with 9 patch
By: Nicholas Whittier 09/26/2011

One concern when developing for Android devices is supporting the various screens that are available. Android does a fairly good job with this, by allowing various drawable directories for particular screens, and allowing layout configurations using density-independent pixel (dp) instructions. There is good information at developer.android.com regarding tips and best practices for supporting various screen sizes.

Another consideration for supporting multiple screen sizes is to use 9 patch png images as backgrounds for buttons and application content. Using 9 patch png images for backgrounds can help address both screen size issues as well as orientation concerns. You can use Google’s Draw 9 patch tool, or any graphics tool to generate these images. 9 patch creates sections within your image that can be maintained (corners), and areas to be repeated or stretched over x and y. It is simple to create 9 patch images, and it makes a huge difference in presentation.

Below are a couple of extreme examples, but even with less extreme scenarios, a user can generally spot a resized image that lost its proportionality. 9 patch removes these issues, and avoids the necessity to include different background images for each screen size, button dimension, background area, etc. Both examples use a similar 46×42 pixel image as their background. However, the 9 patch version includes an extra 1 pixel border that delineates how the background image should grow and what border area should be maintained. This information allows the corners to stay consistent for different proportions, and the edges to remain a consistent thickness no matter how large we want the area to be.

An android screen using a plain png background image.

Without 9 patch

An Android screen using a 9 patch png for background images.

With 9 patch

One Response to “Android: Resizable background images with 9 patch”

  1. Richard September 30, 2011

    Nicholas,

    In addition to your article, I would like to offer your readers access to 9-patch images for free.

    They come very handy and can be used for any android application, including commercial projects.

    Get them on my blog here: http://android9patch.blogspot.com/

    An alternative way to browse would be directly on your android device with the app: http://market.android.com/details?id=com.android9patch.viewer

    I have been using photoshop only to create the images and with some discipline, it has become fairly quick to do so.

    I invite your users to try Gimp or Photoshop or even Painter to create their own 9-patch images.

    Happy 9-patching!!!

    Richard.

Leave a Reply




Have a Question? Need a Quote?

Drop us a line or give us a call at 888-856-2664

Your Name (required)
Your Email (required)
Phone (required)
Your Message

What Our Clients Are Saying

John,
Can I just tell you how impressed I am with your team?! This whole process has been so great and working with you guys has made it SOOOO much easier! Thank you for all your hard work and for convincing us to choose Accella.

SO THRILLED!!

Alycia White
Kubota

Recent Posts

Getting Arrested Can Help Your Business

While generally coming face to face with the law is generally not good for...

Drupal 6 with UberCart / UberPOS - A Love-Hate Relationship?

As most techies and programmers have heard, the Drupal CMS is an extremely...