Navigation Component — Qu'est-ce que c'est, NavHost et Navigation Graph

Qu'est-ce que Navigation Component ?

Navigation Component est une bibliothèque Android Jetpack (androidx.navigation) qui fournit une API unifiée pour la navigation. Elle comprend trois éléments clés : Navigation Graph (graphe de navigation), NavHostFragment (conteneur d'écrans) et NavController (contrôleur de transitions). Le composant gère automatiquement la pile de retour et prend en charge les liens profonds.

Avant Navigation Component, les développeurs géraient les fragments manuellement via FragmentManager. Cela produisait un code fragmenté (littéralement) : chaque écran avait ses propres règles de navigation, les états de la pile de retour variaient et les liens profonds nécessitaient une implémentation séparée. Navigation Component a unifié ces scénarios. Selon Google (2026), la bibliothèque est installée dans 90 % des nouveaux projets Android.

Navigation Component s'intègre avec d'autres bibliothèques Jetpack : LiveData, ViewModel, Material Design. Il prend en charge à la fois les fragments XML et Jetpack Compose via l'extension navigation-compose. Version stable — 2.8.x (2025), version minimale d'Android — API 14.

NavGraph : graphe de navigation en XML

NavGraph est une ressource XML (res/navigation/nav_graph.xml) qui définit tous les écrans de l'application et les connexions entre eux. Chaque écran est une destination, qui peut être un Fragment, une Activity ou un Composable. Les connexions entre les destinations sont des actions qui définissent la direction de la transition.

<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="Accueil"
        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="Détails"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

L'attribut startDestination définit le premier écran affiché au lancement. Une action définit la destination cible et les animations optionnelles. Les arguments décrivent les paramètres passés à l'écran — type et valeur par défaut.

NavHost et NavController : conteneur et contrôle

NavHostFragment est un conteneur placé dans le layout de l'Activity qui affiche l'écran de navigation actuel. NavHostFragment bascule automatiquement les fragments lorsque NavController.navigate() est appelé. NavController est l'objet qui gère la navigation : transitions, retour et vérification de la route actuelle.

// 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 lie NavController à AppBar
        setupActionBarWithNavController(navController)
    }

    // Naviguer vers l'écran des détails
    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" est un attribut important : il intercepte le bouton de retour système et passe le contrôle à NavController. NavigationUI est un utilitaire pour lier NavController à AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController active la flèche de retour sur les écrans imbriqués.

Transitions et animations entre les écrans

Navigation Component prend en charge les animations de transition personnalisées, définies dans les actions ou par programmation. Les animations sont définies par quatre attributs : enterAnim (apparition du nouvel écran), exitAnim (disparition de l'écran actuel), popEnterAnim (apparition lors du retour) et popExitAnim (disparition lors du retour).

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

// Transition programmatique avec animation
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)

Les animations fonctionnent avec Fragment au niveau de FragmentTransaction. Pour Jetpack Compose, les animations sont définies via NavOptionsCompat en utilisant Compose Animation. Navigation Component n'impose pas de restrictions sur le type d'animation — translate, scale, alpha et leurs combinaisons sont pris en charge.

Safe Args : arguments avec sécurité de typage

Safe Args est un plugin Gradle pour le transfert de données avec sécurité de typage entre les écrans. Le plugin analyse NavGraph, génère des classes Directions et Args avec des types de champ spécifiques. La correspondance des types est vérifiée à la compilation — une MissingArgumentException est détectée avant l'exécution de l'application.

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

// Safe Args génère : DetailFragmentArgs, HomeFragmentDirections
// Utilisation dans HomeFragment :
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Utilisation dans DetailFragment :
private val args: DetailFragmentArgs by navArgs()
// args.itemId est de type Long, null ne peut pas être passé

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

navArgs() est un délégué Kotlin pour récupérer les arguments dans un Fragment ou une Activity. Le plugin prend en charge les primitifs, les chaînes, Parcelable, Serializable, Enum et les tableaux. Pour les objets complexes, passez un ID et chargez depuis ViewModel ou la base de données.

Deep Links dans Navigation Component

Deep Link est un lien externe qui ouvre un écran spécifique de l'application. Navigation Component gère les liens profonds via l'attribut app:deepLink dans NavGraph. Le système crée un PendingIntent qui restaure la pile de navigation jusqu'à l'écran cible, ou crée une nouvelle pile si l'application n'est pas en cours d'exécution.

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

// Création programmatique de Deep Link
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Les Deep Links prennent en charge les motifs URI avec des chemins et des paramètres de requête, intent action et le type mime. Les espaces réservés ({userId}) sont automatiquement mappés aux arguments de destination. Navigation Component gère également les liens profonds implicites via AndroidManifest — il suffit d'ajouter un intent-filter à l'Activity avec NavHostFragment.

Navigation Component avec Jetpack Compose

Navigation Compose (androidx.navigation:navigation-compose) est une extension de Navigation Component pour Jetpack Compose. L'API préserve le concept de NavController et NavHost, mais les écrans sont des fonctions Composable au lieu de Fragment. NavHost accepte un lambda composable pour chaque route.

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 utilise des routes de chaîne au lieu d'ids. Les paramètres sont passés via des modèles de route ("detail/{itemId}") et extraits de backStackEntry. rememberNavController() préserve NavController lors des recompositions. Pour la sécurité de typage dans Compose, le module navigation-compose-type-safety (expérimental) est recommandé.