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;
Comments
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: http://9patch.fokkezb.nlmunesh parmar
Hello sir
I am using android tablet and now I want to change the screen splash and logo image of my tablet so can you help me . how to possible it
thanks & regards
Munesh parmar
jnusca@metroland.com
This guide didn’t work at all for me and adding a theme.xml to your values folder will break the app and it won’t compile. This guide int he Appcelerator docs worked for me: http://docs.appcelerator.com/platform/latest/#!/guide/Icons_and_Splash_Screens-section-29004897_IconsandSplashScreens-Androidsplashscreenconsiderations
malcolmhollingsworth
jnusca@metroland.com – It was written 18 months ago and before Appcelerator made fundamental change to the file name used in place of theme.xml. So if this left you confused I apologise but keep in mind things change and the dates of articles are important factors when seeking guidance.
I am disappointed that you feel the entire article was a total waste as the only issue was the use of the filename “theme.xml” which Appclerator.has now made a reserved name when previously it was there required name for such purposes.