Membuat Splash Screen Android

Membuat Splash Screen Aplikasi Android: Berpindah Antar Activity Secara Otomatis


Bismillaahirrohmaanirrohiim. Jika pada tulisan sebelumnya kita telah belajar bagaimana membuat sebuah activity yang dapat berpindah ke activity lainnya dengan menggunakan button, pada tulisan kali ini akan saya contohkan bagaimana cara berpindah antar activity pada aplikasi android. Penerapannya sendiri biasanya pada halaman splash screen, yaitu sebuah halaman awal dari sebuah aplikasi yang biasanya menampilkan logo selama beberapa detik lalu berpindah ke halaman (activity) lain. Jadi jika ingin membuat halaman splash screen, bisa gunakan cara ini.

Untuk membuat splash screen ini tentunya kita perlu membuat dua buah activity, yaitu activity yang kita gunakan sebagai splash screen dan activity kedua yang kita gunakan sebagai activity yang dituju setelah waktu (timer) pada splash screen berakhir.

Pada tuisan kali ini saya akan contohkan bagaimana membuat halaman splash screen mirip seperti splash screen-nya aplikasi YouTube. Untuk itu, kita perlu sebuah logo YouTube. Agar sesuai, teman-teman bisa unduh logo YouTube dari halaman ini.

Membuat Project Baru dan Copy Paste Icon

Silakan teman-teman buka Android Studi dan buat project baru dengan nama projectnya Splash Screen dan pilih Empty Activity sebagai jenis activity nya. Lalu klik Finish.

Membuat Project Baru pada Android Studio

Tunggu hingga gradle selesai proses build. Selanjutnya copy file gambar logo Youtube tadi (youtube.png) yang didapat dari link diatas, lalu klik kanan pada res > drawable lalu paste. Maka nantinya gambar logo youtube.png akan berada didalam folder drawable. Atau teman-teman bisa dengan cara meng-copy-paste langsung melalui file manager (Windows Explorer, Finder ataupun Nautilus file manager) kedalam AndroidStudioProjects/SplashScreen/app/src/main/res/drawable/

Mengcopy paste icon youtube.png kedalam folder res > drawable

Jika proses copy paste berhasil maka didalam folder res > drawable akan terdapat satu file lagi bernama youtube.png

Desain Halaman Splash

Untuk mendesainnya akan kita gunakan melalui mode teks pada file res > layout > activity_main.xml. Jadi, silakan buka file tersebut lalu ubah menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <ImageView
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/youtube"
        android:contentDescription="Menampilkan logo youtube"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Selanjutnya buka file MainActivity.java dan tambahkan baris berikut ini.

package net.kangriyanto.splashscreen;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(getApplicationContext(), WelcomeActivity.class));
                finish();
            }
        }, 3000);
    }
}

Disini kita gunakan method postDelayed dari objek handler, dimana method ini akan menjalankan statemen setelah delay yang telah ditentukan berakhir. Pada contoh ini kita gunakan delay 3000 milidetik atau 3 detik. Setelah 3 detik berakhir maka akan menjalankan activity kedua dengan menggunakan bantuan Intent.

Perintah finish() diatas digunakan untuk “menghancurkan” MainActivity pada daur hidup activity, sehingga jika ditekan tombol back maka tidak akan menampilkan halaman splash screen lagi.

Membuat Activity Kedua

Seperti yang sudah dijelaskan diawal, disini kita memerlukan dua buah activity. Untuk itu kita perlu membuat satu buah activity lagi dan beri nama WelcomeActivity. Cara membuatnya dapat dilihat pada postingan saya sebelumnya, disini.

File ini tidak kita apa-apakan, hanya sebagai “tempat tujuan” setelah splash screen tampil, itu saja. Dan untuk saat ini ketika aplikasi dijalankan maka akan tampil seperti ini dalam 3 detik lalu berpindah ke activity berikutnya.

Splash Screen Youtube

Untuk menghilangkan actionbar (yang ada tulisan Splash Screen), teman-teman bisa ubah melalui file app > manifests > AndroidManifests.xml lalu sesuaikan baris berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.kangriyanto.splashscreen">
    <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=".WelcomeActivity"></activity>
        <activity android:name=".MainActivity" android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Oke, selanjutnya silakan jalankan kembali project teman-teman semua dan sekarang pada halaman splash screen sudah tidak ada lagi actionbar nya. Yeaay, selamat 🙂

Nah, itulah beberapa tahapan dalam membuat splash screen pada aplikasi Android. Disini teman-teman sudah belajar bagaimana menambahkan aset gambar kedalam folder drawable, membuat activity baru, melakukan desain pada file XML menggunakan Constraint Layout, menggunakan objek handler dan method postDelayed.

Tinggalkan Komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.