Membuat Splash Screen di Android Studio

Splash Screen Android Studio

Splash Screen adalah elemen kontrol grafis yang muncul saat sebuah aplikasi atau game diluncurkan. Splash Screen dapat berisi gambar, logo, icon, teks dan lain-lain, dan biasanya di pergunakan untuk menunjukkan ciri khas atau informasi singkat dari aplikasi atau game tersebut. Jadi, Splash Screen ini muncul diawal sebelum aktivitas utama saat aplikasi dilaunching.

Jika Anda punya aplikasi youtube terinstall di smartphone, coba buka aplikasi tersebut; maka hal yang pertama kali muncul adalah seperti gambar dibawah ini. Itulah Splash Screen yang dimaksud (Jika belum kenal apa itu Splash Screen).

Gambar 1 : Contoh Splash Screen

Disarankan jika Anda ingin membuat Splash Screen, untuk durasi waktunya jangan terlalu lama, karena Splash Screen ini muncul saat setiap kali aplikasi di luncurkan, sehingga mungkin bisa saja membuat si pengguna aplikasi Anda nantinya terganggu dan tidak nyaman yang dapat berujung aplikasi di uninstall. Bagi saya pribadi, durasi yang ideal antara 1 - 3 detik.

Membuat Splash Screen

Langkah awal untuk membuat nya tentunya dengan mempersiapkan terlebih dahulu proyek Anda, ikuti postingan ini jika belum pernah membuat proyek di Android Studio. Seperti biasanya, disini saya menggunakan package com.gwnbs.proyekpertama sebagai contoh tutorial. Baiklah,  buatlah sebuah activity baru, klik kanan pada menu File dipojok kiri atas; New > Activity > Empty Activity. Beri nama SplashScreen untuk activity tersebut, pastikan pada pilihan Generate Layout File sudah di centang kemudian langsung klik Finish. Yang lain tidak perlu di apa-apa kan. 

Tutorial mengenai cara  pembuatan activity baru selengkapnya dapat dilihat pada postingan ini. Setelah aktivitas baru dibuat, berikutnya adalah merombak AndroidManifest.xml. Karena Splash Screen ini muncul pertama kali saat aplikasi di buka, maka Splash Screen ini akan menjadi activity launcher dari aplikasi tersebut. Sehingga, kode berikut dibawah ini yang tadinya ada pada tubuh MainActivity harus berpindah ke tubuh SplashScreen.

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

Berikut dibawah ini kode lengkap pada AndroidManifest.xml com.gwnbs.proyekpertama :

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".SplashScreen"
            android:label="@string/app_name"
            android:noHistory="true"
            android:theme="@style/AppTheme.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="Cara Splash Screen">
        </activity>

    </application>
</manifest>

Pada atribut android:theme= "@style/AppTheme.NoActionBar"   yang ada di tubuh SplashScreen AndroidManifest.xml diatas akan bertanda warna merah, itu karena kita belum membuat style theme nya. Untuk membuatnya, pertama-tama perluas folder res, kemudian perluas lagi folder values lalu double klik pada style.xml untuk membukannya. Setelah terbuka, salin kode dibawah ini di dalam tag <resources> </resources> :

<style name="AppTheme.NoActionBar">
     <item name="windowActionBar">false</item>
     <item name="windowNoTitle">true</item>
</style>

Theme (tema) tersebut digunakan untuk menghilangkan ActionBar. Anda bisa memilih untuk tidak menghilangkan ActionBar nya dengan tidak mengikuti langkah barusan dan menghapus atribut android:theme yang ada pada SplashScreen AndroidManifest.xml diatas.

Pada contoh Splash Screen com.gwnbs.proyekpertama, akan dibuat hanya sebuah gambar yaitu logo blog ini, dan beberapa teks kalimat. Persiapkan sebuah gambar jika ingin menggunakan gambar. Salin sebuah gambar dari komputer Anda dan tempelkan pada folder drawable dengan cara klik kanan pada folder tersebut lalu pilih Paste. Atau, pilihan lain; Anda bisa membuat sebuah icon melalui Android Studio melalui Image Asset atau Vector Asset. Klik disini untuk tutorial tersebut.

Buka layout activity_splash_screen.xml, masukkan gambar dan teks kalimat ke dalam layout tersebut. Dibawah ini kode lengkap layout activity_splash_screen.xml dari com.gwnbs.proyekpertama :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashScreen"
    android:id="@+id/splash_screen">

    <TextView
        android:text="Contoh Splash Screen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:id="@+id/contohSplash"
        android:textSize="30sp"
        android:textAlignment="center"
        android:fontFamily="sans-serif-smallcaps"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:gravity="center_horizontal" />

    <ImageView
        android:id="@+id/gwnbSplash"
        android:layout_width="250dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:layout_below="@id/contohSplash"
        app:srcCompat="@drawable/gwnbs_logo"
        android:scaleType="fitXY"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/kalimatNgawur"
        android:layout_below="@id/gwnbSplash"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Ini Splash Screen saya
        \nMana Splash Screen kamu?"
        android:textSize="23sp"
        android:gravity="center_horizontal"
        android:layout_marginTop="100dp" />

</RelativeLayout>

Tahapan selanjutnya adalah SplashScreen.java. Buka file tersebut! Disini kita hanya menambahkan sebuah Handler untuk Splash Screen tersebut untuk mengatur lamanya durasi dan mengarahkan ke aktivitas utama setelah durasi tampilnya Splash Screen berakhir. Pada contoh ini durasi tampilnya dibuat hanya 2000L dellayMillis, atau sama dengan 2 detik. Jika Anda ingin lebih pendek atau panjang, tinggal ganti saja menjadi, contohnya 1000L untuk 1 detik, 5000L untuk 5 detik dan sebagainnya pada codingan di SplashScreen.java berikut :

package com.gwnbs.proyekpertama;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.Window;

import androidx.appcompat.app.AppCompatActivity;

public class SplashScreen extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        /*menghilangkan ActionBar. Hapus kode ini jika ingin Actionbar tidak hilang*/ 

        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_splash_screen);

        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override            public void run() {
                startActivity(new Intent(getApplicationContext(),
                        MainActivity.class));
                finish();
            }
        }, 2000L);
        /*Mengatur durasi Splash Screen. 2000L = 2 detik*/    

  }
}

Sampai disini sudah selesai. Sekarang coba jalankan aplikasi. Jika tidak melakukan kesalahan, seharusnya Splash Screen berjalan dengan baik. Supaya terlihat tidak terlalu polos, maka kita akan menambahkan sebuah Progress Bar untuk gaya-gayaan.

Menambahkan Progress Bar

Apa itu Progress Bar? Ketika Anda mendownload sesuatu, dan melihat tanda berbentuk batang atau lingkaran yang memperlihatkan loading (sedang memuat) dengan tulisan persentase yang terus meningkat hingga 100%, itulah yang dinamakan Progress Bar. Namun, Progress Bar yang akan kita buat ini offline, artinya otomatis selesai sesuai durasi waktu yang ditentukan.

Progress Bar yang akan dicontohkan disini adalah yang berbentuk batang secara horizontal. Pada layout activity_splash_screen.xml, tambahkan kode dibawah ini tepat dibawah TextView terakhir pada contoh kode diatas sebelumnya :

<ProgressBar
        android:id="@+id/pb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/kalimatNgawur"
        android:layout_marginTop="25dp"
        android:layout_centerHorizontal="true"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_marginRight="5dp"
        android:layout_marginEnd="5dp" />

Kemudian kembali ke SplashScreen.java, gantikan contoh kode yang diatas tadi menjadi seperti dibawah ini. Durasi tetap dibuat 2 detik. Apabila Anda ingin durasi lebih panjang atau pendek, Anda bisa mengganti angka 200 pada metode jalankanProgress(); (kode dibawah) menjadi, misalnya 1 detik maka ubahlah menjadi 100, atau misal 5 detik, maka ubahlah menjadi 500. Perhitungannya pada metode jalankanProgress(); dibawah  adalah 200 x 10 = 2000L millis atau 2 detik  :

package com.gwnbs.proyekpertama;

import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.widget.ProgressBar;

import androidx.appcompat.app.AppCompatActivity;

public class SplashScreen extends AppCompatActivity {

private ProgressBar progressBar;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        /*menghilangkan ActionBar. Hapus kode ini jika ingin Actionbar tidak hilang*/ 

        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_splash_screen);

        progressBar = findViewById(R.id.pb);
        new Thread(new Runnable() {
            public void run() {
                jalankanProgress();
                masukAktivitasUtama();
                finish();
            }
        }).start();
    }

    private void jalankanProgress() {
        for (int progress=0; progress<100; progress+=10) {
            try {
                Thread.sleep(200);
                progressBar.setProgress(progress);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    private void masukAktivitasUtama() {
        Intent intent = new Intent(SplashScreen.this,
                MainActivity.class);
        startActivity(intent);
    }
}

Menguji Splash Screen

Berikutnya adalah menguji kembali Splash Screen. Dibawah ini sebuah video pendek yang memperlihatkan instalasi Splash Screen berjalan dengan baik. Oh ya, pada tutorial ini kita tidak melakukan apa-apa di aktivitas utama/activity_main.xml dan MainActivity.java. Pada demo video dibawah, aktivitas utama tersebut berasal dari postingan sebelumnya mengenai Cara Install Iklan Banner AdMob dan Membuat Spinner.

Baiklah, sekian dan terima kasih. Jika ada pertanyaan silahkan langsung di posting di komentar. Bisa juga melalui contact form yang tersedia pada menu navigasi.