Cara Membuat Splash Screen Dengan Benar di Android

Kumpulan Tutorial Android Bahasa Indonesia

Cara Membuat Splash Screen Dengan Benar di Android

Android Splash Screen

Splash Screen adalah suatu desain dalam bentuk visual yang akan ditampilkan ke layar yang biasanya terdapat logo, gambar, dan versi dari aplikasi yang digunakan. Sebuah Splash Screen biasanya ditampilkan ketika aplikasi pertama kali dijalankan.

Pada beberapa waktu ke belakang, Google menyarankan untuk tidak menggunakan Splash Screen di Aplikasi Android yang anda buat. Karena tidak memiliki fungsi apapun selain menampilkan logo di aplikasi anda. Kemudian Google merilis bagaimana spesifikasi Splash Screen sesuai Material Design. Lalu apa saja perbedaan antara Splash Screen yang baik dengan Splash Screen yang buruk?

Perbedaannya terletak pada cara bagaimana kamu membuat Splash Screen tersebut. Jika sebelumnya developer membuat Splash Screen dengan cara menampilkan logo aplikasi di layar selama waktu yang telah kita tentukan. Cara yang benar dalam membuat Splash Screen yaitu hanya menampilkan logo aplikasi ketika berjalan dan selesai.

Membuat Aplikasi

Untuk membuat aplikasi kita bisa lakukan dengan cara klik File > New > New Project. Lalu isi Application name dengan nama aplikasi yang ingin anda buat.

Membuat Projek Baru

Membuat Projek Baru

Kemudian pilih target aplikasi yang akan anda gunakan, saya disini akan memilih Phone and Tablet dengan Minimum SDK API 16

Target Device Android Untuk Proyek Baru

Target Device Android Untuk Proyek Baru

Kemudian pilih Empty Activity

Menambah Activity Utama

Menambah Activity Utama

Dan klik Finish

Mengedit MainActivity

Mengedit MainActivity

Mendesain Splash Screen

Untuk membuat Splash Screen, kita membutuhkan logo yang akan ditampilkan beserta backgroundnya. Saya disinia akan menggunakan logo Instagram sebagai logo produk yang akan digunakan.

Logo Instagram

Logo Instagram

Setelah anda memilih logo yang akan digunakan, Copykan gambar tersebut ke folder res > drawable. Setelah itu kita buat file xml baru bernama splashbackground.xml di folder res > drawable. Lalu isi file tersebut dengan kode dibawah.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/colorWhite" />

    <item>
        <bitmap android:src="@drawable/logo"
            android:gravity="center" />

    </item>

</layer-list>

File splashbackground.xml digunakan sebagai desain background yang akan ditampilkan ketika splash screen dijalankan. Setelah itu kita mesti membuat theme baru agar splash screen tidak akan menampilkan toolbar ketika dijalankan. Caranya yaitu membuat style baru sebagai child dari Theme.AppCompat.NoActionBar seperti kode dibawah.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" 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>

    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splashbackground</item>
    </style>

</resources>

Setelah kita membuat tema, kitqa lanjut dengan membuat Activity tempat Splash Screen kita ditampilkan. Kita beri nama SplashScreenActivity. Lalu kita isi Activity tersebut dengan skrip menampilkan MainActivity, dan kita tidak perlu mengatur layout untuk Activity tersebut. Maka kode lengkapnya seperti dibawah.

package com.androsia.splashscreen;

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

public class SplashScreenActivity extends AppCompatActivity {

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

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

Lalu kita set tema Activity tersebut dengan tema yang baru kita buat di AndroidManifest.xml

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

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

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

</manifest>

kemudian kita bisa mulai jalankan dan Splash Screen yang kita buat akan tampil.

Splash Screen yang dibuat

Splash Screen yang dibuat

Mengatur durasi Splash Screen

Durasi Splash Screen yang sudah kita buat sangatlah singkat. Kita bisa memperpanjang durasi Splash Screen dengan membuat kelas baru bernama MyApp yang mengextend kelas Application. Kemudian kita beri kode seperti dibawah.

package com.androsia.splashscreen;

import android.app.Application;
import android.os.SystemClock;

/**
 * Endrawan made this on 2018-01-20.
 */
public class MyApp extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // Delay splash screen berdasarkan milisecond | 3 detik = 3000 milisecond
        SystemClock.sleep(3000);
    }
}

Pada kode diatas saya menambahkan delay Splash Screen selama 3 detik / 3000 milisescond. Setelah itu kita edit file AndroidManifest.xml dengan menambahkan nama kelas yang telah kita buat sehingga hasilnya seperti dibawah.

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

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

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

</manifest>

Maka kita jalankan lagi aplikasi kita, dan Splash Screen akan berdelay 3 detik sesuai yang telah kita atur sebelumnya.

Splash Screen dengan delay 3 detik

Splash Screen dengan delay 3 detik

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *