Navigation Component — यह क्या है, NavHost और Navigation Graph

लेखक: IT Sectr प्रकाशित: 2026-02-22 पढ़ने का समय: 7 मिनट

Navigation Component एप्लिकेशन स्क्रीन के बीच नेविगेशन लागू करने के लिए Android Jetpack लाइब्रेरी है। यह घटक फ़्रैगमेंट स्टैक, डीप लिंक और आर्गुमेंट पासिंग के प्रबंधन को केंद्रीकृत करता है। यह 2018 से Jetpack का हिस्सा है और Google द्वारा सभी नए प्रोजेक्ट्स के लिए अनुशंसित है। अधिक जानकारी के लिए Google की आधिकारिक मार्गदर्शिका पढ़ें।

मुख्य बातें

  • Navigation Component — Android स्क्रीन के बीच केंद्रीकृत नेविगेशन के लिए Jetpack लाइब्रेरी
  • NavGraph — XML संसाधन जो सभी स्क्रीन और उनके बीच कनेक्शन का वर्णन करता है
  • NavHostFragment — Activity लेआउट में कंटेनर जो वर्तमान नेविगेशन स्क्रीन प्रदर्शित करता है
  • NavController — नेविगेशन नियंत्रण ऑब्जेक्ट: navigate, popBackStack, navigateUp
  • Safe Args — स्क्रीन के बीच टाइप-सुरक्षित आर्गुमेंट पास करने के लिए Gradle प्लगइन

Navigation Component क्या है?

Navigation Component एक Android Jetpack लाइब्रेरी (androidx.navigation) है जो नेविगेशन के लिए एकीकृत API प्रदान करती है। इसमें तीन प्रमुख तत्व शामिल हैं: Navigation Graph (नेविगेशन ग्राफ़), NavHostFragment (स्क्रीन कंटेनर) और NavController (ट्रांज़िशन नियंत्रक)। यह घटक स्वचालित रूप से बैक स्टैक प्रबंधित करता है और डीप लिंक का समर्थन करता है।

Navigation Component से पहले, डेवलपर्स FragmentManager के माध्यम से मैन्युअल रूप से फ़्रैगमेंट प्रबंधित करते थे। इससे खंडित कोड उत्पन्न हुआ: प्रत्येक स्क्रीन के अपने नेविगेशन नियम थे, बैक स्टैक स्थितियाँ भिन्न थीं, और डीप लिंक के लिए अलग कार्यान्वयन आवश्यक था। Navigation Component ने इन परिदृश्यों को एकीकृत किया। Google (2026) के अनुसार, यह लाइब्रेरी 90% नए Android प्रोजेक्ट्स में स्थापित है।

Navigation Component अन्य Jetpack लाइब्रेरीज़ के साथ एकीकृत होता है: LiveData, ViewModel, Material Design। यह XML फ़्रैगमेंट और Jetpack Compose दोनों का navigation-compose एक्सटेंशन के माध्यम से समर्थन करता है। स्थिर रिलीज़ — 2.8.x (2025), न्यूनतम Android संस्करण — API 14.

NavGraph एक XML संसाधन (res/navigation/nav_graph.xml) है जो एप्लिकेशन की सभी स्क्रीन और उनके बीच कनेक्शन को परिभाषित करता है। प्रत्येक स्क्रीन एक गंतव्य (destination) है, जो Fragment, Activity या Composable हो सकती है। गंतव्यों के बीच कनेक्शन क्रियाएँ (actions) हैं जो ट्रांज़िशन दिशा निर्धारित करती हैं।

xml

<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="होम"
        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="विवरण"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

startDestination विशेषता लॉन्च पर प्रदर्शित होने वाली पहली स्क्रीन सेट करती है। एक क्रिया लक्ष्य गंतव्य और वैकल्पिक एनिमेशन परिभाषित करती है। आर्गुमेंट स्क्रीन पर भेजे जाने वाले पैरामीटर — प्रकार और डिफ़ॉल्ट मान का वर्णन करते हैं।

NavHostFragment एक कंटेनर है जो Activity लेआउट में रखा जाता है और वर्तमान नेविगेशन स्क्रीन प्रदर्शित करता है। NavController.navigate() कॉल करने पर NavHostFragment स्वचालित रूप से फ़्रैगमेंट स्विच करता है। NavController वह ऑब्जेक्ट है जो नेविगेशन प्रबंधित करता है: ट्रांज़िशन, वापसी, और वर्तमान मार्ग की जाँच।

kotlin
// 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 NavController को AppBar से जोड़ता है
        setupActionBarWithNavController(navController)
    }

    // विवरण स्क्रीन पर जाएँ
    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" एक महत्वपूर्ण विशेषता है: यह सिस्टम बैक बटन को इंटरसेप्ट करता है और नियंत्रण NavController को स्थानांतरित करता है। NavigationUI NavController को AppBar, BottomNavigationView, NavigationDrawer से जोड़ने की उपयोगिता है। setupActionBarWithNavArchive नेस्टेड स्क्रीन पर अप ऐरो सक्षम करता है।

Navigation Component कस्टम ट्रांज़िशन एनिमेशन का समर्थन करता है, जो क्रियाओं में या प्रोग्रामेटिक रूप से सेट किए जाते हैं। एनिमेशन चार विशेषताओं द्वारा परिभाषित होते हैं: enterAnim (नई स्क्रीन का प्रकटन), exitAnim (वर्तमान का गायब होना), popEnterAnim (वापसी पर प्रकटन) और popExitAnim (वापसी पर गायब होना)।

xml

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

// एनिमेशन के साथ प्रोग्रामेटिक ट्रांज़िशन
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)

एनिमेशन FragmentTransaction स्तर पर Fragment के साथ काम करते हैं। Jetpack Compose के लिए, एनिमेशन NavOptionsCompat के माध्यम से Compose Animation का उपयोग करके सेट किए जाते हैं। Navigation Component एनिमेशन प्रकार पर प्रतिबंध नहीं लगाता — translate, scale, alpha और उनके संयोजन समर्थित हैं।

Safe Args: टाइप-सुरक्षित आर्गुमेंट

Safe Args स्क्रीन के बीच टाइप-सुरक्षित डेटा स्थानांतरण के लिए Gradle प्लगइन है। प्लगइन NavGraph का विश्लेषण करता है, विशिष्ट फ़ील्ड प्रकारों के साथ Directions और Args क्लासेज़ उत्पन्न करता है। प्रकार मिलान की जाँच संकलन समय पर की जाती है — MissingArgumentException एप्लिकेशन चलने से पहले पकड़ा जाता है।

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

// Safe Args उत्पन्न करता है: DetailFragmentArgs, HomeFragmentDirections
// HomeFragment में उपयोग:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// DetailFragment में उपयोग:
private val args: DetailFragmentArgs by navArgs()
// args.itemId Long प्रकार का है, null पास नहीं किया जा सकता

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

navArgs() Fragment या Activity में आर्गुमेंट प्राप्त करने के लिए Kotlin डेलीगेट है। प्लगइन प्रिमिटिव, स्ट्रिंग, Parcelable, Serializable, Enum और ऐरे का समर्थन करता है। जटिल ऑब्जेक्ट के लिए, आईडी पास करें और ViewModel या डेटाबेस से लोड करें।

Deep Link एक बाहरी लिंक है जो एप्लिकेशन की विशिष्ट स्क्रीन खोलता है। Navigation Component डीप लिंक को NavGraph में app:deepLink विशेषता के माध्यम से संभालता है। सिस्टम एक PendingIntent बनाता है जो नेविगेशन स्टैक को लक्ष्य स्क्रीन तक पुनर्स्थापित करता है, या यदि एप्लिकेशन नहीं चल रहा है तो नया स्टैक बनाता है।

xml

<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 का प्रोग्रामेटिक निर्माण
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

डीप लिंक URI पैटर्न को पथ और क्वेरी पैरामीटर, intent action और mime type के साथ समर्थन करते हैं। प्लेसहोल्डर ({userId}) स्वचालित रूप से गंतव्य आर्गुमेंट से मैप होते हैं। Navigation Component AndroidManifest के माध्यम से इम्प्लिसिट डीप लिंक भी संभालता है — बस NavHostFragment वाले Activity में intent-filter जोड़ें।

Navigation Compose (androidx.navigation:navigation-compose) Jetpack Compose के लिए Navigation Component का एक्सटेंशन है। API NavController और NavHost की अवधारणा को संरक्षित करता है, लेकिन स्क्रीन Fragment के बजाय Composable फ़ंक्शन हैं। NavHost प्रत्येक मार्ग के लिए एक composable लैम्ब्डा स्वीकार करता है।

kotlin
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 ids के बजाय स्ट्रिंग मार्ग का उपयोग करता है। पैरामीटर मार्ग टेम्पलेट ("detail/{itemId}") के माध्यम से पास किए जाते हैं और backStackEntry से निकाले जाते हैं। rememberNavController() पुनर्संरचना के दौरान NavController को संरक्षित करता है। Compose में टाइप सुरक्षा के लिए, navigation-compose-type-safety मॉड्यूल (प्रयोगात्मक) अनुशंसित है।

अक्सर पूछे जाने वाले प्रश्न

Navigation Component में NavHost क्या है?

NavHost नेविगेशन स्क्रीन प्रदर्शित करने के लिए कंटेनर है। यह XML लेआउट में NavHostFragment के माध्यम से कार्यान्वित होता है। NavHost NavGraph में वर्तमान स्क्रीन को ट्रैक करता है और ट्रांज़िशन प्रबंधित करता है। प्रत्येक Activity में एक NavHostFragment होता है।

Safe Args Bundle से बेहतर कैसे है?

Safe Args एक Gradle प्लगइन है जो टाइप-सुरक्षित आर्गुमेंट क्लासेज़ उत्पन्न करता है। Bundle में मैन्युअल रूप से कुंजी और प्रकार निर्दिष्ट करने की आवश्यकता होती है, जिससे रनटाइम त्रुटियाँ होती हैं। Safe Args संकलन समय पर प्रकारों की जाँच करता है और डेटा को स्वचालित रूप से सीरियलाइज़ करता है।

Navigation Component के माध्यम से जटिल ऑब्जेक्ट कैसे पास करें?

जटिल ऑब्जेक्ट ViewModel (स्क्रीन के बीच साझा) के माध्यम से या आईडी पास करके डेटाबेस के माध्यम से पास किए जाते हैं। Safe Args केवल प्रिमिटिव, स्ट्रिंग और Parcelable का समर्थन करता है। Google नेविगेशन आर्गुमेंट के माध्यम से बड़े ऑब्जेक्ट पास करने से बचने की सलाह देता है।

Navigation Component में Deep Link कैसे काम करता है?

Deep Link NavGraph में app:deepLink विशेषता के माध्यम से कॉन्फ़िगर किया जाता है। Navigation Component स्वचालित रूप से इनकमिंग लिंक को संभालता है, NavDeepLinkBuilder के माध्यम से PendingIntent बनाता है और नेविगेशन स्टैक को लक्ष्य स्क्रीन तक पुनर्स्थापित करता है। URI, intent action और mime type का समर्थन करता है।

क्या Navigation Component का उपयोग Jetpack Compose के साथ किया जा सकता है?

हाँ। Navigation Compose (androidx.navigation:navigation-compose) Compose के लिए NavHost प्रदान करता है। API XML संस्करण के समान है, लेकिन स्क्रीन Composable फ़ंक्शन हैं। NavController दोनों संस्करणों में समान रूप से उपयोग किया जाता है। Google नए Compose प्रोजेक्ट्स के लिए Navigation Compose की सलाह देता है।

सारांश

  • Navigation Component — NavController, NavHost और NavGraph के साथ केंद्रीकृत नेविगेशन के लिए Android Jetpack लाइब्रेरी
  • NavGraph — XML ग्राफ़ जो सभी स्क्रीन (गंतव्य) और उनके बीच कनेक्शन (क्रियाएँ) का वर्णन करता है
  • NavHostFragment — Activity लेआउट में कंटेनर जो बैक बटन के लिए defaultNavHost विशेषता का समर्थन करता है
  • Safe Args — संकलन समय पर प्रकार जाँच के साथ टाइप-सुरक्षित आर्गुमेंट पास करने के लिए Gradle प्लगइन
  • डीप लिंक URI, intent action और mime type का स्वचालित नेविगेशन स्टैक पुनर्स्थापना के साथ समर्थन करते हैं
  • Navigation Compose — स्ट्रिंग मार्ग और composable स्क्रीन के साथ Jetpack Compose के लिए एक्सटेंशन
  • Navigation Component नए Android प्रोजेक्ट्स में नेविगेशन का एकमात्र Google-अनुशंसित तरीका है

हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे

IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।

परियोजना पर चर्चा करें

यह भी पढ़ें