Cara Membuat Splash Screen Android 12+ dengan Kotlin: Panduan Lengkap Developer

Sejak Android 12 (API level 31), Google memperkenalkan Splash Screen API yang terstandarisasi untuk semua aplikasi. Ini adalah perubahan besar dari cara kita menangani splash screen sebelumnya, di mana developer sering kali harus membuat Activity terpisah atau mengatur Drawable sebagai window background secara manual.

Perubahan ini bertujuan untuk memberikan pengalaman pengguna yang lebih konsisten dan mulus saat aplikasi pertama kali diluncurkan, terlepas dari apakah aplikasi tersebut sudah siap atau masih dalam proses loading. Bagi kita para developer, ini berarti ada pendekatan baru yang lebih bersih dan efisien untuk mengimplementasikan splash screen.

Artikel ini akan memandu Anda secara mendalam bagaimana membuat dan mengkonfigurasi splash screen yang sesuai untuk Android 12+ menggunakan Kotlin. Kita akan membahas dari dasar, mulai dari pemahaman konsep, konfigurasi tema, hingga penanganan logika dalam kode, serta mengatasi beberapa masalah umum yang sering muncul.

Memahami Splash Screen Android 12+

Sebelum Android 12, splash screen seringkali diimplementasikan dengan membuat sebuah Activity khusus atau dengan mengatur sebuah Drawable sebagai background jendela utama. Ini punya beberapa kelemahan:

• Inkonsistensi: Setiap aplikasi bisa punya implementasi yang berbeda, kadang terasa janky atau lambat.
• Window Blanking: Terkadang ada jeda layar hitam atau putih singkat sebelum splash screen muncul, terutama pada perangkat lama atau aplikasi yang berat.
• Kompleksitas: Developer harus mengelola lifecycle Activity splash screen secara manual.

Android 12+ mengatasi ini dengan sistem splash screen yang dikelola langsung oleh sistem operasi. Ketika aplikasi diluncurkan, sistem akan menampilkan splash screen yang terdiri dari:

• Icon Aplikasi: Bisa berupa icon adaptif atau statis.
• Background: Warna background yang bisa Anda definisikan.
• Branding Image (Opsional): Gambar tambahan yang muncul di bagian bawah splash screen (biasanya logo perusahaan atau produk).

Sistem akan secara otomatis menampilkan splash screen ini dan menyingkirkannya segera setelah Activity pertama aplikasi Anda siap digambar. Ini menghilangkan “window blanking” dan memastikan transisi yang mulus.

Persyaratan dan Persiapan

Untuk mengikuti panduan ini, pastikan Anda memiliki:

• Android Studio versi terbaru (disarankan Chipmunk ke atas).
• Android SDK Platform 31 (Android 12) atau lebih tinggi terinstal.
• Target SDK di project Anda minimal 31.
• Dependency androidx.core:core-splashscreen di file build.gradle.kts (Module: app).

Tambahkan dependency berikut ke file build.gradle.kts (Module: app) Anda:

dependencies {
    // ... dependencies lainnya
    implementation("androidx.core:core-splashscreen:1.0.1")
}

Pastikan untuk melakukan sync project Gradle setelah menambahkan dependency.

Langkah-Langkah Membuat Splash Screen Android 12+

Langkah 1: Buat Splash Screen Theme

Pertama, kita akan membuat tema khusus untuk splash screen Anda. Buka file themes.xml (atau themes.xml (night) untuk mode gelap) di folder res/values/. Anda bisa membuat file tema baru seperti themes_splash.xml jika ingin memisahkan definisi tema.

Tambahkan kode berikut:

<!-- res/values/themes.xml atau res/values/themes_splash.xml -->
<resources>
    <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
        <!-- Required -->
        <item name="windowSplashScreenBackground">@color/background_splash</item>
        <!-- Optional: If you want a branding image -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
        <!-- Optional: Where the brand image should be aligned. 
             Can be 'bottom', 'center', or 'top'. Default is 'center'. -->
        <item name="windowSplashScreenAnimationDuration">1000</item> <!-- Durasi animasi (ms) -->
        <!-- Optional: Set the theme of the Activity that follows the splash screen. -->
        <item name="postSplashScreenTheme">@style/Theme.MyApp</item>
    </style>
</resources>

Penjelasan properti:

• windowSplashScreenBackground: Warna background splash screen. Definisikan di colors.xml.
• windowSplashScreenAnimatedIcon: Icon utama yang akan muncul di tengah splash screen. Ini bisa berupa Drawable atau AnimatedVectorDrawable. Direkomendasikan menggunakan icon adaptif atau minimal berukuran 200x200dp. Pastikan icon ini terlihat bagus di atas background splash screen Anda.
• windowSplashScreenAnimationDuration: Durasi animasi kemunculan icon. Default-nya 200ms, bisa diatur hingga 1000ms (1 detik). Jika Anda tidak memerlukan delay tambahan, sebaiknya biarkan default atau singkat saja.
• postSplashScreenTheme: Ini adalah TEMA UTAMA aplikasi Anda yang akan diterapkan ke Activity setelah splash screen selesai. Sangat penting untuk mengaturnya agar UI aplikasi Anda terlihat benar setelah splash screen menghilang. Ganti Theme.MyApp dengan tema utama aplikasi Anda.

Tambahkan Warna dan Drawable:

Buat file colors.xml di res/values/ jika belum ada, dan tambahkan warna background splash screen Anda:

<!-- res/values/colors.xml -->
<resources>
    <color name="background_splash">#FFFFFF</color> <!-- Warna putih -->
    <color name="brand_color">#1A73E8</color> <!-- Contoh warna brand -->
</resources>

Siapkan @drawable/splash_logo (atau nama lain) dengan icon aplikasi Anda. Anda bisa mengimpor gambar PNG/SVG atau membuat Vector Asset baru di Android Studio.

Langkah 2: Terapkan Tema Splash Screen di AndroidManifest.xml

Selanjutnya, Anda perlu menerapkan tema splash screen yang baru saja Anda buat ke Activity utama aplikasi Anda (biasanya MainActivity) di AndroidManifest.xml.

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <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/Theme.MyApp" <!-- Tema aplikasi utama Anda -->>

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/Theme.App.SplashScreen"> <!-- Terapkan tema splash screen DI SINI -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- Activity lainnya -->
    </application>
</manifest>

Perhatikan bahwa Anda menerapkan Theme.App.SplashScreen ke MainActivity (atau Activity yang pertama kali diluncurkan). Setelah splash screen selesai, sistem akan secara otomatis beralih ke tema yang didefinisikan di postSplashScreenTheme (yaitu Theme.MyApp).

Langkah 3: Inisialisasi Splash Screen di MainActivity.kt

Terakhir, Anda perlu memanggil installSplashScreen() di MainActivity sebelum memanggil super.onCreate() dan setContentView().

// MainActivity.kt
package com.tubianto.myapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
import com.tubianto.myapp.ui.theme.MyAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Panggil installSplashScreen() SEBELUM super.onCreate()
        installSplashScreen() 

        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Greeting("Android")
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyAppTheme {
        Greeting("Android")
    }
}

Dengan langkah ini, Anda sudah memiliki splash screen yang berfungsi dengan baik di Android 12+. Saat aplikasi diluncurkan, sistem akan menampilkan splash screen yang telah Anda definisikan, dan secara mulus beralih ke UI aplikasi Anda setelah MainActivity siap.

Mengatur Branding Image (Opsional)

Jika Anda ingin menambahkan branding image (misalnya, teks “Powered by Tubianto.com” atau logo perusahaan di bagian bawah), Anda bisa menambahkannya ke tema splash screen:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/background_splash</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
        <item name="postSplashScreenTheme">@style/Theme.MyApp</item>

        <!-- Optional: Add a branding image below the icon -->
        <item name="windowSplashScreenBrandingImage">@drawable/branding_logo</item>
    </style>
</resources>

Pastikan @drawable/branding_logo sudah tersedia di folder drawable Anda.

Mempertahankan Splash Screen Lebih Lama (Jika Diperlukan)

Dalam sebagian besar kasus, Anda tidak perlu menunda splash screen. Sistem akan otomatis menyingkirkannya setelah aplikasi siap. Namun, jika Anda perlu melakukan inisialisasi data yang berat atau memuat konfigurasi yang memakan waktu, Anda bisa menunda splash screen sedikit lebih lama. Ingat, hal ini TIDAK DIREKOMENDASIKAN untuk UX yang baik, karena splash screen yang terlalu lama dapat membuat pengguna frustrasi.

// MainActivity.kt
class MainActivity : ComponentActivity() {
    private var keepSplashScreenOn = true
    private val delayAmount = 3000L // 3 detik

    override fun onCreate(savedInstanceState: Bundle?) {
        // Menjaga splash screen tetap tampil
        val splashScreen = installSplashScreen()
        splashScreen.setKeepOnScreenCondition { keepSplashScreenOn }

        // Simulasikan pekerjaan berat
        lifecycleScope.launch {
            delay(delayAmount) // Tunda selama 3 detik
            keepSplashScreenOn = false // Setelah delay, splash screen akan hilang
        }

        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Greeting("Android")
            }
        }
    }
}

Dalam contoh di atas, kita menggunakan lifecycleScope.launch dan delay untuk mensimulasikan pekerjaan asinkron. Setelah delay selesai, kita set keepSplashScreenOn menjadi false, dan splash screen akan menghilang. Pastikan Anda memiliki dependency androidx.lifecycle:lifecycle-runtime-ktx untuk lifecycleScope.

Peringatan Penting: Gunakan penundaan ini hanya jika benar-benar ada data esensial yang harus dimuat sebelum aplikasi siap. Terlalu sering atau terlalu lama menunda splash screen dapat memberikan kesan aplikasi lambat dan mengurangi kepuasan pengguna. Hindari menggunakan splash screen sebagai layar promosi atau intro yang tidak relevan dengan loading aplikasi.

Masalah yang Sering Terjadi

1. Splash Screen Tidak Muncul Sama Sekali atau Muncul Layar Putih/Hitam

• Gejala: Aplikasi langsung masuk ke MainActivity tanpa splash screen, atau ada “jeda kosong” (layar putih/hitam) sebelum MainActivity.
• Penyebab:
  • Tema splash screen tidak diterapkan dengan benar di AndroidManifest.xml pada Activity peluncur utama.
  • installSplashScreen() tidak dipanggil di MainActivity atau dipanggil setelah super.onCreate().
  • Target SDK kurang dari 31.
• Solusi:
  • Pastikan android:theme="@style/Theme.App.SplashScreen" diterapkan pada tag <activity> di AndroidManifest.xml yang memiliki android.intent.action.MAIN dan android.intent.category.LAUNCHER.
  • Panggil installSplashScreen() sebagai BARIS PERTAMA di onCreate(), sebelum super.onCreate().
  • Pastikan targetSdk di build.gradle.kts (Module: app) adalah minimal 31.

2. Icon atau Background Splash Screen Tidak Sesuai

• Gejala: Warna background atau icon yang ditampilkan di splash screen bukan yang Anda harapkan.
• Penyebab:
  • Referensi resource (@color/background_splash, @drawable/splash_logo) salah atau belum didefinisikan.
  • Ada konflik tema atau tema yang salah diterapkan.
  • Untuk mode gelap, Anda mungkin lupa mendefinisikan tema splash screen terpisah di res/values-night/themes.xml.
• Solusi:
  • Periksa kembali nama resource di themes.xml dan pastikan sudah ada serta benar di colors.xml dan folder drawable.
  • Pastikan Anda mendefinisikan tema splash screen untuk mode gelap jika ingin perilaku yang berbeda (misal, background hitam).
  • Untuk icon, pastikan icon tersebut memiliki rasio aspek dan ukuran yang sesuai untuk menghindari pemotongan atau tampilan yang tidak optimal.

3. Splash Screen Terlalu Lama Menghilang

• Gejala: Splash screen tetap tampil lebih lama dari yang diharapkan, bahkan setelah aplikasi tampak siap.
• Penyebab:
  • Anda menggunakan splashScreen.setKeepOnScreenCondition { keepSplashScreenOn } tetapi lupa untuk mengatur keepSplashScreenOn = false setelah pekerjaan inisialisasi selesai.
  • Ada tugas inisialisasi yang memakan waktu terlalu lama di onCreate() atau sebelum UI benar-benar siap digambar.
• Solusi:
  • Jika Anda sengaja menunda, pastikan logika untuk mengubah kondisi keepSplashScreenOn sudah benar dan dijalankan.
  • Identifikasi dan optimalkan pekerjaan yang memakan waktu lama di awal aplikasi. Sebaiknya inisialisasi berat dilakukan secara asinkron setelah splash screen menghilang.
  • Periksa windowSplashScreenAnimationDuration. Jika diatur terlalu tinggi, bisa menyebabkan splash screen terasa lama.

4. Transisi dari Splash Screen ke Aplikasi Terasa “Janky”

• Gejala: Setelah splash screen menghilang, ada sedikit jeda atau UI aplikasi “melompat” saat pertama kali muncul.
• Penyebab:
  • postSplashScreenTheme tidak disetel dengan benar di tema splash screen, sehingga sistem tidak tahu tema apa yang harus diterapkan setelah splash screen.
  • Terdapat perbedaan signifikan antara gaya UI splash screen dan gaya UI aplikasi utama yang muncul setelahnya.
  • Render UI awal aplikasi yang berat atau tidak dioptimalkan.
• Solusi:
  • Pastikan <item name="postSplashScreenTheme">@style/Theme.MyApp</item> merujuk ke tema utama aplikasi Anda.
  • Cobalah untuk membuat transisi visual yang halus antara splash screen dan layar pertama aplikasi Anda (misalnya, warna background yang senada).
  • Optimalkan layout dan data loading di MainActivity agar proses rendering awal bisa secepat mungkin.

Pengalaman dan Pertimbangan Praktis

Dalam praktik pengembangan nyata, implementasi splash screen Android 12+ ini jauh lebih efisien dan direkomendasikan dibandingkan metode lama. Namun, ada beberapa hal yang perlu dipertimbangkan:

Kapan Menggunakan Custom Delay?

Saya pribadi jarang merekomendasikan penggunaan custom delay yang sengaja diperpanjang. Alasannya simpel: pengalaman pengguna. Pengguna modern mengharapkan aplikasi terbuka secepat mungkin. Jika ada loading data yang esensial, lakukan itu secara asinkron dan tampilkan indikator loading di layar pertama aplikasi setelah splash screen menghilang.

Namun, ada beberapa skenario langka di mana custom delay mungkin dipertimbangkan:

• Inisialisasi SDK Kritis: Jika ada SDK pihak ketiga yang benar-benar harus diinisialisasi dan selesai sebelum UI pertama bisa tampil tanpa error.
• Sinkronisasi Data Awal: Aplikasi yang sangat bergantung pada data real-time dan harus mengambil konfigurasi penting dari server sebelum dapat berfungsi.

Tetapi, selalu usahakan untuk meminimalkan durasi penundaan ini. Idealnya, splash screen hanya tampil sebentar (kurang dari 1 detik) sembari sistem mempersiapkan Activity utama.

Konsistensi Branding

Manfaatkan fitur splash screen API ini untuk memperkuat branding Anda. Pastikan icon dan branding image yang Anda gunakan sesuai dengan identitas visual aplikasi Anda. Gunakan tema mode gelap (res/values-night/) untuk memastikan tampilan yang konsisten di kedua mode.

Performa dan Resource

Karena splash screen kini dikelola oleh sistem, beban performa di sisi aplikasi menjadi lebih ringan. Namun, tetap perhatikan ukuran drawable yang Anda gunakan untuk icon dan branding image. Hindari gambar beresolusi sangat tinggi yang bisa memperlambat proses loading.

Kompatibilitas dengan Android Lama (Pre-Android 12)

Jika aplikasi Anda masih menargetkan versi Android di bawah 12, sistem tidak akan menggunakan Splash Screen API ini. Anda masih perlu mengimplementasikan splash screen “tradisional” untuk versi tersebut. Salah satu cara umum adalah dengan mendefinisikan tema berbeda yang menerapkan window background sebagai splash screen untuk versi lama, dan kemudian beralih ke tema utama Anda di onCreate().

Contohnya, Anda bisa memiliki tema default di res/values/themes.xml yang menerapkan splash screen Android 12+, dan kemudian sebuah file res/values-v21/themes.xml (atau versi lain yang Anda targetkan) yang menerapkan metode lama untuk splash screen.

<!-- res/values/themes.xml (Untuk Android 12+ Splash Screen) -->
<resources>
    <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/background_splash</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
        <item name="postSplashScreenTheme">@style/Theme.MyApp</item>
    </style>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Tema aplikasi Anda -->
    </style>
</resources>

<!-- res/values-v21/themes.xml (Untuk Pre-Android 12 Splash Screen) -->
<resources>
    <style name="Theme.App.SplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background_legacy</item>
    </style>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Tema aplikasi Anda -->
    </style>
</resources>

Kemudian di MainActivity.kt:

// MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Hanya panggil installSplashScreen() jika API level 31+
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            installSplashScreen()
        }

        super.onCreate(savedInstanceState)

        // Untuk Android versi lama, ubah tema secara manual setelah splash screen
        // Ini hanya diperlukan jika Anda tidak menggunakan postSplashScreenTheme
        // atau jika Anda ingin logika yang lebih kompleks.
        // setTheme(R.style.Theme_MyApp) // Contoh: Ganti dengan tema utama Anda

        setContent {
            MyAppTheme {
                Greeting("Android")
            }
        }
    }
}

Ini memungkinkan Anda untuk mendukung versi Android lama sambil tetap memanfaatkan fitur Splash Screen API di Android 12+.

FAQ

Apa itu Splash Screen API di Android 12?

Splash Screen API adalah mekanisme standar yang diperkenalkan di Android 12 (API level 31) untuk mengelola tampilan splash screen saat aplikasi diluncurkan. Sistem operasi secara otomatis menampilkan splash screen yang dikonfigurasi melalui tema, memberikan pengalaman yang lebih konsisten dan mengurangi jeda layar kosong.

Apakah saya perlu membuat Activity terpisah untuk splash screen di Android 12?

Tidak, untuk Android 12+ Anda tidak perlu membuat Activity terpisah. Splash screen dikelola oleh sistem dan dikonfigurasi melalui tema yang diterapkan pada Activity utama Anda. Cukup panggil installSplashScreen() dan atur tema di AndroidManifest.xml.

Bagaimana cara menunda splash screen agar tetap tampil lebih lama?

Anda bisa menunda splash screen menggunakan splashScreen.setKeepOnScreenCondition { /* kondisi Anda */ } di MainActivity.kt. Namun, ini tidak disarankan untuk pengalaman pengguna yang baik. Splash screen sebaiknya tampil sesingkat mungkin.

Bisakah saya menggunakan custom font di splash screen Android 12+?

Splash Screen API Android 12+ sangat terbatas dalam kustomisasi. Anda tidak bisa langsung menerapkan custom font ke teks di splash screen karena ia hanya mendukung icon, background, dan branding image. Untuk tampilan yang lebih kompleks dengan custom font, Anda mungkin harus mempertimbangkan metode splash screen tradisional untuk versi Android lama, atau mendesain branding image Anda sudah termasuk teks dengan custom font.

Apa itu postSplashScreenTheme dan mengapa itu penting?

postSplashScreenTheme adalah atribut di tema splash screen yang memberitahu sistem tema apa yang harus diterapkan ke Activity setelah splash screen menghilang. Ini sangat penting untuk memastikan UI aplikasi Anda memiliki gaya yang benar segera setelah splash screen selesai.

Kesimpulan

Implementasi splash screen di Android 12+ kini menjadi lebih terstandarisasi dan mudah berkat Splash Screen API. Dengan memanfaatkan tema dan sedikit kode Kotlin, Anda bisa memastikan aplikasi Anda memiliki tampilan awal yang profesional dan transisi yang mulus, sesuai dengan panduan desain Android modern.

Meskipun ada opsi untuk menunda splash screen, prinsip utamanya tetap sama: berikan pengalaman secepat dan semulus mungkin kepada pengguna. Splash screen adalah tentang kesan pertama, dan dengan pendekatan yang tepat, Anda bisa membuat aplikasi Anda terasa responsif dan berkualitas tinggi sejak detik pertama.

TAGS: Android, Splash Screen, Android 12, Kotlin, Android Development, UI/UX, Mobile Development, Tutorial, Developer Tools

Baca Juga

• Panduan Lengkap Belajar Coding untuk Pemula hingga Profesional

Related posts:

Cara Menggunakan ChatGPT untuk Coding (Studi Kasus: Membuat Aplikasi Manajemen Keuangan dari Nol) Fitur Cursor AI yang Jarang Diketahui Programmer: Rahasia Produktivitas Coding Modern Perbedaan List, Tuple, Set, dan Dictionary di Python: Panduan Lengkap untuk Developer Cara Mengembalikan Commit yang Terlanjur Dipush: Panduan Aman Git untuk Developer