(Tutorial Android) Membuat Splash Screen


Apa itu splash screen? Splash screen itu loh yang muncul biasanya ketika pertama kali membuka app, atau bisa disebut intro sebuah app.

Segitu saja penjelasannya semoga bisa langsung paham hehe…
Oke simak tutorialnya sebagai berikut :
- Pertama, buat project baru di Android Studio dengan nama MySplashScreen
- Buat layout untuk splashscreen dengan cara klik kanan pada folder layout->new->layout resource file, kemudia beri nama activity_splash.
- Siapin sebuah image atau foto terserah karena kita akan menggunakan image tersebut sebagai background splash screen, lalu copy ke folder drawable.
- Kemudian tambahkan komponen ImageView di activity_splash.xml berikut ini.

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

    <ImageView
        android:id="@+id/bgSplash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/elaine"
        android:scaleType="centerCrop"
        android:contentDescription="@string/app_name" />

</LinearLayout>

Pada tag android:src="..." merupakan source atau file image di folder drawable yang akan kita jadikan background.
- Setelah itu buat activity baru dan beri nama SplashActivity.
- Pada bagian onCreate() sisipkan code berikut :

Thread timerSplash = new Thread(){
    public void run(){
        try{
            short timerSplash = 0;
            while(timerSplash < 2000){
                sleep(100);
                timerSplash = (short) (timerSplash + 100);
            }

            // Forward to MainActivity
            
        }catch(InterruptedException e){
            e.printStackTrace();
        }finally{
            finish();
        }
    }
};

timerSplash.start();

Pada code di atas, kita membuat sebuah thread yang berjalan selama beberapa detik saat splash screen berjalan. Angka 2000 (2 detik) pada code di atas merupakan selang waktu splash screen berjalan. Kemudian setelah itu alihkan ke activity utama.
- Buat layout baru dengan nama activity_main.
- Selanjutnya kita buat activity baru dengan nama MainActivity. Tambahkan method berikut :

public static void start(Context context){
    Intent i = new Intent(context, MainActivity.class);
    context.startActivity(i);
}

- Panggil method tersebut di SplashActivity. Maka source codenya akan menjadi seperti ini :

Thread timerSplash = new Thread(){
    public void run(){
        try{
            short timerSplash = 0;
            while(timerSplash < 2000){
                sleep(100);
                timerSplash = (short) (timerSplash + 100);
            }

            MainActivity.start(SplashActivity.this);
            finish();
  
        }catch(InterruptedException e){
            e.printStackTrace();
        }finally{
            finish();
        }
    }
};

timerSplash.start();

- Terakhir jangan lupa register activity kita di AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.wim.mysplashscreen" >

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

        <activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
- Selesai, sekarang tinggal deploy dan jalankan program kita. Hasilnya akan tampil seperti ini :

Tampilan splash screen *oshinya TS :v*

Tampilan Halaman Utama

Source code lengkapnya ada di Github.
Terima kasih telah menyimak, semoga bermanfaat.
Happy Coding :)

Post a Comment

Previous Post Next Post