Android Animation :: Membuat Splash Screen pada Aplikasi Android (I)

Last Updated on 12 years by Mas Herdi

Tidak terhitung banyaknya orang-orang, termasuk beberapa teman saya yang ingin menambahkan splash screen pada aplikasi Android buatan mereka. Karena itulah mungkin saya akan berbagi sedikit tutorial untuk membuat splash screen pada aplikasi Android. 🙂

Splash Screen

Splash screen adalah semacam tampilan tambahan yang akan muncul saat kita pertama kali membuat suatu aplikasi. Aplikasi-aplikasi desktop saat ini kebanyakan menggunakan splash screen untuk menampilkan loading progress, logo, info dan sebagainya. Contohnya seperti di Microsoft Office dan Photoshop. Splash screen tidak bersifat tetap, melainkan akan menghilang perlahan-lahan seiring dengan terbawanya kita ke tampilan aplikasi utama.

Pada Android, splash screen termasuk sebuah aktivitas (Activity) tersendiri. Yang setelah diberikan konfigurasi dan efek animasi aktivitas tersebut akan perlahan-lahan hilang. Seperti pada contoh berikut :

Aplikasi Presensi | twoh.co

Ditunggu beberapa saat… tampilan itu akan mulai menghilang.

Aplikasi Presensi Lab Akses | twoh.co

Dan setelah benar-benar hilang, inilah menu utamanya.

Aplikasi Presensi Lab Akses | twoh.co

Untuk membuat hal semacam itu, mau tidak mau kita akan bermain Thread pada Android. Dan satu hal lagi yang tidak kalah penting adalah splash screen tersebut harus hilang apabila kita keluar dari aplikasi. Dengan kata lain, ketika kita menekan tombol back maka kita harus langsung keluar dari aplikasi, bukan kembali kepada layar splash screen. 

Getting Started

Seperti biasa, buatlah sebuah aplikasi Android baru. Konfigurasi terserah, karena kita hanya fokus untuk splash screen-nya. Atau kalian bisa membuat aplikasi Hello World standar. Kemudian pertama-tama, kita akan membuat file XML untuk resource-nya. Kita butuh tiga file xml tambahan, yaitu :

• splash.xml : berfungsi sebagai tampilan untuk splash screen
  
• fadein.xml : untuk animasi fade in
• fadeout.xml : untuk animasi fade out

Untuk file spash.xml isikan kode seperti di bawah ini.

<?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"
    android:background="#088bbc"
    >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingTop="150dip"
    android:text="twoh.co"
    android:textColor="#ffffff"
    android:textSize="50dip"

    />

</LinearLayout>

File XML tersebut hanya berisi LinearLayout sebagai pembungkus dan sebuah TextView yang berisikan tulisan dengan efek-nya di bagian tengah.

Kemudian untuk file fadein.xml isikan kode seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>

Nah, file ini berfungsi untuk membuat animasi fade-in (perlahan-lahan muncul). Karena intinya kita hanya bermain alpha atau transparansi dari layout tadi. Maka komponen yang digunakan adalah komponen alpha. Kemudian pada bagian interpolator kita menggunakan gaya accelerate_interpolator. Yang berarti kita akan menyisipkan suatu object, dan kita melakukan akselerasi (bergerak maju) dari objek satu ke objek yang disisipkan tersebut. Akselerasi dilakukan dalam jangka waktu seperti yang ada pada bagian duration, durasi menggunakan satuan ms/milliseconds, Setelah itu kita tinggal mengeset kondisi Alpha awal (fromAlpha) yaitu 0.0 yang berarti tembus pandang, hingga nanti pada akhirnya menjadi tampak (toAlpha = 1.0).

Untuk file fadeout.xml isikan kode seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>

Sedangkan, berlawanan dengan fadein.xml, file ini berfungsi untuk membuat animasi fade-out (perlahan-lahan menghilang). Keterangannya sama seperti di atas, hanya kita ganti nilai pada fromAlpha menjadi 1.0 (opaque/nampak) dan kita set kondisi akhirnya toAlpha menjadi 0.0 yang berarti transparent/tidak nampak.

Kalian mungkin berpikir, aktivitas apa yang nantinya akan di fade-in kan dan aktivitas mana yang akan di fade-out kan. Pada saat aplikasi pertama kali berjalan, yang dimunculkan adalah tampilan splash screen yang nantinya akan mendapat efek fade-out menghilang perlahan-lahan. Di saat yang bersamaan, tampilan kedua/tampilan menu akan dimunculkan juga secara perlahan-lahan (fade-in). Yang nantinya akan membuat suatu transisi yang halus. 🙂

Oke kira2 sekian dulu, nanti akan disambung pada bagian keduanya. Stay tune 😀

UPDATE : bagian kedua