Menyiapkan Kembali prediktif

Untuk mengaktifkan animasi kembali prediktif, Anda harus memilih untuk mendukung gestur kembali prediktif. Untuk mengaktifkan, tambahkan android:enableOnBackInvokedCallback="true" ke tag <application> atau tag <activity> individual dalam file AndroidManifest.xml Anda.

Mengaktifkan animasi sistem default

Animasi sistem kembali ke layar utama, lintas aktivitas, dan lintas tugas tersedia di perangkat Android 15 dan yang lebih baru untuk aplikasi yang telah bermigrasi ke API penanganan kembali yang didukung.

  • Kembali ke layar utama: Mengembalikan pengguna ke layar utama.
  • Lintas aktivitas: Transisi antar-aktivitas dalam aplikasi.
  • Lintas tugas: Transisi antar-tugas.

Animasi ini diaktifkan secara default di Android 15 dan yang lebih tinggi. Di perangkat yang menjalankan Android 13 atau 14, pengguna dapat mengaktifkannya melalui Opsi developer.

Untuk mendapatkan animasi sistem, update dependensi Activity AndroidX ke 1.6.0 atau yang lebih tinggi.

Mengaktifkan kembali prediktif dengan Navigation Compose

Untuk menggunakan kembali prediktif di Navigation Compose, pastikan Anda menggunakan library navigation-compose 2.8.0 atau yang lebih tinggi.

Navigation Compose secara otomatis melakukan cross-fade antarlayar saat pengguna menggeser kembali:

Gambar 2. Animasi dalam aplikasi crossfade default di SociaLite.

Saat menavigasi, Anda dapat membuat transisi kustom dengan popEnterTransition dan popExitTransition. Saat diterapkan ke NavHost, pengubah ini memungkinkan Anda menentukan cara animasi layar masuk dan keluar. Anda dapat menggunakannya untuk membuat berbagai efek, seperti penskalaan, pengelihatan buram, atau geser.

Dalam contoh ini, scaleOut digunakan dalam popExitTransition untuk menskalakan layar keluar saat pengguna menavigasi kembali. Selain itu, parameter transformOrigin menentukan titik tempat animasi penskalaan terjadi. Secara default, titik ini adalah bagian tengah layar (0.5f, 0.5f). Anda dapat menyesuaikan nilai ini agar penskalaan berasal dari titik yang berbeda.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)

Kode ini menghasilkan hasil berikut:

Gambar 3. Animasi dalam aplikasi kustom di SociaLite.

popEnterTransition dan popExitTransition secara khusus mengontrol animasi saat memunculkan data sebelumnya, misalnya dengan gestur kembali. Anda juga dapat menggunakan enterTransition dan exitTransition untuk menentukan animasi untuk masuk dan keluar dari composable secara umum, bukan hanya untuk kembali prediktif. Jika Anda hanya menetapkan enterTransition dan exitTransition, keduanya akan digunakan untuk navigasi reguler dan memunculkan data sebelumnya. Namun, penggunaan popEnterTransition dan popExitTransition memungkinkan Anda membuat animasi yang berbeda untuk navigasi kembali.

Mengintegrasikan dengan transisi elemen bersama

Transisi elemen bersama memberikan koneksi visual yang lancar antara composable dengan konten bersama, yang sering digunakan untuk navigasi.

Gambar 4. Transisi elemen bersama dengan kembali prediktif di Navigation Compose.

Untuk menggunakan elemen bersama dengan Navigation Compose, lihat Kembali prediktif dengan elemen bersama.

Mendukung kembali prediktif dengan komponen Compose Material

Banyak komponen di library Material Compose dirancang agar berfungsi dengan lancar dengan gestur kembali prediktif. Untuk mengaktifkan animasi kembali prediktif dalam komponen ini, sertakan dependensi Material3 terbaru (androidx.compose.material3:material3-*:1.3.0 atau yang lebih tinggi) dalam project Anda.

Komponen Material yang mendukung animasi kembali prediktif meliputi:

SearchBar dan ModalBottomSheet secara otomatis menganimasikan dengan gestur kembali prediktif. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet, dan DismissibleNavigationDrawer mengharuskan Anda meneruskan drawerState ke composable konten sheet masing-masing.

Menguji animasi gestur kembali prediktif

Jika masih menggunakan Android 13 atau Android 14, Anda dapat menguji animasi kembali ke layar utama.

Untuk menguji animasi ini, ikuti langkah-langkah berikut:

  1. Di perangkat, buka Setelan > Sistem > Opsi developer.
  2. Pilih Animasi kembali prediktif.
  3. Luncurkan aplikasi yang telah diupdate, dan gunakan gestur kembali untuk melihat cara kerjanya.

Di Android 15 dan yang lebih baru, fitur ini diaktifkan secara default.

Referensi lainnya