Navigation Component là thư viện Android Jetpack để triển khai điều hướng giữa các màn hình ứng dụng. Thành phần này tập trung hóa việc quản lý ngăn xếp fragment, liên kết sâu và truyền đối số. Nó là một phần của Jetpack từ năm 2018 và được Google khuyến nghị cho tất cả các dự án mới. Đọc thêm trong hướng dẫn chính thức của Google.
Những điểm chính
Navigation Component là thư viện Android Jetpack (androidx.navigation) cung cấp API thống nhất cho điều hướng. Nó bao gồm ba yếu tố chính: Navigation Graph (đồ thị điều hướng), NavHostFragment (vùng chứa màn hình) và NavController (bộ điều khiển chuyển tiếp). Thành phần này tự động quản lý ngăn xếp quay lại và hỗ trợ liên kết sâu.
Trước Navigation Component, các nhà phát triển quản lý fragment thủ công qua FragmentManager. Điều này dẫn đến mã bị phân mảnh: mỗi màn hình có quy tắc điều hướng riêng, trạng thái ngăn xếp quay lại khác nhau và liên kết sâu yêu cầu triển khai riêng. Navigation Component đã thống nhất các kịch bản này. Theo Google (2026), thư viện được cài đặt trong 90% dự án Android mới.
Navigation Component tích hợp với các thư viện Jetpack khác: LiveData, ViewModel, Material Design. Nó hỗ trợ cả fragment XML và Jetpack Compose thông qua tiện ích mở rộng navigation-compose. Phiên bản ổn định — 2.8.x (2025), phiên bản Android tối thiểu — API 14.
NavGraph là tài nguyên XML (res/navigation/nav_graph.xml) xác định tất cả các màn hình ứng dụng và kết nối giữa chúng. Mỗi màn hình là một điểm đến (destination), có thể là Fragment, Activity hoặc Composable. Kết nối giữa các điểm đến là các hành động (action) xác định hướng chuyển tiếp.
<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="Trang chủ"
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="Chi tiết"
tools:layout="@layout/fragment_detail">
<argument android:name="itemId"
app:argType="integer"
android:defaultValue="0" />
</fragment>
</navigation>Thuộc tính startDestination đặt màn hình đầu tiên được hiển thị khi khởi động. Một hành động xác định điểm đến mục tiêu và hoạt ảnh tùy chọn. Đối số mô tả các tham số được truyền đến màn hình — kiểu và giá trị mặc định.
NavHostFragment là vùng chứa được đặt trong bố cục Activity và hiển thị màn hình điều hướng hiện tại. NavHostFragment tự động chuyển đổi fragment khi NavController.navigate() được gọi. NavController là đối tượng quản lý điều hướng: chuyển tiếp, quay lại và kiểm tra tuyến đường hiện tại.
// 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 liên kết NavController với AppBar
setupActionBarWithNavController(navController)
}
// Điều hướng đến màn hình chi tiết
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" là thuộc tính quan trọng: nó chặn nút Quay lại của hệ thống và chuyển quyền điều khiển cho NavController. NavigationUI là tiện ích để liên kết NavController với AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController kích hoạt mũi tên Quay lại trên các màn hình lồng nhau.
Navigation Component hỗ trợ hoạt ảnh chuyển tiếp tùy chỉnh, được đặt trong hành động hoặc theo chương trình. Hoạt ảnh được xác định bởi bốn thuộc tính: enterAnim (xuất hiện màn hình mới), exitAnim (biến mất màn hình hiện tại), popEnterAnim (xuất hiện khi quay lại) và popExitAnim (biến mất khi quay lại).
<?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>
// Chuyển tiếp lập trình với hoạt ảnh
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)Hoạt ảnh hoạt động với Fragment ở cấp FragmentTransaction. Đối với Jetpack Compose, hoạt ảnh được đặt qua NavOptionsCompat sử dụng Compose Animation. Navigation Component không áp đặt hạn chế về loại hoạt ảnh — translate, scale, alpha và kết hợp của chúng được hỗ trợ.
Safe Args là plugin Gradle để truyền dữ liệu an toàn kiểu giữa các màn hình. Plugin phân tích NavGraph, tạo các lớp Directions và Args với các kiểu trường cụ thể. Việc khớp kiểu được kiểm tra tại thời điểm biên dịch — MissingArgumentException được phát hiện trước khi ứng dụng chạy.
// build.gradle (module)
plugins {
id 'androidx.navigation.safeargs.kotlin'
}
// Safe Args tạo: DetailFragmentArgs, HomeFragmentDirections
// Sử dụng trong HomeFragment:
val action = HomeFragmentDirections
.actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)
// Sử dụng trong DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId có kiểu Long, không thể truyền null
override fun onViewCreated(...) {
super.onViewCreated(...)
loadItem(args.itemId)
}navArgs() là đại biểu Kotlin để lấy đối số trong Fragment hoặc Activity. Plugin hỗ trợ kiểu nguyên thủy, chuỗi, Parcelable, Serializable, Enum và mảng. Đối với các đối tượng phức tạp, hãy truyền ID và tải từ ViewModel hoặc cơ sở dữ liệu.
Deep Link là liên kết bên ngoài mở một màn hình cụ thể của ứng dụng. Navigation Component xử lý liên kết sâu thông qua thuộc tính app:deepLink trong NavGraph. Hệ thống tạo PendingIntent khôi phục ngăn xếp điều hướng đến màn hình mục tiêu hoặc tạo ngăn xếp mới nếu ứng dụng không chạy.
<fragment android:id="@+id/profileFragment"
android:name=".ProfileFragment">
<deepLink
app:uri="https://example.com/profile/{userId}" />
<argument
android:name="userId"
app:argType="string" />
</fragment>
// Tạo Deep Link theo chương trình
val pendingIntent = NavDeepLinkBuilder(context)
.setGraph(R.navigation.nav_graph)
.setDestination(R.id.profileFragment)
.setArguments(Bundle().apply {
putString("userId", "user_123")
})
.createPendingIntent()Liên kết sâu hỗ trợ mẫu URI với đường dẫn và tham số truy vấn, intent action và loại mime. Trình giữ chỗ ({userId}) tự động ánh xạ đến đối số điểm đến. Navigation Component cũng xử lý liên kết sâu ngầm qua AndroidManifest — chỉ cần thêm intent-filter vào Activity có NavHostFragment.
Navigation Compose (androidx.navigation:navigation-compose) là tiện ích mở rộng của Navigation Component cho Jetpack Compose. API bảo tồn khái niệm NavController và NavHost, nhưng màn hình là các hàm Composable thay vì Fragment. NavHost chấp nhận lambda composable cho mỗi tuyến đường.
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 sử dụng tuyến đường chuỗi thay vì id. Tham số được truyền qua mẫu tuyến đường ("detail/{itemId}") và được trích xuất từ backStackEntry. rememberNavController() bảo tồn NavController qua các lần tái tổ hợp. Để an toàn kiểu trong Compose, mô-đun navigation-compose-type-safety (thử nghiệm) được khuyến nghị.
Câu hỏi thường gặp
NavHost là vùng chứa để hiển thị các màn hình điều hướng. Nó được triển khai qua NavHostFragment trong bố cục XML. NavHost theo dõi màn hình hiện tại trong NavGraph và quản lý các chuyển tiếp. Mỗi Activity chứa một NavHostFragment.
Safe Args là plugin Gradle tạo ra các lớp đối số an toàn kiểu. Bundle yêu cầu chỉ định thủ công khóa và kiểu, dẫn đến lỗi thời gian chạy. Safe Args kiểm tra kiểu tại thời điểm biên dịch và tự động tuần tự hóa dữ liệu.
Các đối tượng phức tạp được truyền qua ViewModel (chia sẻ giữa các màn hình) hoặc qua cơ sở dữ liệu bằng cách truyền ID. Safe Args chỉ hỗ trợ kiểu nguyên thủy, chuỗi và Parcelable. Google khuyến nghị tránh truyền các đối tượng lớn qua đối số điều hướng.
Deep Link được cấu hình trong NavGraph qua thuộc tính app:deepLink. Navigation Component tự động xử lý các liên kết đến, tạo PendingIntent qua NavDeepLinkBuilder và khôi phục ngăn xếp điều hướng đến màn hình mục tiêu. Hỗ trợ URI, intent action và loại mime.
Có. Navigation Compose (androidx.navigation:navigation-compose) cung cấp NavHost cho Compose. API tương tự như phiên bản XML, nhưng màn hình là các hàm Composable. NavController được sử dụng giống nhau ở cả hai phiên bản. Google khuyến nghị Navigation Compose cho các dự án Compose mới.
Tổng kết
Chúng tôi sẽ phát triển ứng dụng di động chìa khóa trao tay
IT Sectr tạo các ứng dụng iOS và Android cho các công ty khởi nghiệp và doanh nghiệp từ năm 2017. Chúng tôi sẽ tư vấn và đề xuất giải pháp tốt nhất cho bạn.
Đọc thêm