(Tutorial Android) Membuat Splash Screen

Saturday, January 23, 2016

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 :)

Share this :

Previous
Next Post »
0 Komentar

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔

Ads