Cara Membuat Splash Screen di Android Studio

Splash merupakan salah satu patterns pada Android Development yang ada pada saat aplikasi pertama kali di buka, biasanya splash screen berisi logo dan nama aplikasi. Atau bisa diartikan Splash Screen merupakan sebuah halaman tunggu yang berfungsi untuk beberapa hal, salah satunya yaitu memunculkan branding atau menunggu proses data dari sebuah aplikasi.

Pada artikel sebelumnya saya pernah menulis artikel tentang Cara Install Android Studio 3 di Linux Mint dan di artikel kali ini saya akan memberikan tutorial untuk membuat splash screen pada Android Studio.

1. Buat Project Baru

Buka android studio yang sudah kalian install, lalu pilih create new project. Pada Application Name kita isi dengan nama SplashScreen.

Pada bagian Phone and Tablet kita pilih API 21: Android 5.0 (Lollipop) atau bisa disesuaikan.

Selanjutnya, pilih Empty Activity dan isikan MainActivity pada Activity Name.

2. Mengatur Layout

Untuk mengatur layout splash screen ada pada activity_main.xml. Logo yang digunakan untuk splash screen pada artikel ini, saya menggunakan logo Kota Pemalang. Bisa download disini atau bisa menggunakan logo sendiri.

Jika sudah, langkah selanjutnya kita akan memasukan logo kedalam drawable dengan cara buka folder app/res dan klik kanan pada drawable lalu pilih Show in Files.

Selanjutnya ketikan kode dibawah ini pada activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:gravity="center"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="160dp"
        android:layout_height="60dp"
        android:id="@+id/logo"
        android:src="@drawable/pemalang"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

Pada kode diatas kita menggunakan layout Relative Layout dan menambahkan satu widget ImageView untuk menampilkan gambar.

3. Atur Style

Pada splash screen kita akan menghilangkan ActionBar dan mengganti warna primary dengan warna putih supaya terlihat fullscreen. Buka styles.xml yang ada di folder res/values lalu ketikan kode dibawah ini.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">#FFFFFF</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="HomeTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

4. Membuat HomeActivity

Splash Screen yang kita buat akan tampil selama 4 detik dan akan langsung menampilkan halaman utama dari aplikasi yang telah diberi splash screen.

Maka kita buat activity baru bernama HomeActivity dengan cara klik kanan pada nama package lalu pilih New > Activity > Empty Activity.

Lalu ketikan kode dibawah ini kedalam activity_home.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"

    tools:context=".HomeActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TeknoWebApp"
        android:textSize="20sp"/>

</RelativeLayout>

5. MainActivity.java

Buka MainActivity.java lalu ketikan kode dibawah ini.

package com.teknowebapp.splashscreen;

import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private int timeout = 4000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        new Handler().postDelayed(new Runnable(){
            @Override
            public void run() {
                Intent homeIntent = new Intent(MainActivity.this, HomeActivity.class);
                startActivity(homeIntent);
                finish();
            }
        },timeout);
    }
}

Pada kode diatas kita memberi timeout = 4000 yang artinya splash screen akan tampil selama 4 detik pada saat pertama aplikasi dibuka.

6. AndroidManifest.xml

Pada AndroidManifest.xml kita ketikan kode seperti dibawah ini.

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true">
        <activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".HomeActivity"
            android:theme="@style/HomeTheme">
        </activity>
    </application>

</manifest>

7. Menjalankan Aplikasi

Untuk menjalankan aplikasi yang sudah dibuat kita bisa menggunakan android virtual device, emulator, atau langsung ke smartphone.

Bagi kalian yang ingin langsung mencoba bisa Download project splash screen ini pada link yang sudah disediakan.

Mungkin cukup sekian artikel tentang Cara Membuat Splash Screen di Android Studio, jika bermanfaat silahkan share keteman-teman kalian supaya mereka tau apa yang kalian tau. Jika ada kesulitan silahkan tinggalkan komentar.