Membuat Splash Screen

Hallo teman-teman developer!

Untuk edisi kali ini, saya akan mencoba membuat suatu splash screen sederhana di Android. Sebelumnya kita perlu tahu apa itu Splash Screen. Sebenarnya Splash Screen sangat sering digunakan di beberapa apps sebagai activity yang pertama kali diload. Biasanya Splash Screen memuat logo dari developer, atau brand name dari apps yang dijalankan.
Sebagai contoh sederhana, apabila kita mengunduh aplikasi di facebook di Android, pada saat dijalankan dia akan menampilkan logo facebook selama beberapa detik, dan kemudian menghilang dan diikuti dengan content yang sebenarnya.
Untuk persiapan membuat Splash Screen, kita harus menyiapkan dua buah Activity. Activity yang pertama adalah Splash Screen itu sendiri yang akan diload pertama kali, kemudian Activity yang kedua adalah real activity. Dalam kesempatan kali ini, saya akan mencoba membuat contoh Splash Screen yang akan menghilang setelah 3 detik, kemudian menampilkan activity lain, yaitu satu activity bertuliskan Hello World.

Langsung saja kita create new project yaaa...
(Untuk langkah-langkahnya dapat dilihat di artikel saya sebelumnya)

Saat kita create new project, biasanya file MainActivity akan otomatis dibentuk. File ini akan kita simplify isinya menjadi sebagai berikut:

package ngodingandroid.splashscreen;
import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Berikutnya, kita akan membuat class baru yaitu SplashScreen.java dan kita perlu menuliskan kode-kode program pada file SplashScreen.java:

package ngodingandroid.splashscreen;


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class SplashScreen extends Activity {

    // Splash screen timer
    private static int SPLASH_TIME_OUT = 3000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        new Handler().postDelayed(new Runnable() {

            @Override
            public void run() {
                Intent i = new Intent(SplashScreen.this, MainActivity.class);
                startActivity(i);
                finish();
            }
        }, SPLASH_TIME_OUT);
    }
}

Nah sekarang masalah layoutnya, kita akan membuat file XML untuk menata interface dari Splash Screen:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient_background" >

    <ImageView
        android:id="@+id/imgLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/logo" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textSize="12dp"
        android:textColor="#454545"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:text="ngodingandroid.blogspot.com" />

</RelativeLayout>

Yang perlu diperhatikan, kita harus menyiapkan file gambar yang akan di sisipkan di folder drawable dengan resolusi yang berlainan sesuai foldernya. Dalam hal ini saya menggunakan file dengan nama logo dan gradient_background untuk backgroundnya.

Dan tentu saja kita juga mempunyai file XML untuk activity yang kedua yang akan diload setelah Splash Screen menghilang. File XML ini akan digenerate sendiri oleh Eclipse

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="ngodingandroid.splashscreen.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

Dan akhirnya kita perlu memodifikasi isi AndroidManifest sebagai berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ngodingandroid.splashscreen"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name=".SplashScreen"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Black.NoTitleBar" >           
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

<!-- Main activity -->
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
        </activity>       

    </application>

</manifest>

Berikut tampilan dari SplashScreen nya:

Demikian sedikit informasi tentang cara membuat Splash Screen yang bisa kita gabungkan dengan aplikasi yang kita buat. Semoga bermanfaat.

Oleh: Wahyu Kurniawan

Sumber: androidhive.info