Wailing of a Software Engineer: Manga Mobile Coding Series : Membuat Splash Screen

Yup, akhirnya punya cukup waktu luang untuk menuliskan artikel ini. Pada artikel ini saya akan memaparkan beberapa hal tentang bagaimana cara membuat Splash Screen.

Bagi anda mau memulai membuat project dan melakukan setting emulator, anda bisa melakukannya disini.
Pada project kali ini, saya menggunakan konfigurasi berikut

Project Name = MangaMobile
Build Target Android 2.1 yang memiliki API version 7
Application Name = MangaMobile
Package Name = gogo.mobile.mm
Tidak membuat Activity (checkbox Create Activity tidak dicentang)
Min SDK Version = 7

Kurang lebih akan muncul tampilan seperti berikut di Project Explorer anda (bila anda tidak bisa menemukan Project Explorer, klik Window > Show View > Project Explorer) :

Pada tahap ini, anda telah berhasil membuat sebuah project yang tidak bisa dijalankan (karena tidak ada Activity yang bisa dijalankan). Sekarang buka src, dan pada package gogo.mobile.mm, klik kanan > New > Class. Akan muncul tampilan seperti berikut

Yang paling penting untuk dilakukan adalah mengisi nama kelas di Name dan mengosongkan Superclass. Lalu langsung saja klik Finish. Kelas yang kita buat ini tidak akan langsung menjadi sebuah Splash Screen.

Sekarang kita memerlukan gambar untuk Splash Screen. Saya sarankan resolusi gambar tersebut adalah 320x480 seperti ini :

Simpan gambar ini di folder res > drawable-mdpi > splash.png (nama file gambarnya terserah, tapi pastikan hanya terdiri dari huruf kecil dan garis bawah). Kembali ke Eclipse, klik kanan pada project anda (pada kasus ini : MangaMobile) lalu pilih Refresh. Bila gambar anda berhasil dimasukkan, file tersebut akan muncul di folder res > drawable-mdpi pada project dan muncul juga di gen > gogo.mobile.mm > R.java > R > drawable > splash sebagai sebuah pointer ke resource gambar splash.png.

Setelah memiliki gambar untuk splash dan Android Project telah mendeteksi gambar kita, kita perlu membuat layout. Lihat pada Project Explorer, folder res > layout > main.xml. Akan muncul tampilan seperti layar HP. Saya tidak terlalu suka berkutat ditampilan ini karena tidak terlalu fleksibel. Pada bagian bawah, klik main.xml. Akan muncul tampilan XML. Ganti isi XML menjadi seperti berikut

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:gravity="center"
    android:id="@+id/main_layout" 
    android:background="@drawable/splash">    
</RelativeLayout>

Pada baris pertama <?xml version="1.0" encoding="utf-8"?> digunakan untuk mendefinisikan tipe XML yang digunakan. Pada Splash Screen kita menggunakan layout RelativeLayout (layout akan dibahas di post lain). Layout ini akan memenuhi seluruh layar (karena android:layout_width dan android:layout_height bernilai fill_parent yang artinya ia akan memenuhi seluruh parent-nya dimana parent-nya adalah layar HP itu sendiri). Yang paling penting disini adalah properti ID dan Background. Disini ID nya saya set dengan main_layout sementara Background nya saya isi dengan splash (sesuai dengan nama file yang kita masukkan di res > drawable-mdpi).

Terakhir, kita tinggal memasukkan kode yang diperlukan di SplashScreenAct.java. Tambahkan kode sedemikian menjadi seperti berikut :

package gogo.mobile.mm;

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

public class SplashScreenAct extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Thread timer = new Thread() {
            @Override
            public void run() {
                long startTime = System.currentTimeMillis();
                // lakukan sesuatu pada saat memulai game
                
                long now = System.currentTimeMillis();
                if (now - startTime < 5000){
                    try {
                        sleep(5000 - (now - startTime));
                    } catch (InterruptedException iEx){
                        
                    }
                }
                
                SplashScreenAct.this.finish();
                //kita belum akan membuat activity baru disini setelah splash screen selesai
                //startActivity(new Intent(SplashScreenAct.this.getApplicationContext(), MainMenuActivity.class));
            }
        };
        
        timer.start();
    }
}

Hal yang perlu diperhatikan adalah, kelas ini sekarang meng extend Activity. Saya sarankan untuk melakukan segala sesuatu dengan Ctrl + Space. Sebagai contoh tulis Activi lalu pencet Ctrl + Space, lalu pilih Activity pada intellisense. Hal ini akan membuat Eclipse secara otomatis mengimport segala hal yang diperlukan untuk membuat Activity.

Pada Activity, kita harus selalu mengimplementasikan onCreate(Bundle savedInstanceState)(cara paling mudah adalah dengan menulis onCreate, lalu pencet Ctrl + Space, lalu pilih onCreate yang sesuai pada intellisense). Jangan lupa untuk menambahkan super.onCreate(savedInstanceState) karena tanpa sebaris kode tersebut Activity tidak akan bisa di-start. Yap, pada tahap ini kita sudah membuat sebuah Activity yang bisa dijalankan. Tapi bila kita mencoba menjalankan project ini, tentu akan terdapat error.

Lalu untuk membuat Activity ini menggunakan layout yang telah kita buat, kita harus menambahkan setContentView(R.layout.main) dimana main disini adalah nama layout yang kita buat (main.xml).

Berikutnya kita membuat Thread yang akan melakukan sesuatu selama 5000 millisecond. Dan setelah 5000 millisecond, Thread ini akan menutup SplashScreenAct dan akan membuat Activity baru. Namun pada tutorial ini pembuatan Activity baru tidak akan dibahas. Yap, Splash Screen sudah selesai dibuat.

Apakah program ini akan berjalan? Belum! Kita perlu memberitahukan Android bahwa aplikasi kita memiliki Activity bernama SplashScreenAct dan aplikasi kita dimulai dari sana. Pada Project Explorer klik pada AndroidManifest.xml. Dan lagi-lagi pencet AndroidManifest.xml pada bagian bawah jendela. Pada tag <application>, edit kodenya sehingga menjadi seperti berikut

<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">
    <activity android:name=".SplashScreenAct" android:screenOrientation="portrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        </activity>    
</application>

Hal ini membuat Android mengetahui bahwa aplikasi kita dimulai dari SplashScreenAct yang bisa distart dari launcher (icon yang kita klik untuk memulai aplikasi).

Yap sekarang Splash Screen kita telah selesai. Silakan dicoba :