Home Tutorials Hints & Tips

Getting Started in Android Development

Part 10 - Nine Patch Bitmap Images

Nine patch bitmaps are another, very useful way of customizing the appearance of Android views. You can imagine a scenario where a bitmap is used as a background for a TextView. If the TextView has wrap content height and width attributes, then that bitmap image will have to be stretched as longer strings or greater text size is applied to the TextView. A standard bitmap image such as jpeg or png file will become blocky as it is stretched. The nine patch bitmap was designed to address this issue.

So what is a nine patch image?

A nine patch image is standard bitmap that is divided into nine sectors. The diagram below illustrates the function of each sector.

The Nine Patch Bounds

The lines in the image define the sectors and can be moved by a user to set the bounds of the nine patch image. You can image that an image with rounded corners like the one above would become distorted if stretched. And you can set the bounds of the stretchable area for both the vertical and horizontal direction to the portion of the image that will look the same when stretched. The Two opposite bounds set the padding for any text. Any text will sit within these bounds.

That is fundamentally all there is to a nine patch bit map image. There is a free nine patch editor that is part of the Android SDK download. It can be found in the tools directory.

Information about this editor is on the Android developers’ website and can be found here.

To use the editor simply load a standard bitmap image. It can be dragged to the editor or you can open a file. The image below was used for my video tutorial and will be applied to a TextView.

Please feel to download the image. All that you then need to do is set the bounds by dragging the horizontal and vertical guide lines. On saving the image it will automatically be given a .9.png extension.

The resulting file for my example can be downloaded here.

The nine patch bitmap image was saved to the drawable resource folder.  The final task is then to assign the file as  a background image resource of any layout view as below:


At the end of this tutorial your activity_mail.xml layout should look similar to the one below.

Download starting bitmap image

Download Download tutorial set 1

Privacy and Cookies Disclaimer Copyright
© 2015 - 2018 North Border Tech Training All rights reserved