Making a Splash! Android Development – My First Apps (Part 3/7)
Android Development – My First Apps Chapter 3
Making a Splash!
As literal as the chapter title is it’s also somewhat allegorical. I am, of course, referring to making a splash screen for your apps but I could be meaning making a splash in the Android Marketplace (which you will want to do right?).
A splash screen should look appealing, show some basic info like version number and copyright owners and probably show your company logo. Now that you have the basic elements in your head you can start thinking about the next step: the use for it. You may think that is a dumb thing to think about – obviously the use is showing it before your app appears, isn’t it? Well not necesarrily. Think about where you see splash screens everyday; when you turn on your computer/phone/tablet you get the OS splash screen, Nero and Photoshop have splash screens. Notice a trend there? Big programs use splash screens for a multitude of reasons; getting their logo out there, displaying copyright info, telling the user the program is starting/doing something and many others. A common element to all of these splash screens is that they all display during loading right? That is the main reason for a splash – to cover up loading time. An OS takes a long time to load so it gives you a full screen splash during the initial load, and if your app does anything during initial load that takes longer than, say, 100-200ms you might want to show a splash screen to tell the user that the app is at least doing something after they have clicked.
If your app takes some time to start but the user sees nothing happen then they may get impatient and keep clicking on the app making their phone crash (and they won’t want to use your app if it crashes their device) or they may just give up waiting and not use the app at all. If your app shows a splash screen when it’s clicked and then goes on to load up the app the user at least has a splash screen to look at lets your users know the app is doing ‘something’.
Enough with the theory of things, lets get into the practical element. The design we will be using is:
- Logo in the centre of screen.
- Name below the logo.
- Version number at the lower right of the screen.
We can use a RelativeLayout to align everything like described above, so there are no layout issues to be encountered here. Layout is a simple file like this:
[codebox 1]
The layout contains 3 items, 1 RelativeLayout and 2 TextViews. The RelativeLayout allows us to position our first TextView right in the centre of the screen and place our version code in the bottom right corner easily. This could be performed with padding, gravity and additional layouts but why over complicate things? Our TextViews have nothing special done to them. The addition of the android:drawableTop is the least commonly used tag that I notice there. It’s not that it’s barely used it’s just that it’s the least used from the sample layout. All the tag does is adds a @drawable above the text – the image becomes part of the TextView.
We also need a logo to place in the centre of our splash screen. The logo I am going to use was created for me to use in my own apps in this post here: How to create a basic Logo design but you will probably want to use your own logo. Feel free to use my logo if you want tho, I’ll post a link to the files at the bottom of the page.
The logo you will want to be a verity of sizes so it looks right on as many different devices as possible. To do this you will want to scale your image, start with at least 500px x 500px because that’s what size that you are asked for when uploading your app (Google Play uses the 500px x 500px version on the download page). I have used the launcher icon sizes (as well as starting with a 500px image) defined by Google to keep my logo in scale on different screen sizes. The sizes defined in the guidelines are: 32 x 32 48 x 48 72 x 72 and 96 x 96.
Once you have your layout and logo completed your done, well almost. You still have to add some code here to get your version code from the manifest file. That’s where the version code comes from but you might just want to hard code the version into the splash screen. Alternatively you could put whatever you want in there and not bother with the version code, I just think it’s a good idea to give the user a way of telling what version they have.
The code you needed I found on Stack Overflow and as is commented on in the page that a try-catch clause for a NameNotFoundException is needed before it will compile.
Here’s the whole code portion of our splash screen. We will need a way to inform the splash screen of the progress of your app loading but that is a little complicated for this chapter (especially before you know about broadcast receivers) but we will come back to that when we start wiring our activities together to create our first apps. Right now the only thing added to the code is the way to pull the version number from the manifest file.
[codebox 2]
What this code does is create our SplashScreenActivity extending the default Android Activity. Imports our required packages which are :
import android.app.Activity;
import android.content.pm.PackageManager.NameNotFoundException;
import android.os.Bundle;
import android.widget.TextView;
Then we need to override the onCreate method to tell the app what we want it to do when the app is first ‘created’ at launch. Within the onCreate method we use a try-catch clause telling Java that we know that a NameNotFoundException can occur in the code within the try-catch and we have created a way of dealing with it by dropping out on error and printing the stack trace.
That’s all you need to create your splash screen, you can simply copy and paste this into your app if you want.
Next time we look at Wiring It Up Your Way.
