Navigation Component — mi ez, NavHost és Navigation Graph

Mi a Navigation Component?

Navigation Component — Android Jetpack könyvtár (androidx.navigation), amely egységes API-t biztosít a navigációhoz. Három kulcselemet tartalmaz: Navigation Graph (navigációs gráf), NavHostFragment (tároló képernyőkhöz) és NavController (átmenetvezérlő). A komponens automatikusan kezeli a visszalépési vermet és támogatja a deep link-eket.

A Navigation Component előtt a fejlesztők manuálisan kezelték a fragmentumokat a FragmentManager segítségével. Ez töredezett kódhoz vezetett: minden képernyőnek saját navigációs szabályai voltak, a visszalépési verem állapotai eltértek, a deep link-ek külön megvalósítást igényeltek. A Navigation Component egységesítette ezeket a forgatókönyveket. A Google (2026) szerint a könyvtár az új Android-projektek 90%-ában telepítve van.

Navigation Component integrálódik más Jetpack könyvtárakkal: LiveData, ViewModel, Material Design. Támogatja mind az XML fragmentumokat, mind a Jetpack Compose-t a navigation-compose kiterjesztésen keresztül. Stabil kiadás — 2.8.x (2025), minimális Android verzió — API 14.

NavGraph: navigációs gráf XML-ben

NavGraph — XML erőforrás (res/navigation/nav_graph.xml), amely meghatározza az alkalmazás összes képernyőjét és a köztük lévő kapcsolatokat. Minden képernyő egy csomópont (destination), amely lehet Fragment, Activity vagy Composable. A csomópontok közötti kapcsolatok action-ök, amelyek meghatározzák az átmenet irányát.

<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="Kezdőlap"
        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="Részletek"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

A startDestination attribútum határozza meg az induláskor megjelenő első képernyőt. Az action meghatározza a cél destination-t és az opcionális animációkat. Az argumentumok (argument) leírják a képernyőre átadott paramétereket — típust és alapértelmezett értéket.

NavHost és NavController: tároló és kezelés

NavHostFragment — tároló, amely az Activity elrendezésében helyezkedik el és megjeleníti az aktuális navigációs képernyőt. A NavHostFragment automatikusan váltja a fragmentumokat a NavController.navigate() hívásakor. NavController — objektum, amely kezeli a navigációt: átmenet, visszatérés, aktuális útvonal ellenőrzése.

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

        // A NavigationUI összekapcsolja a NavController-t az AppBar-ral
        setupActionBarWithNavController(navController)
    }

    // Átmenet a részletek képernyőre
    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" — fontos attribútum: elfogja a rendszer 'Vissza' gombját, és átadja a vezérlést a NavController-nek. NavigationUI — segédprogram a NavController AppBar-hoz, BottomNavigationView-hoz, NavigationDrawer-hez kapcsolásához. A setupActionBarWithNavController engedélyezi a 'Fel' nyilat a beágyazott képernyőkön.

Átmenetek és animációk képernyők között

Navigation Component támogatja az egyéni átmeneti animációkat, amelyek action-ben vagy programozottan definiálhatók. Az animációkat négy attribútum határozza meg: enterAnim (új képernyő megjelenése), exitAnim (aktuális képernyő eltűnése), popEnterAnim (visszatéréskor megjelenés) és popExitAnim (visszatéréskor eltűnés).

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

// Programozott átmenet animációval
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)

Az animációk FragmentTransaction szinten működnek a Fragment-tel. Jetpack Compose esetében az animációk a NavOptionsCompat segítségével, Compose Animation használatával állíthatók be. A Navigation Component nem korlátozza az animáció típusát — támogatja a translate, scale, alpha és ezek kombinációit.

Safe Args: típusbiztos argumentumok

Safe Args — Gradle beépülő modul a típusbiztos adatátvitelhez képernyők között. A beépülő modul elemzi a NavGraph-ot, Directions és Args osztályokat generál konkrét típusú mezőkkel. Fordítási szakaszban ellenőrzi a típusok egyezését — a MissingArgumentException hiba az alkalmazás elindítása előtt felismerésre kerül.

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

// A Safe Args generálja: DetailFragmentArgs, HomeFragmentDirections
// Használat a HomeFragment-ben:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Használat a DetailFragment-ben:
private val args: DetailFragmentArgs by navArgs()
// Az args.itemId típusa Long, a null nem adható át

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

navArgs() — Kotlin delegált az argumentumok lekéréséhez Fragment-ben vagy Activity-ben. A beépülő modul támogatja a primitíveket, karakterláncokat, Parcelable-t, Serializable-t, Enum-ot és tömböket. Összetett objektumok esetén használjon ID-átadást ViewModel-ből vagy adatbázisból történő betöltéssel.

Deep Links a Navigation Component-ben

Deep Link — külső hivatkozás, amely az alkalmazás egy adott képernyőjét nyitja meg. A Navigation Component a deep link-eket az app:deepLink attribútumon keresztül kezeli a NavGraph-ban. A rendszer létrehoz egy PendingIntent-et, amely visszaállítja a navigációs vermet a célképernyőig, vagy új vermet hoz létre, ha az alkalmazás nem fut.

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

// Deep Link programozott létrehozása
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

A Deep Links támogatja az URI sablonokat útvonalakkal és query paraméterekkel, intent action-t és mime type-ot. A placeholder ({userId}) automatikusan hozzárendelődik a destination argumentumához. A Navigation Component az implicit deep link-eket is kezeli az AndroidManifest-en keresztül — elegendő intent-filter-t hozzáadni a NavHostFragment-et tartalmazó Activity-hez.

Navigation Component Jetpack Compose-zal

Navigation Compose (androidx.navigation:navigation-compose) — a Navigation Component kiterjesztése Jetpack Compose-hoz. Az API megőrzi a NavController és NavHost koncepcióját, de a képernyők Composable függvények Fragment helyett. A NavHost minden útvonalhoz egy composable lambdát fogad.

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

A Navigation Compose karakterlánc-útvonalakat használ id helyett. A paraméterek az útvonalsablonon ("detail/{itemId}") keresztül kerülnek átadásra, és a backStackEntry-ből kerülnek kinyerésre. A rememberNavController() megőrzi a NavController-t recompozíció során. Type Safety-hez Compose-ban a navigation-compose-type-safety modul ajánlott (kísérleti).