Thursday, 9 August 2012

HOW TO CREATE A SPLASH SCREEN IN ANDROID APPLICATION

Step 1:

Create a project in Eclipse
Project name : SplashScreen,
Application Name : SplashScreen,
Package Name : com.myapps.splashscreen ,
Create Activity : Leave it as it is,
AVD : 2.3 gingerbread,

Beginners : Refer Here...

After creating a project, Here’s what your package should look like.
Figure 1:



STEP 2:

Next we have to add one more activity in our package, so that we can make a transition from splash screen to main page(Activity).
So..
Add a new Activity named WelcomeActivity and create a new layout XML file named welcome.xml.

Then configure the SplashActivity to use the main.xml file for it’s layout and the WelcomeActivity to use welcome.xml.

So here i ill show how to do that..

Adding WelcomeActivity.java

Right Click the package com.myapps.splash -> New->Class..
Name : WelcomeActivity ,
Then, Click Browse as shown below.

Figure 2

Choose a Type : android.app.Activity (Simply type 'Activity' in the box, and you will get many list of options below, click on Activity). 
Click OK.
Click Finish.

Now you can see WelcomeActivity.java  added in the package.

Lets add the welcome.xml file (UI for WelcomeActivity.java).

Adding welcome.xml

 Open res Folder, Right click on Layout Folder -> New-> Android XML File..

 Figure 3:

Type in,
File : welcome (all in small letters),
Click Finish.

Figure 4:
You would Probably get a screen like this, this is nothing but a graphical view of your UI, click on the welcome.xml tab for xml view.


Next Step..

Step 3:

Configure the WelcomeActivity to use the welcome.xml file for it’s layout.
open WelcomeActivity.java,

Your code should look like this,
package com.myapp.splash;

import android.app.Activity;
import android.os.Bundle;

public class WelcomeActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
   setContentView(R.layout.welcome);
 }
}

 
Your class must extend 'Activity', (refer Activity Here).

if your code doesn't have oncreate method then, just after the opening parenthesis type oncreate and hold ctrl and press space bar (ctrl+spacebar)
you will get a screen like this

Figure 5:

Click on the 1st Oncreate(bundle).
next..
After "super.onCreate(savedInstanceState);"

type "setContentView(R.layout.welcome);"

& save it.


STEP 4:

Next ,
Setting up the xml for UI purpose..
Go to layout->and open the main.xml..go to XML Layout.
And copy paste the below xml

main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" android:layout_gravity="center_vertical|center">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome"
        android:textAppearance="?android:attr/textAppearanceLarge" android:layout_gravity="center_vertical|center"/>

        <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="To"
        android:textAppearance="?android:attr/textAppearanceLarge" android:layout_gravity="center_vertical|center"/>
    
            <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Development"
        android:textAppearance="?android:attr/textAppearanceLarge" android:layout_gravity="center_vertical|center"/>
        
    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_gravity="center_horizontal"/>

</LinearLayout>

Figure 6:
main.xml will look like this.

Similiarly do it for welcome.xml

welcome.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="WELCOME TO MAIN ACTIVITY"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>


STEP 5:

Once your project is set up, open SplashActivity.java and we’ll make a few changes. Add a variable named splashDelay to hold the length of time to keep the Splash Screen up. Then we’ll use a Timer and a TimerTask to help us schedule the transition to WelcomeActivity. Note that before starting the new Activity we call the finish() method on the SplashActivity. This prevents the user from being able to use the back button to return to this Activity.

Open src-> com.myapps.splash-> SplashScreenActivity.java file 

SplashScreenActivity.java
package com.myapp.splash;

import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.SlidingDrawer;

public class SplashScreenActivity extends Activity {
    private long splashDelay = 5000; //5 sec's
 
 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        TimerTask task = new TimerTask() {
   
   @Override
   public void run() {
    finish();
    Intent mainIntent = new Intent().setClass(SplashScreenActivity.this, WelcomeActivity.class);
    startActivity(mainIntent);
    
   }
  };
  Timer timer = new Timer();
  timer.schedule(task,  splashDelay);
    }
}

Copy paste.
if the project requires import..example for Timer Class..
just hold and press Ctrl+Shift+ O for required imports


STEP 6:

Finally, Add entry in android manifest file.
we need to make two changes to AndroidManifest.xml. Set the application element’s theme attribute to Theme.NoTitleBar to get rid of the Title Bar and on the SplashActivity’s activity element, set the screenOrientation attribute to portrait to fix the SplashScreen to portrait layout.

NOTE : Please dont forget to add entry of new class "WelcomeActivity.java"

Open AndroidManifest File and Edit it
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amyapp.splash"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar" >
        <activity
            android:name=".SplashScreenActivity"
            android:label="@string/app_name" 
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity 
            android:name=".WelcomeActivity">
            
            
        </activity>
    </application>

</manifest>


Run the project..and you will see result like this
Congrats you made it!! :)
Thankyou
 

No comments:

Post a Comment