Navigation Compose: apa itu, arsitektur dan cara kerja dalam pengembangan

Apa itu Navigation Compose?

Navigation Compose — adalah pustaka dari rangkaian Jetpack yang menyediakan kerangka navigasi untuk aplikasi Compose. Pustaka ini didasarkan pada prinsip yang sama dengan Navigation Component untuk sistem View, tetapi disesuaikan dengan sifat deklaratif Compose: alih-alih FragmentTransaction, digunakan fungsi composable, dan graf navigasi dibangun melalui Kotlin DSL.

Perbedaan utama antara Navigation Compose dan navigasi klasik — tidak adanya FragmentManager. Setiap layar adalah fungsi composable yang dirender di NavHost saat route cocok. Back stack menyimpan bukan Fragment, melainkan catatan dengan route, argumen, dan status. Ini menyederhanakan arsitektur dan menghilangkan konflik siklus hidup yang khas pada navigasi Fragment.

Menurut data Google (2025), Navigation Compose telah melalui perjalanan dari experimental ke stable dan menjadi bagian dari Jetpack sejak versi 2.8.0. Pustaka ini mendukung Material3, Type-Safe Navigation (melalui Kotlin Serialization), graf bersarang, dan modularisasi. Satu-satunya batasan — pustaka tidak mendukung multi-back stack untuk BottomNavigation tanpa konfigurasi manual, meskipun Google sedang mengerjakannya.

Arsitektur Navigation Compose dibangun di sekitar tiga entitas: NavController (manajemen tumpukan), NavHost (wadah graf), dan NavDestination (rute terpisah dengan composable). Interaksi di antara mereka bersifat deklaratif: pengembang mendeskripsikan rute dan argumen, pustaka menangani status pemuatan, penyimpanan, dan pemulihan.

NavController: pembuatan dan metode navigasi

NavController — elemen pusat Navigation Compose yang mengelola tumpukan navigasi. Dibuat melalui rememberNavController() dan diteruskan ke NavHost. NavController menyimpan back stack, titik masuk saat ini, dan mendukung tindakan yang ditunda (deeplink setelah inisialisasi graf).

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("profile/{userId}") { backStackEntry ->
            ProfileScreen(
                userId = backStackEntry.arguments?.getString("userId") ?: ""
            )
        }
    }
}

Metode utama NavController: navigate(route) — navigasi ke rute, popBackStack() — kembali ke layar sebelumnya, navigateAndClear(route) — navigasi dengan membersihkan tumpukan. NavOptions menentukan perilaku: launchSingleTop mencegah duplikasi, popUpTo membersihkan tumpukan hingga rute yang ditentukan, restoreState memulihkan status sebelumnya.

Untuk mengakses NavController dari fungsi composable yang bersarang dalam, gunakan NavHostController melalui CompositionLocal. LocalNavController disediakan di ScopedNavController di dalam NavHost. Di luar NavHost (misalnya di BottomNavigation), pengontrol diteruskan melalui parameter atau ViewModel.

NavHost: membangun graf rute

NavHost — adalah wadah composable yang menghubungkan NavController dengan graf rute. Setiap rute dideklarasikan melalui composable(route, arguments, deepLinks), di mana route adalah string rute dengan placeholder opsional {param}. Saat rute saat ini cocok dengan route, NavHost merender blok composable yang sesuai.

Graf rute dibangun secara hierarkis: graf dapat bersarang melalui navigation() untuk mengelompokkan rute di dalam modul. Graf bersarang memiliki startDestination sendiri dan digabungkan di bawah prefiks route bersama. Ini memungkinkan pengorganisasian arsitektur modular, di mana setiap modul fitur mendaftarkan subgrafnya sendiri.

NavHost(
    navController = navController,
    startDestination = "main"
) {
    composable("main") { MainScreen(navController) }
    navigation(
        route = "auth",
        startDestination = "auth/login"
    ) {
        composable("auth/login") { LoginScreen(navController) }
        composable("auth/register") { RegisterScreen(navController) }
    }
}

NavHost secara otomatis menangani tombol Kembali sistem (back press) melalui LocalBackDispatcher. Di Material3 Scaffold, secara default mengambil NavController untuk fungsi BottomNavigation yang benar. NavHost membuat ulang composable saat perubahan rute, tetapi mempertahankan status melalui rememberSaveable untuk bidang input dan gulir.

Mengirim argumen antar layar

Navigation Compose mendukung pengiriman argumen yang diketik antar layar melalui parameter rute dan NavType. Parameter ditentukan dalam route sebagai {paramName} dengan menentukan tipe melalui arguments di composable(). NavType mendukung String, Int, Long, Float, Boolean, Parcelable, dan Serializable.

Argumen diekstrak dari NavBackStackEntry melalui arguments?.getType(key). Untuk parameter wajib gunakan defaultValue, untuk opsional — nullable. Dukungan Parcelable hanya berfungsi dengan Kotlin Parcelize atau pustaka kotlinx.parcelize. Untuk objek kompleks, disarankan mengirim ID dan memuat data melalui ViewModel, bukan menyerialisasikan seluruh objek.

Sejak Navigation 2.8.0, tersedia Type-Safe Navigation dengan Kotlin Serialization: rute didefinisikan sebagai kelas data, argumen sebagai bidang. Ini menggantikan route string dengan objek yang diketik dan menghilangkan kesalahan dalam nama rute. Untuk migrasi, diperlukan plugin Kotlin Serialization dan dependensi navigation-compose-typesafe.

@Serializable
/* sealed class Route */
sealed class ProfileRoute(val route: String) {
    data object Home : ProfileRoute("home")
    data class Profile(val userId: String) : ProfileRoute("profile/{userId}")
}

Tautan dalam (Deep Links) di Navigation Compose

Deep Links — mekanisme navigasi yang memungkinkan membuka layar tertentu aplikasi melalui URL atau intent-filter. Di Navigation Compose, tautan dalam dikonfigurasi melalui parameter deepLinks di composable() dan diproses secara otomatis saat URI cocok dengan pola.

Deep Link didefinisikan sebagai daftar UriPattern: "https://example.com/profile/{userId}". Parameter dari URI secara otomatis dipetakan ke argumen rute. NavController memproses tautan dalam saat memulai aplikasi (melalui intent) dan selama bekerja (melalui implicit deep links). Untuk memproses tautan dalam yang tertunda, gunakan handleDeepLink() di NavController setelah inisialisasi graf.

Menurut Google, konfigurasi tautan dalam direkomendasikan untuk: notifikasi push (Firebase Dynamic Links), verifikasi email, berbagi konten, dan navigasi dari tautan web. Untuk Android 12+ digunakan Digital Asset Links untuk verifikasi otoritas tautan dalam. AndroidManifest.xml harus berisi intent-filter dengan autoVerify="true" untuk membuka tautan tanpa dialog.

composable(
    route = "profile/{userId}",
    arguments = listOf(navArgument("userId") { type = NavType.StringType }),
    deepLinks = listOf(
        navDeepLink { uriPattern = "https://example.com/profile/{userId}" }
    )
) { backStackEntry ->
    ProfileScreen(userId = backStackEntry.arguments?.getString("userId") ?: "")
}

Keterbatasan tautan dalam di Navigation Compose: pustaka tidak mendukung tautan dalam yang ditangguhkan — tautan dalam diproses hanya setelah NavHost sepenuhnya membangun graf. Jika tautan dalam tiba sebelum inisialisasi graf, harus ditangguhkan melalui intent?.data dan diproses di LaunchedEffect. Untuk Firebase Dynamic Links, gunakan Firebase Dynamic Links SDK bersama dengan Navigation Compose.

Animasi transisi antar layar

Navigation Compose mendukung animasi transisi melalui parameter enterTransition, exitTransition, popEnterTransition, dan popExitTransition di composable(). Animasi diimplementasikan melalui Compose Animation API: fadeIn, slideInHorizontally, expandIn, dan lainnya. Secara default, animasi dinonaktifkan — layar diganti seketika.

Skenario animasi umum: slideInHorizontally untuk navigasi maju (layar masuk dari kanan), slideOutHorizontally untuk kembali (layar keluar ke kanan). Untuk BottomNavigation lebih sering digunakan animasi fade tanpa geseran. Animasi diatur melalui NavHost dan diterapkan ke semua composable jika tidak ditentukan secara individual.

NavHost(
    navController = navController,
    startDestination = "home",
    enterTransition = { slideInHorizontally() + fadeIn() },
    exitTransition = { slideOutHorizontally() + fadeOut() },
    popEnterTransition = { fadeIn() },
    popExitTransition = { slideOutHorizontally() + fadeOut() }
) { /* composable */ }

Animasi dapat ditimpa untuk setiap composable secara individual dengan mengirimkan parameter animasi langsung di composable(). Penting: animasi tidak boleh bertentangan dengan animasi sistem back press. Untuk shared element transition, diperlukan pustaka accompanist-navigation-animation atau implementasi kustom melalui Modifier.graphicsLayer. Menurut Android Developers (2025), 80% aplikasi produksi menggunakan animasi slide horizontal untuk navigasi standar.