9 Patch Images Using Android Asset Studio

9 Patch Image

 

9 Patch Images are used where a raster image is required to expand according to the content without getting distorted. For e.g. the chat boxes or bubbles, if they have a sharp corner they will enlarge just fine but if they have rounded corners then they will distort badly when enlarged.

Once again here Android Asset Studio written by Google’s Design Advocate Roman Nurik comes to the rescue.

      Technical information about 9 patch images.

  1. They are raster images.
  2. For them to work they need to be exported in 24-bit png with 8-bit alpha with an extension .9.png.
  3. These images are surrounded by 1 px thin black line that defines what areas are need to be stretched and in what area the content needs to be put.
  4. The line on left and top defines the area to be stretched and the lines on the right and below defines the content padding.

 

Follow the steps mentioned below to create your very own 9 patch image.

  1. Head over to Android Asset Studio and click on the link that says Simple nine-patch generator.
  2. Set the options as illustrated in the screenshot below.

9 patch generator

 

Sometimes the optimization isn’t perfect. The same 9 patch images can be modified and tested in real time from inside of Android Studio.

 

 

Vikas Kumar

© Copyright 2015-2019 Oodles studio . All rights reserved.