Layar pembuka

Mulai Android 12, aplikasi diluncurkan dengan layar pembuka sistem yang menyertakan gerakan ke dalam aplikasi saat peluncuran, layar pembuka yang menampilkan ikon aplikasi, dan transisi ke aplikasi itu sendiri. Layar pembuka adalah Window dan oleh karena itu mencakup Activity.

Gambar 1. Layar pembuka.

Pengalaman layar pembuka tidak hanya menghadirkan elemen desain standar ke setiap peluncuran aplikasi, tetapi juga elemen yang dapat disesuaikan sehingga aplikasi Anda dapat mempertahankan branding yang unik.

Untuk menyesuaikan layar pembuka dari aplikasi Anda, gunakan library compat SplashScreen Jetpack. Library ini menggabungkan API SplashScreen platform dan berfungsi dengan ComponentActivity apa pun, termasuk aktivitas yang menetapkan UI-nya dengan Compose menggunakan setContent.

Cara kerja layar pembuka

Jika pengguna meluncurkan aplikasi saat proses aplikasi tidak berjalan (cold start) atau Activity tidak dibuat (warm start), peristiwa berikut akan terjadi:

  1. Sistem menampilkan layar pembuka menggunakan tema dan animasi yang Anda tentukan.

  2. Setelah aplikasi siap, layar pembuka akan ditutup dan aplikasi akan ditampilkan.

Layar pembuka tidak pernah ditampilkan selama hot start.

Elemen dan mekanisme layar pembuka

Elemen layar pembuka ditentukan oleh file resource XML dalam file manifes Android. Setiap elemen memiliki versi tema terang dan gelap.

Elemen layar pembuka yang dapat disesuaikan terdiri dari ikon aplikasi, latar belakang ikon, dan latar belakang jendela:

Layar pembuka dengan info bernomor untuk elemen yang dapat disesuaikan
Gambar 2. Elemen layar pembuka yang dapat disesuaikan.

Pertimbangkan elemen berikut, yang ditampilkan dalam gambar 2:

1 Ikon aplikasi harus berupa vektor drawable. Logo ini dapat berupa gambar statis atau animasi. Meskipun animasi dapat memiliki durasi tidak terbatas, sebaiknya jangan melebihi 1.000 milidetik. Ikon peluncur adalah default.

2 Latar belakang ikon bersifat opsional dan berguna jika Anda memerlukan lebih banyak kontras antara ikon dan latar belakang jendela. Jika Anda menggunakan ikon adaptif, latar belakangnya akan ditampilkan jika kontrasnya cukup dengan latar belakang jendela.

3 Seperti halnya ikon adaptif, sepertiga latar depan disamarkan.

4 Latar belakang jendela terdiri dari satu warna buram. Jika latar belakang jendela disetel dan berwarna polos, latar belakang ini akan digunakan secara default saat atribut tidak disetel.

Dimensi layar pembuka

Ikon layar pembuka menggunakan spesifikasi yang sama dengan ikon adaptif, sebagai berikut:

  • Gambar dengan merek: Harus berukuran 200×80 dp.
  • Ikon aplikasi dengan latar belakang ikon: harus berukuran 240×240 dp dan sesuai dengan lingkaran berdiameter 160 dp.
  • Ikon aplikasi tanpa latar belakang ikon: harus berukuran 288×288 dp dan sesuai dengan lingkaran berdiameter 192 dp.

Misalnya, jika ukuran penuh gambar adalah 300×300 dp, ikon harus sesuai dengan lingkaran berdiameter 200 dp. Semua yang ada di luar lingkaran akan terlihat (tersamarkan).

Dimensi ikon layar pembuka dengan latar belakang ikon solid dan transparan
Gambar 3. Dimensi ikon layar pembuka untuk latar belakang solid dan transparan.

Animasi layar pembuka dan urutan peluncuran

Latensi tambahan sering dikaitkan dengan peluncuran aplikasi saat cold start. Menambahkan ikon animasi ke layar pembuka Anda memiliki daya tarik estetika yang terlihat jelas dan memberikan pengalaman yang lebih premium. Riset pengguna menunjukkan bahwa waktu startup yang dirasakan lebih sedikit saat melihat animasi.

Animasi layar pembuka disematkan dalam komponen urutan peluncuran, seperti yang ditunjukkan pada gambar 4.

Urutan peluncuran dalam dua belas frame berturut-turut, dimulai dengan ikon peluncur yang diketuk dan mengisi layar saat diperbesar
Gambar 4. Urutan peluncuran.

  1. Animasi enter (masuk): ini terdiri dari tampilan sistem ke layar pembuka. Animasi ini dikontrol oleh sistem dan tidak dapat disesuaikan.

  2. Layar pembuka (ditampilkan selama bagian "tunggu" dari urutan): layar pembuka dapat disesuaikan, sehingga Anda dapat menyediakan animasi dan branding logo Anda sendiri. Layar pembuka harus memenuhi persyaratan yang dijelaskan di halaman ini agar berfungsi dengan baik.

  3. Animasi exit (keluar): ini terdiri dari animasi yang menyembunyikan layar pembuka. Jika ingin menyesuaikannya, gunakan tampilan SplashScreenViewProvider dan ikonnya. Anda dapat menjalankan animasi apa pun di sana menggunakan setelan transformasi, opasitas, dan warna. Dalam hal ini, hapus layar pembuka secara manual jika animasi telah selesai.

Saat menjalankan animasi ikon, peluncuran aplikasi memberi Anda opsi untuk melewati urutan jika aplikasi sudah siap sebelumnya. Aplikasi akan memicu onResume() atau waktu layar pembuka berakhir secara otomatis, jadi pastikan gerakan dapat dilewati dengan baik. Layar pembuka hanya boleh ditutup dengan onResume() jika aplikasi stabil dari sudut pandang visual, sehingga tidak perlu indikator lingkaran berputar tambahan. Antarmuka yang tidak lengkap dapat membingungkan pengguna dan mungkin memberikan kesan tidak dapat diprediksi atau kurang tepat.

Persyaratan animasi layar pembuka

Layar pembuka Anda harus mematuhi spesifikasi berikut:

  • Setel satu warna latar belakang jendela tanpa transparansi. Mode Siang dan Malam didukung dengan library compat SplashScreen.

  • Pastikan ikon animasi memenuhi spesifikasi berikut:

    • Format: ikon harus berupa XML AnimatedVectorDrawable (AVD).
    • Dimensi: ikon AVD harus berukuran empat kali lebih besar dari ikon adaptif, seperti berikut:
      • Area ikon harus 432 dp—dengan kata lain, empat kali area 108 dp dari ikon adaptif yang tidak disamarkan.
      • Dua pertiga bagian dalam gambar terlihat pada ikon peluncur, dan harus berukuran 288 dp—dengan kata lain, empat kali 72 dp yang membentuk area dalam yang disamarkan pada ikon adaptif.
    • Durasi: sebaiknya jangan melebihi 1.000 md untuk ponsel. Anda dapat menggunakan awal yang tertunda, tetapi tidak boleh lebih dari 166 milidetik. Jika waktu startup aplikasi lebih dari 1.000 md, sebaiknya gunakan animasi berulang.

  • Tetapkan waktu yang sesuai untuk menutup layar pembuka, yang terjadi saat aplikasi Anda menggambar frame pertamanya. Anda dapat menyesuaikannya lebih lanjut seperti yang dijelaskan di bagian tentang membiarkan layar pembuka tetap muncul di layar untuk waktu yang lebih lama.

Referensi layar pembuka

Gambar 5. Contoh AVD.

Download starter kit contoh, yang menunjukkan cara membuat, memformat, dan mengekspor animasi ke AVD. Paket ini mencakup:

  • File project Adobe After Effects animasi.
  • File XML AVD final yang diekspor.
  • Contoh GIF animasi.

Dengan mendownload file ini, Anda menyetujui Persyaratan Layanan Google.

Kebijakan Privasi Google menjelaskan cara penanganan data di layanan ini.

Menyesuaikan layar pembuka di aplikasi Anda

Secara default, SplashScreen menggunakan windowBackground tema Anda jika windowBackground adalah satu warna. Untuk menyesuaikan layar pembuka, tambahkan atribut ke tema aplikasi.

Anda dapat menyesuaikan layar pembuka aplikasi dengan melakukan salah satu tindakan berikut:

  • Tetapkan atribut tema untuk mengubah tampilannya.

  • Membiarkannya tetap muncul di layar untuk waktu yang lebih lama.

  • Menyesuaikan animasi untuk menutup layar pembuka.

Mulai

Library SplashScreen inti menghadirkan layar pembuka Android 12 ke semua perangkat dari API 23. Untuk menambahkannya ke project, tambahkan cuplikan berikut ke file build.gradle Anda:

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.2.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.2.0")
}

Kemudian, buat tema layar pembuka yang diwarisi dari Theme.SplashScreen, tetapkan postSplashScreenTheme ke tema yang digunakan aktivitas setelahnya, terapkan tema layar pembuka dalam manifes Anda (lihat Memigrasikan implementasi layar pembuka yang ada ke Android 12), dan panggil installSplashScreen() dalam aktivitas awal sebelum memanggil super.onCreate(), seperti yang ditunjukkan dalam contoh di bagian berikut.

Menetapkan tema untuk layar pembuka untuk mengubah tampilannya

Anda dapat menentukan atribut berikut di tema Activity untuk menyesuaikan layar pembuka aplikasi Anda. Jika Anda sudah memiliki implementasi layar pembuka yang lama dan telah menggunakan atribut seperti android:windowBackground, sebaiknya sediakan file resource alternatif untuk Android 12 dan versi yang lebih baru.

  1. Gunakan windowSplashScreenBackground untuk mengisi latar belakang dengan satu warna tertentu:

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. Gunakan windowSplashScreenAnimatedIcon untuk mengganti ikon di bagian tengah jendela mulai.

    Khusus untuk aplikasi yang menargetkan Android 12 (level API 32), lakukan hal berikut:

    Jika objek dapat dianimasikan dan digambar melalui AnimationDrawable dan AnimatedVectorDrawable, setel windowSplashScreenAnimationDuration untuk memutar animasi saat menampilkan jendela awal. Hal ini tidak diperlukan untuk Android 13, karena durasi disimpulkan langsung dari AnimatedVectorDrawable.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>

  3. Gunakan windowSplashScreenAnimationDuration untuk menunjukkan durasi animasi ikon layar pembuka. Setelan ini tidak akan berpengaruh pada waktu aktual saat layar pembuka ditampilkan, tetapi Anda dapat mengambilnya saat menyesuaikan animasi keluar layar pembuka menggunakan SplashScreenViewProvider.iconAnimationDurationMillis. Lihat bagian berikut tentang mempertahankan layar pembuka di layar untuk waktu yang lebih lama untuk mengetahui detail selengkapnya.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>

  4. Gunakan windowSplashScreenIconBackgroundColor untuk menetapkan latar belakang di balik ikon layar pembuka. Ini berguna jika tidak ada cukup kontras antara latar belakang jendela dan ikon.

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

  5. Anda dapat menggunakan windowSplashScreenBrandingImage untuk menyetel gambar agar ditampilkan di bagian bawah layar pembuka. Namun, pedoman desain menyarankan untuk tidak menggunakan gambar dengan merek.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

  6. Anda dapat menggunakan windowSplashScreenBehavior untuk menentukan apakah aplikasi Anda selalu menampilkan ikon di layar pembuka di Android 13 dan yang lebih tinggi. Nilai defaultnya adalah 0, yang menampilkan ikon di layar pembuka jika aktivitas peluncuran menetapkan splashScreenStyle ke SPLASH_SCREEN_STYLE_ICON, atau mengikuti perilaku sistem jika aktivitas peluncuran tidak menentukan gaya. Jika Anda memilih untuk tidak pernah menampilkan layar pembuka kosong dan selalu ingin ikon animasi ditampilkan, tetapkan nilai ini ke icon_preferred.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

Membiarkan layar pembuka tetap muncul di layar untuk waktu yang lebih lama

Layar pembuka ditutup setelah aplikasi Anda selesai menggambar frame pertamanya. Jika Anda perlu memuat sedikit data, seperti memuat setelan dalam aplikasi dari disk lokal secara asinkron, gunakan setKeepOnScreenCondition untuk mempertahankan layar pembuka di layar hingga data siap. Kondisi ini dievaluasi sebelum setiap frame digambar, jadi pastikan prosesnya cepat agar tidak memblokir UI.

Jika aktivitas awal Anda selesai sebelum menggambar—misalnya, dengan tidak menyetel tampilan konten dan menyelesaikannya sebelum onResume—Anda tidak perlu menetapkan kondisi.

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}

Menyesuaikan animasi untuk menutup layar pembuka

Anda dapat menyesuaikan animasi layar pembuka lebih lanjut dengan setOnExitAnimationListener. Pemroses menerima SplashScreenViewProvider yang memberi Anda tampilan layar pembuka untuk dianimasikan. Panggil remove() saat animasi berakhir.

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}

Pada awal callback ini, animasi vektor drawable pada layar pembuka dimulai. Bergantung pada durasi peluncuran aplikasi, drawable dapat berada di tengah animasinya. Gunakan SplashScreenViewProvider.iconAnimationStartMillis untuk mengetahui kapan animasi dimulai. Anda dapat menghitung sisa durasi animasi ikon sebagai berikut:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)

Referensi lainnya