A very handy, but little advertised feature
introduced in MAF 2.2.0 is the ability to use 9-patch splash screen images for
By using 9-patch splash screen images, you
are able to define how your splash screen images will stretch to fit all
Android device screens.
You define which area(s) of the image can
be stretched, whilst ensuring that other areas such as those containing a logo
or text will remain a constant size.
is a 9-patch image?
A 9-patch image is a standard PNG image
that includes an extra 1-pixel wide border and is saved with a .9.png extension.
The border is used to indicate which
area(s) of the image can be stretched and optionally which area(s) of the image
are fillable (i.e. can be overlaid with text when the image is used as a
background image for an Android View
object, such as a Button).
To start with, all border pixels must be
completely transparent. You then
indicate the stretchable and fillable areas by adding black pixels to the
corresponding border areas.
For the purpose of a splash screen image,
you only need to define the stretchable areas of the image. The top and left borders are used for this
purpose. A black pixel in the top border
row indicates that the image pixels in that column may be stretched
horizontally. A black pixel in the left
border column indicates that the image pixels in that row may be stretched
The following example 9-patch image has a blue background, white log and red box. I've doubled its size here so you can more easily see the black pixels in the top and left borders.
The black pixels in the top and left
borders ensure that only the blue background portion of the image will be
stretched when the available display area is larger than the image size. The center logo and the outer red box will
For more information, the official Android
documentation on 9-patch can be found here
and a really good tutorial can be found here.
a 9-patch splash screen image
The best place to start is with your
existing set of PNG splash screen images.
Since 9-patch images can only stretch, not
shrink, ensure that you start with an image size equal to or smaller than the
size of the smallest area in which you expect your app to be launched (remember
that some Android versions support launching apps into a window that does not
fill device’s entire screen).
For best results with images that contain
logos and text, create a separate 9-patch image for each screen density. You may find that a single 9-patch image
works in both portrait and landscape mode for the specified density, which will
reduce the number of splash screen images you need to create and maintain.
The Android SDK provides a WYSIWYG editor
called draw9patch that enables you to create a 9-patch image from an existing PNG
image. It is very easy to use and dynamically
shows you how your image will stretch. More information on this tool can be found here.
If for some reason you would rather use
your favorite image editor, remember the following 9-patch image constraints:
- The border must be only 1-pixel wide and must surround the entire image, even if you don't wish to define the fillable area. Thus a 100x100 pixel image becomes a 102x102 pixel 9-patch image.
- The border must consist entirely of only fully transparent or solid black pixels. A slight difference in color or alpha level will fail silently at runtime.
- The image file must have a .9.png extension.
9-patch splash screen images in your MAF app
Having created 9-patch versions of your
splash screen images for each Android screen density and orientation, copy them
into your MAF project and reference them in your Android deployment profile.
By using 9-patch splash screen images,
you are able to define how your splash screen images will stretch to fit all
Android device screens or windows in which your app is launched.
Creating 9-patch splash screen images from
your existing PNG splash screen images is simple using the draw9patch tool
available in the Android SDK.
above information is only relevant to Android, since iOS does not support 9-patch.