Smashing Android UI

Chapter 14: Scalable Graphics

Graphical components are the most difficult ones to scale correctly of all of the different screen sizes and densities that Android devices have. There are many types of graphics that cannot be stretched or resized without destroying the look. Anything with gradients, diagonal lines, or text will look weird when stretched or scaled even a little bit.

Take a look at the example background in Figure 14-1. Having diagonal lines combined with a circular gradient would be a nightmare scenario if you could only use bitmap graphics. How would you create that bitmap? The aspect ratio must be the same because even a small distortion will make the circular form seem wrong. Scaling the image will not work either, because the spacing between the lines would then be wrong. You could provide one very large bitmap that would fit to the largest display. However, in addition to this looking bad on the smaller screens, the large bitmap would cause performance problems in your app due to its larger memory consumption.

Figure 14-1: The round gradient with its diagonal lines is an example of a graphic situation that would be impossible to provide as a single file in a scalable manner.

Fortunately, there are a lot of useful tools and techniques that allow you to create complex graphics that are scalable. This chapter explains how and when to use them.

Nine-patching

Nine-patching ...