Navigation Component — pustaka Android Jetpack untuk implementasi navigasi antar layar aplikasi. Komponen ini memusatkan manajemen tumpukan fragmen, tautan dalam, dan pengiriman argumen. Menjadi bagian dari Jetpack sejak 2018 dan direkomendasikan oleh Google untuk semua proyek baru. Baca selengkapnya di panduan resmi Google.
Poin Penting
Navigation Component — pustaka Android Jetpack (androidx.navigation) yang menyediakan API seragam untuk navigasi. Mencakup tiga elemen kunci: Navigation Graph (grafik navigasi), NavHostFragment (wadah untuk layar), dan NavController (pengontrol transisi). Komponen secara otomatis mengelola tumpukan kembali dan mendukung deep links.
Sebelum Navigation Component, pengembang mengelola fragmen secara manual melalui FragmentManager. Hal ini menyebabkan kode yang terfragmentasi: setiap layar memiliki aturan navigasi sendiri, status tumpukan kembali berbeda, dan deep links memerlukan implementasi terpisah. Navigation Component menyatukan skenario ini. Menurut Google (2026), pustaka ini terinstal di 90% proyek Android baru.
Navigation Component terintegrasi dengan pustaka Jetpack lainnya: LiveData, ViewModel, Material Design. Mendukung fragmen XML dan Jetpack Compose melalui ekstensi navigation-compose. Rilis stabil — 2.8.x (2025), versi Android minimal — API 14.
NavGraph — sumber daya XML (res/navigation/nav_graph.xml) yang mendefinisikan semua layar aplikasi dan hubungan antar mereka. Setiap layar adalah simpul (destination) yang dapat berupa Fragment, Activity, atau Composable. Hubungan antar simpul adalah action, yang menentukan arah transisi.
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
app:startDestination="@+id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name=".HomeFragment"
android:label="Beranda"
tools:layout="@layout/fragment_home">
<action
android:id="@+id/action_home_to_detail"
app:destination="@+id/detailFragment"
app:enterAnim="@anim/slide_in_right"
app:exitAnim="@anim/slide_out_left"
app:popEnterAnim="@anim/slide_in_left"
app:popExitAnim="@anim/slide_out_right" />
</fragment>
<fragment
android:id="@+id/detailFragment"
android:name=".DetailFragment"
android:label="Detail"
tools:layout="@layout/fragment_detail">
<argument android:name="itemId"
app:argType="integer"
android:defaultValue="0" />
</fragment>
</navigation>Atribut startDestination menetapkan layar pertama yang ditampilkan saat startup. Action menentukan tujuan (destination) dan animasi opsional. Argumen (argument) menggambarkan parameter yang dikirim ke layar — tipe dan nilai default.
NavHostFragment — wadah yang ditempatkan di tata letak Activity dan menampilkan layar navigasi saat ini. NavHostFragment secara otomatis mengganti fragmen saat NavController.navigate() dipanggil. NavController — objek yang mengelola navigasi: transisi, kembali, pemeriksaan rute saat ini.
// Layout Activity: activity_main.xml
// <androidx.fragment.app.FragmentContainerView
// android:id="@+id/nav_host_fragment"
// android:name="androidx.navigation.fragment.NavHostFragment"
// app:navGraph="@navigation/nav_graph"
// app:defaultNavHost="true" />
class MainActivity : AppCompatActivity() {
private val navController by lazy {
(findViewById<NavHostFragment>(R.id.nav_host_fragment))
.navController
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// NavigationUI menghubungkan NavController dengan AppBar
setupActionBarWithNavController(navController)
}
// Transisi ke layar detail
fun openDetail(itemId: Long) {
val bundle = Bundle().apply {
putLong("itemId", itemId)
}
navController.navigate(R.id.action_home_to_detail, bundle)
}
override fun onSupportNavigateUp() =
navController.navigateUp() || super.onSupportNavigateUp()
}app:defaultNavHost="true" — atribut penting: mencegat tombol sistem 'Kembali' dan menyerahkan kendali ke NavController. NavigationUI — utilitas untuk menghubungkan NavController dengan AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController mengaktifkan panah 'Ke atas' pada layar bersarang.
Navigation Component mendukung animasi transisi kustom, yang ditentukan dalam action atau secara terprogram. Animasi didefinisikan oleh empat atribut: enterAnim (munculnya layar baru), exitAnim (menghilangnya layar saat ini), popEnterAnim (muncul saat kembali), dan popExitAnim (menghilang saat kembali).
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="100%"
android:toXDelta="0%"
android:duration="300" />
</set>
// Transisi terprogram dengan animasi
val navOptions = NavOptions.Builder()
.setEnterAnim(R.anim.slide_in_right)
.setExitAnim(R.anim.slide_out_left)
.setPopEnterAnim(R.anim.slide_in_left)
.setPopExitAnim(R.anim.slide_out_right)
.build()
navController.navigate(R.id.detailFragment, args, navOptions)Animasi bekerja dengan Fragment di tingkat FragmentTransaction. Untuk Jetpack Compose, animasi ditentukan melalui NavOptionsCompat menggunakan Compose Animation. Navigation Component tidak memberlakukan batasan pada jenis animasi — mendukung translate, scale, alpha, dan kombinasinya.
Safe Args — plugin Gradle untuk pengiriman data aman tipe antar layar. Plugin menganalisis NavGraph, menghasilkan kelas Directions dan Args dengan tipe bidang spesifik. Pada tahap kompilasi, kesesuaian tipe diperiksa — kesalahan MissingArgumentException terdeteksi sebelum aplikasi dijalankan.
// build.gradle (module)
plugins {
id 'androidx.navigation.safeargs.kotlin'
}
// Safe Args menghasilkan: DetailFragmentArgs, HomeFragmentDirections
// Penggunaan di HomeFragment:
val action = HomeFragmentDirections
.actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)
// Penggunaan di DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId bertipe Long, null tidak dapat dikirim
override fun onViewCreated(...) {
super.onViewCreated(...)
loadItem(args.itemId)
}navArgs() — delegasi Kotlin untuk mendapatkan argumen di Fragment atau Activity. Plugin mendukung primitif, string, Parcelable, Serializable, Enum, dan array. Untuk objek kompleks, gunakan pengiriman ID dengan pemuatan dari ViewModel atau basis data.
Deep Link — tautan eksternal yang membuka layar tertentu aplikasi. Navigation Component menangani deep links melalui atribut app:deepLink di NavGraph. Sistem membuat PendingIntent yang memulihkan tumpukan navigasi ke layar tujuan, atau membuat tumpukan baru jika aplikasi tidak berjalan.
<fragment android:id="@+id/profileFragment"
android:name=".ProfileFragment">
<deepLink
app:uri="https://example.com/profile/{userId}" />
<argument
android:name="userId"
app:argType="string" />
</fragment>
// Pembuatan Deep Link secara terprogram
val pendingIntent = NavDeepLinkBuilder(context)
.setGraph(R.navigation.nav_graph)
.setDestination(R.id.profileFragment)
.setArguments(Bundle().apply {
putString("userId", "user_123")
})
.createPendingIntent()Deep Links mendukung templat URI dengan jalur dan parameter query, intent action, dan mime type. Placeholder ({userId}) secara otomatis dipetakan ke argumen destination. Navigation Component juga menangani deep links implisit melalui AndroidManifest — cukup tambahkan intent-filter ke Activity dengan NavHostFragment.
Navigation Compose (androidx.navigation:navigation-compose) — ekstensi Navigation Component untuk Jetpack Compose. API mempertahankan konsep NavController dan NavHost, tetapi layar adalah fungsi Composable, bukan Fragment. NavHost menerima lambda composable untuk setiap rute.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyAppTheme {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "home"
) {
composable("home") {
HomeScreen(
onItemClick = { id ->
navController.navigate("detail/$id")
}
)
}
composable(
route = "detail/{itemId}",
arguments = listOf(
navArgument("itemId") {
type = NavType.LongType
}
)
) { backStackEntry ->
val itemId = backStackEntry
.arguments?.getLong("itemId") ?: 0L
DetailScreen(itemId = itemId)
}
}
}
}
}
}Navigation Compose menggunakan rute string, bukan id. Parameter dikirim melalui templat rute ("detail/{itemId}") dan diekstrak dari backStackEntry. rememberNavController() mempertahankan NavController saat rekomposisi. Untuk Type Safety di Compose, modul navigation-compose-type-safety (eksperimental) direkomendasikan.
Pertanyaan Umum
NavHost — wadah untuk menampilkan layar navigasi. Diimplementasikan melalui NavHostFragment di tata letak XML. NavHost melacak layar saat ini di NavGraph dan mengelola transisi. Setiap Activity berisi satu NavHostFragment.
Safe Args — plugin Gradle yang menghasilkan kelas argumen aman tipe. Bundle memerlukan penentuan kunci dan tipe secara manual, yang menyebabkan kesalahan runtime. Safe Args memeriksa tipe pada tahap kompilasi dan menyerialisasikan data secara otomatis.
Objek kompleks dikirim melalui ViewModel (bersama antar layar) atau melalui basis data dengan pengiriman ID. Safe Args hanya mendukung primitif, string, dan Parcelable. Google merekomendasikan untuk menghindari pengiriman objek besar melalui argumen navigasi.
Deep Link dikonfigurasi di NavGraph melalui atribut app:deepLink. Navigation Component secara otomatis menangani tautan masuk, membuat PendingIntent melalui NavDeepLinkBuilder, dan memulihkan tumpukan navigasi ke layar tujuan. Mendukung URI, intent action, dan mime type.
Ya. Navigation Compose (androidx.navigation:navigation-compose) menyediakan NavHost untuk Compose. API mirip dengan versi XML, tetapi layar adalah fungsi Composable. NavController digunakan sama di kedua versi. Google merekomendasikan Navigation Compose untuk proyek baru di Compose.
Ringkasan
Kami akan mengembangkan aplikasi seluler turnkey
IT Sectr membuat aplikasi iOS dan Android untuk startup dan bisnis sejak 2017. Kami akan memberi saran dan mengusulkan solusi terbaik.
Baca juga