Monday, 21 April 2014

Android Beginner: Creating Splash Screen

Android Beginner: Creating Splash Screen

The Full Series of Android App Developemnt

In the next couple lessons, we will learn to create a simple android application consists of a splash screen, a button and with sound effects enabled. So, let’s started!

Getting Started

We are assuming that you have necessary tools installed, such as eclipse editor and Android SDK. If you haven’t already, please download all the tools athttp://developer.android.com/sdk/index.html

Step 1: Creating Android Project

We start the tutorial by creating an Android project using eclipse editor. Choosing File -> New Android Project, then insert all information as sown below:
  • Enter “myApp” for the project name
  • Choose “Create new project in workspace”
  • Please choose your build target as Google APIs Level 8 (Android 2.2)
  • Enter “myApp” for the application name
  • Enter “com.tutorial.myapp” as package name
  • Check the box for “Create Activity” and name it “MainActivity”

Step 2: Setting Up Resources

Next, we will need to create a splash screen image and place it under the /res/drawable-mdpifolder. You can supply multiple densities of images for supporting multiple screens. But in this case, we just supply to medium dpi devices is enough.
Here is the image that we will use for the splash screen.
splash image320px*480px

Step 3: Creating A Layout For Splash Screen

As you can see in the /res/layout folder, the “main.xml” is the default layout file automatically created when an Android project is created in eclipse. For this case, we will reserve this main.xml for our app’s main screen, which we will use it in the next lesson. So we will create a new layout named “splash.xml” for our splash screen. Do this by choosing File -> New -> Android XML File. Then insert the information as shown below:
  • Enter splash.xml for the File name field
  • Choose layout for the type of resource
  • Choose Linear Layout as the root element for the XML file
Press finish button and you will see a new splash.xml file is place under /res/layout folder. Open the splash.xml and switch the view mode to “splash.xml” if your current xml view mode is switched to Graphical Layout. Then insert the splash screen image that we stored under/res/drawable-mdpi into the XML file using ImageView.
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
   
  <ImageView
       android:src="@drawable/splash"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:scaleType="fitXY"/>
</LinearLayout>

Step 4: Configuring the Initial View

Before we start to configure our app’s initial view, let’s talk about the activity life-cycle of an Android application. Following is the diagram that shows all statse of the entire lifetime of an activity.
onCreate() is fired when an app is started, so in this tutorial, we will setup all necessary resources in the onCreate() state.
If you want learn more about Activity, please log on to Android Developer Website.
Ok, let’s start to configure our splash screen. Do this by open up our “MainActivity.java” file which located in /src folder. Inside the onCreate() function, we change the “setContentView(R.layout.main)” to the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
package com.tutorial.myapp;
 
import android.app.Activity;
import android.os.Bundle;
 
public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);
    }
}
Save your code and run your code by choosing “Run -> Run”. Then an Android Virtual Device will launch and run the code that we just wrote. You will see our app showing the splash screen. You may wondering why the splash screen stop and hang there, this is because we haven’t tells Android what to shows after the splash screen!
So, let’s specify how long should we display the splash screen and what to show after next.
We will use a Thread to execute the duration of the visibility of splash screen. A thread is a concurrent unit of execution. Usually developer launch additional thread for specific purpose. Here is how we write a Thread to handle the duration of the splash screen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package com.tutorial.myapp;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
 
public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);
         
        Thread logoTimer = new Thread() {
            public void run(){
                try{
                    int logoTimer = 0;
                    while(logoTimer < 5000){
                        sleep(100);
                        logoTimer = logoTimer +100;
                    };
                    startActivity(new Intent("com.tutorial.CLEARSCREEN"));
                }
                 
                catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                 
                finally{
                    finish();
                }
            }
        };
         
        logoTimer.start();
    }
}

Description:

  • Line 4: Import library of Intent for us to start a new Activity later
  • Line 14-37: Start a new Thread named “logoTimer”, and we instruct the timer to shows the splash screen for 5 seconds (5000 milliseconds). After 5 seconds, we tells Android to start a new Activity named “CLEARSCREEN” via Intent*. This new Activity will displays our app’s home screen right after splash screen.

* Introduction to Intent

Intent is just what it sound like, a way for us to declare to the Android system what you INTENT TO DO. This can be starting a specific activity, or it can be just asking Android system to find some program that can perform an action.

Step 5: Creating App’s Home Screen

Next, we need to create a Java class to handle the app’s home screen. Do this by right click /srcfolder, “New -> Class”, and insert the following information:
  • Enter “com.tutorial.myapp” for Package
  • Enter “myMainScreen” for Name
  • Choose “public” for Modifiers
Press “Finish” button, then you can see a new Java class is created and placed inside /src folder. Open it up and modify the code as same as below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.tutorial.myapp;
 
import android.app.Activity;
import android.os.Bundle;
 
public class myMainScreen extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
 
}
As you can see above, this class will look for “main.xml” and set it as its layout. We will insert more codes into this class for setting up the app’s home screen in the next lesson.

Step 6: Configuring AndroidManifest XML

Lastly, we need to tells Android to start a new Activity based on the request named “CLEARSCREEN”, which we have specified in the “MainActivity.java” class. The AndroidManifest presents essential information about the application to the Android system, information the system must have before it can run any of the application’s code.
Let’s open up the AndroidManifest.xml and insert the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
      package="com.tutorial.myapp"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
         
        <activity
            android:name=".myMainScreen"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.tutorial.CLEARSCREEN" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
 
    </application>
</manifest>

Description:

  • Line 15 – 21: We receive the instruction named “CLEARSCREEN” from “MainActivity.java” class, then we tells Android system to start a new Activity and class named “myMainScreen”. This will display a app’s home screen after the 5 seconds of splash screen.
Save your code and run in the Android Virtual Device (emulator). Here is our application running in the emulator.
Final Result

Conclusion

In this tutorial, you’ve learned how to create a application consists of splash screen and other activities on the Android platform. You learn about Android App’s Activity, creating Java class, specifying XML layout in Java class and AndroidManifest.xml You’ve only scratched the surface of Android development. Remember to check out all the other great tutorials on onlyMobilePro.com to dive deeper into Android development.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)