Navigation Component — ano ito, NavHost at Navigation Graph

Ano ang Navigation Component?

Navigation Component — aklatan ng Android Jetpack (androidx.navigation) na nagbibigay ng pare-parehong API para sa nabigasyon. May kasamang tatlong pangunahing elemento: Navigation Graph (grap ng nabigasyon), NavHostFragment (lalagyan para sa mga screen), at NavController (kontroler ng transisyon). Awtomatikong pinamamahalaan ng komponent ang back stack at sumusuporta sa deep links.

Bago ang Navigation Component, manu-manong pinamamahalaan ng mga developer ang mga fragment sa pamamagitan ng FragmentManager. Ito ay humantong sa pira-pirasong code: bawat screen ay may sariling mga patakaran ng nabigasyon, magkakaiba ang mga estado ng back stack, at ang deep links ay nangangailangan ng hiwalay na pagpapatupad. Pinag-isa ng Navigation Component ang mga sitwasyong ito. Ayon sa Google (2026), ang aklatan ay naka-install sa 90% ng mga bagong proyekto ng Android.

Navigation Component ay sumasama sa iba pang mga aklatan ng Jetpack: LiveData, ViewModel, Material Design. Sinusuportahan ang parehong XML fragment at Jetpack Compose sa pamamagitan ng extension na navigation-compose. Matatag na bersyon — 2.8.x (2025), pinakamababang bersyon ng Android — API 14.

NavGraph: grap ng nabigasyon sa XML

NavGraph — mapagkukunang XML (res/navigation/nav_graph.xml) na tumutukoy sa lahat ng screen ng application at ugnayan sa pagitan ng mga ito. Ang bawat screen ay isang node (destination) na maaaring maging Fragment, Activity, o Composable. Ang mga ugnayan sa pagitan ng mga node ay action, na tumutukoy sa direksyon ng transisyon.

<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="Tahanan"
        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="Mga Detalye"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

Ang katangiang startDestination ay nagtatakda ng unang screen na ipapakita sa pagsisimula. Ang action ay tumutukoy sa target na destination at opsyonal na mga animasyon. Ang mga argumento (argument) ay naglalarawan ng mga parameter na ipinapadala sa screen — uri at default na halaga.

NavHost at NavController: lalagyan at pamamahala

NavHostFragment — lalagyan na inilalagay sa layout ng Activity at nagpapakita ng kasalukuyang screen ng nabigasyon. Awtomatikong nagpapalit ng mga fragment ang NavHostFragment kapag tinawag ang NavController.navigate(). NavController — bagay na namamahala ng nabigasyon: transisyon, pagbabalik, pagsusuri ng kasalukuyang ruta.

// 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)

        // Iniuugnay ng NavigationUI ang NavController sa AppBar
        setupActionBarWithNavController(navController)
    }

    // Transisyon sa screen ng detalye
    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" — mahalagang katangian: hinaharang ang system button na 'Bumalik' at ipinapasa ang kontrol sa NavController. NavigationUI — kagamitan para sa pag-uugnay ng NavController sa AppBar, BottomNavigationView, NavigationDrawer. Ang setupActionBarWithNavController ay nagpapagana ng arrow na 'Pataas' sa mga nested na screen.

Mga transisyon at animasyon sa pagitan ng mga screen

Navigation Component ay sumusuporta sa mga custom na animasyon ng transisyon, na tinutukoy sa action o programmatically. Ang mga animasyon ay tinutukoy ng apat na katangian: enterAnim (paglitaw ng bagong screen), exitAnim (paglaho ng kasalukuyang screen), popEnterAnim (paglitaw sa pagbabalik), at popExitAnim (paglaho sa pagbabalik).

<?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>

// Programatikong transisyon na may animasyon
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)

Ang mga animasyon ay gumagana sa Fragment sa antas ng FragmentTransaction. Para sa Jetpack Compose, ang mga animasyon ay itinatakda sa pamamagitan ng NavOptionsCompat gamit ang Compose Animation. Ang Navigation Component ay hindi nagpapataw ng mga limitasyon sa uri ng animasyon — sinusuportahan ang translate, scale, alpha, at mga kumbinasyon nito.

Safe Args: ligtas-sa-uri na mga argumento

Safe Args — plugin ng Gradle para sa ligtas-sa-uri na pagpapasa ng data sa pagitan ng mga screen. Sinusuri ng plugin ang NavGraph, lumilikha ng mga klase ng Directions at Args na may mga tiyak na uri ng field. Sa yugto ng kompilasyon, sinusuri ang pagkakatugma ng uri — ang error na MissingArgumentException ay natutukoy bago patakbuhin ang application.

// build.gradle (module)
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

// Bumubuo ang Safe Args ng: DetailFragmentArgs, HomeFragmentDirections
// Paggamit sa HomeFragment:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Paggamit sa DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// Ang args.itemId ay may uri na Long, hindi maaaring ipasa ang null

override fun onViewCreated(...) {
    super.onViewCreated(...)
    loadItem(args.itemId)
}

navArgs() — delegado ng Kotlin para sa pagkuha ng mga argumento sa Fragment o Activity. Sinusuportahan ng plugin ang mga primitive, string, Parcelable, Serializable, Enum, at array. Para sa mga kumplikadong bagay, gamitin ang pagpapasa ng ID na may pagkarga mula sa ViewModel o database.

Deep Links sa Navigation Component

Deep Link — panlabas na link na nagbubukas ng partikular na screen ng application. Pinangangasiwaan ng Navigation Component ang deep links sa pamamagitan ng katangiang app:deepLink sa NavGraph. Lumilikha ang system ng PendingIntent na nagpapanumbalik ng stack ng nabigasyon patungo sa target na screen, o lumilikha ng bagong stack kung hindi tumatakbo ang application.

<fragment android:id="@+id/profileFragment"
    android:name=".ProfileFragment">
    <deepLink
        app:uri="https://example.com/profile/{userId}" />
    <argument
        android:name="userId"
        app:argType="string" />
</fragment>

// Programatikong paglikha ng Deep Link
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Sinusuportahan ng Deep Links ang mga template ng URI na may mga path at query parameter, intent action, at mime type. Ang placeholder ({userId}) ay awtomatikong nai-map sa argumento ng destination. Pinangangasiwaan din ng Navigation Component ang mga implicit deep links sa pamamagitan ng AndroidManifest — sapat na magdagdag ng intent-filter sa Activity na may NavHostFragment.

Navigation Component gamit ang Jetpack Compose

Navigation Compose (androidx.navigation:navigation-compose) — extension ng Navigation Component para sa Jetpack Compose. Pinapanatili ng API ang konsepto ng NavController at NavHost, ngunit ang mga screen ay mga function na Composable sa halip na Fragment. Tumatanggap ang NavHost ng composable lambda para sa bawat ruta.

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)
                    }
                }
            }
        }
    }
}

Ang Navigation Compose ay gumagamit ng mga string na ruta sa halip na id. Ang mga parameter ay ipinapasa sa pamamagitan ng template ng ruta ("detail/{itemId}") at kinukuha mula sa backStackEntry. Ang rememberNavController() ay nagpapanatili ng NavController sa recomposition. Para sa Type Safety sa Compose, inirerekomenda ang modyul na navigation-compose-type-safety (eksperimental).