InterDash Blogs

Sharing experience

Draw9Patch

Break an image into 9 areas and that is a Draw9Patch image. Below is an example.

 

The way it works is

  1. Four corners do not scale.
  2. Top and Bottom scale horizontally
  3. Left and Right sides scale vertically
  4. Center area scales both vertically and horizontally

Why would you want to do this?

In this example framing an object in rounded corners is demonstrated. Corner size is largely dictated by the size of the display, not the size of the content. The corner shape shouldn’t change just because the content is larger or smaller. But the button does need to grow or shrink, so the sides are elastic in only one direction.

Scaling 100% of the image for the button would create larger corners. The Draw9Patch image is the solution. A button created in this way will look good regardless of the size of the content because the corners remain a consistent size for the layout.

Updated: June 5, 2014 — 9:37 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

InterDash Blogs © 2014 Frontier Theme