A common need for a mobile
app is a splash screen (which typically fill the whole screen) that
contains a logo and that adapts itself to different screen
resolutions and form factors without distorting the logo.
Google has a PNG format
called 9-patch that allows to stretch just the sides of an image for
Android apps, as for a logo, or, else, just the center (for instance,
a button whose inside stretches leaving the corners intact).
However, I took me quite a
while to figure out how to create 9-patch images that leave a logo in
the middle intact (which is probably not surprising with Google
things, that tend to lean on the cryptic side).
You need to start with a
PNG image with some room around the logo in the center, as Android is going to
stretch the “margins” (fill), if you will.
Them, open it with
draw9patch.exe, included in the Android SDK.
You can find general info
easily on the web, but the trick here is that the TOP and LEFT lines
delimit the margins, while the lines at the BOTTOM and RIGHT define
the object in the middle.
It should be obvious from
looking at the screen capture.
There is also an online
utility called Simple Nine-patch Generator in Google's Asset Studio
that should allow for the creating 9-patch versions of a number of
sizes of a given image in one go, but it does not work for this case
as it can only do a single “stretch regions”, although the logo
itself can be selected appropriately with the “content padding”
area. The new “Optical bounds” feature only works for Android
4.3+ and is used for aligning, which is not of use for a splash
screen. So you should make the largest image in draw9patch and then generate the other sizes with 9patch-resizer.
