What is the problem?

Creating Android splash screens can be more complicated and time consuming than their iOS counterparts due to the wide variety of screen ratios.

What is a “splash screen”?

A splash screen is the screen that appears after a user starts the app and before the app has loaded. Splash screens are sometimes called “start-up screens”.

What is a 9-patch image?

In the simplest terms a 9-patch image is the same as any other image but you include extra information within the image to define what parts can be stretched and what remains as it was originally designed.

iOS does not support the use of 9-patch images. One reason for this is the reduced number of variations of sizes.

Can you use 9-patch for other things?

A 9-patch image can be used for much more than splash screens – but that is for another day. Today we are focusing on splash screens.

Why use a 9-patch image for splash screens?

One huge benefit of the 9-patch image is the ability to define what can be stretched. This way you can have a content appear without distortion whatever aspect ratio the target device screen has.

Examples of a simple 9-patch image

Original logo

When used as a portrait splash screen

When used as a landscape splash screen

What you need to know to use 9-patch splash screens

In order to use 9-patch splash images within your app you need to change a few things, including where the files are located and you need to tweak a few settings files.

How do you create your images?

There are two ways, this depends on what you are used to;

• Using the 9-patch tool from Google

If you plan on using the Google tool then the link above gives you the information you require.

• Use your own favourite graphics application; Photoshop for example.

Using your own graphics tool;

• Expand the canvas by one pixel on each border and leave it transparent
• Place a black pixel or pixels where the stretchable area should be on the left and top edges only

What do you actually have to do to the image?

The very simple idea behind the 9-patch image is that you define the stretchable areas that can increase or decrease in size when the aspect ratio changes for each device with the original content area being distorted. To do this you mark a single dot or more on the left most edge of the image (in the extra transparent border you just created) to show that this horizontal section can be stretched if required. You do the same for the vertical line by marking the top section.

You may choose to add a single pixel on the left and the right – but this means just those two horizontal and vertical bars will stretch. But if you add two dots on the left (say top and bottom) and two on the top (say left and right) then the central content area remains the same size but the canvas area stretches.

Here is the example from above as we build it up.

• Our original logo

• We expand the canvas one pixel and add our dots as mentioned above

• This view shows the bars that can stretch based on those dots

The green bars are those things that will stretch – you should now see how the dots tell the 9-patch what it can stretch. If you take another look at the portrait and landscape images above you will see how the stretching actually worked. The logo remains exactly the same original size – but the canvas has expanded to fill the remaining space.

• You should create one of these files for each density you plan to support – making each image you start with the correct ratio (75%, 100%, 150%, 200%, 300% and so one).

What files should you edit

First you need to create a new set of folders if they do not currently exist;

{appname} relates to your app as follows

• {appname}/resources/ (non-alloy apps)
• {appname}/app/ (alloy apps)

These are the folders both alloy and non-alloy apps;

• {appname}/platform/
• {appname}/platform/android/
• {appname}/platform/android/res/
• {appname}/platform/android/res/values/
• {appname}/platform/android/res/drawable-ldpi/
• {appname}/platform/android/res/drawable-mdpi/
• {appname}/platform/android/res/drawable-hdpi/
• {appname}/platform/android/res/drawable-xhdpi/
• {appname}/platform/android/res/drawable-xxhdpi/

You need to create a new file called theme.xml in the following location

• {appname}/platform/android/res/values/theme.xml

The contents should be as follows;

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Titanium" parent="android:Theme">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:windowNoTitle">true</item>
</style>
</resources>

Example maximum file dimensions for each density (change to suit your own needs)

• ldpi = 242×322
• mdpi = 322×482
• hdpi = 482×722
• xhdpi = 642×962

Where to store these files

Inside each of the density folders (drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi) that you just created you place an image with the following name splash.9.png.

Housekeeping

You should remove any existing Android splash screen images within the Android folders from the following folders and sub folders;

Non-alloy apps

• {appname}/resources/android/

Alloy apps

• {appname}/app/assets/android/

You should then perform a project clean before running your app again.

• In studio
• Select your project
• Menu > Project
• Sub menu > Clean
• Choose your project
• Confirm

If you use the CLI – you already know how to clean a project.

Summary

Using a 9-patch can benefit your project due to the size and convenience factors. Using one does not however suit all apps – so use as appropriate for your app.

UPDATE

I should have mentioned the great conversion service provided by Fokke Zandbergen. If you’re used to using backgroundTop/LeftCap for iOS, you can convert the image and these 2 properties to a 9-patch image using;

• 9patch.fokkezb.nl

Malcolm Hollingsworth

Owner of Core 13 Ltd a UK based mobile app development agency. Malcolm is affectionately known by Appcelerator and the big wide world as "The Oracle". With 25 years commercial software development experience from desktop apps to web sites for single users to large enterprises.\n You may have seen some of the many contributions provided within the Titanium Q&A.