Patch Background
The patch background adjusts an image automatically to the required size without using scaling. It uses a nine patch pattern:
- 4 corners (1-4) are painted normally
- The top and bottom patches (5, 6) between the left and right corners are tiled horizontally
- The left and right patches (7, 8) between the top and bottoms corners are tiled vertically
- The center patch (9) is tiled both horizontally and vertically
Design
The following source background is used within the app to create differently sized backgrounds:
| source | small | large |
|---|---|---|
 |
 |
 |
.itemMain {
margin: 2px;
padding: 5px;
padding-bottom: 14px;
font-color: fontColor;
font-style: bold;
font-size: small;
icon-image: url( icon%INDEX%.png );
icon-image-align: top;
layout: expand | center | vertical-center;
min-height: 30%;
}
.itemMain:hover {
font-color: #fff;
background {
type: patch;
image: url( glass-button.png );
left-width: 14;
top-height: 14;
right-width: 14;
bottom-height: 14;
}
}
CSS attributes:
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| image | - | image-url | The 9-patch source image | 2.3 |
| left-width | 0 | int | The width of the corners on the left side in pixel | 2.3 |
| top-height | 0 | int | The height of the corners on the top side in pixel | 2.3 |
| right-width | 0 | int | The width of the corners on the right side in pixel | 2.3 |
| bottom-height | 0 | int | The height of the corners on the bottom side in pixel | 2.3 |
| transparent-fill | false | true, false | Set to true when the center region should not be tiled at all | 2.3 |
Performance Considerations
Patch background images should not be too small, otherwise they take too long to paint at least for large areas. An example should clarify this:
consider an area of 10x10 pixels that should be covered by the center patch (9). If the center patch is 1x1 pixel large, 100 paint calls are necessary.
When the center patch is 5x5 pixels, only 4 calls are necessary.
Performance should always be considered in these circumstances:
- Patch backgrounds are used for many items, or
- A patch background is used for large area, e.g. a screen background