Navigation Component — Qué es, NavHost y Navigation Graph

¿Qué es Navigation Component?

Navigation Component es una biblioteca de Android Jetpack (androidx.navigation) que proporciona una API unificada para la navegación. Incluye tres elementos clave: Navigation Graph (grafo de navegación), NavHostFragment (contenedor de pantallas) y NavController (controlador de transiciones). El componente gestiona automáticamente la pila de retroceso y soporta enlaces profundos.

Antes de Navigation Component, los desarrolladores gestionaban los fragmentos manualmente a través de FragmentManager. Esto generaba un código fragmentado (literalmente): cada pantalla tenía sus propias reglas de navegación, los estados de la pila de retroceso variaban y los enlaces profundos requerían una implementación separada. Navigation Component unificó estos escenarios. Según Google (2026), la biblioteca está instalada en el 90% de los nuevos proyectos Android.

Navigation Component se integra con otras bibliotecas de Jetpack: LiveData, ViewModel, Material Design. Soporta tanto fragmentos XML como Jetpack Compose a través de la extensión navigation-compose. Versión estable — 2.8.x (2025), versión mínima de Android — API 14.

NavGraph: grafo de navegación en XML

NavGraph es un recurso XML (res/navigation/nav_graph.xml) que define todas las pantallas de la aplicación y las conexiones entre ellas. Cada pantalla es un destino, que puede ser un Fragment, Activity o Composable. Las conexiones entre destinos son acciones que definen la dirección de la transición.

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

El atributo startDestination establece la primera pantalla que se muestra al iniciar. Una acción define el destino objetivo y las animaciones opcionales. Los argumentos describen los parámetros que se pasan a la pantalla — tipo y valor predeterminado.

NavHost y NavController: contenedor y control

NavHostFragment es un contenedor ubicado en el diseño de Activity que muestra la pantalla de navegación actual. NavHostFragment cambia automáticamente los fragmentos al llamar a NavController.navigate(). NavController es el objeto que gestiona la navegación: transiciones, retroceso y verificación de la ruta actual.

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

    // Navegar a la pantalla de detalles
    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" es un atributo importante: intercepta el botón de retroceso del sistema y pasa el control a NavController. NavigationUI es una utilidad para vincular NavController con AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController habilita la flecha de retroceso en pantallas anidadas.

Transiciones y animaciones entre pantallas

Navigation Component soporta animaciones de transición personalizadas, definidas en acciones o programáticamente. Las animaciones se definen mediante cuatro atributos: enterAnim (aparición de nueva pantalla), exitAnim (desaparición de la actual), popEnterAnim (aparición al retroceder) y popExitAnim (desaparición al retroceder).

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

// Transición programática con animación
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)

Las animaciones funcionan con Fragment a nivel de FragmentTransaction. Para Jetpack Compose, las animaciones se configuran mediante NavOptionsCompat usando Compose Animation. Navigation Component no impone restricciones sobre el tipo de animación — se soportan translate, scale, alpha y sus combinaciones.

Safe Args: argumentos con seguridad de tipos

Safe Args es un plugin de Gradle para transferencia de datos con seguridad de tipos entre pantallas. El plugin analiza NavGraph, genera clases Directions y Args con tipos de campo específicos. La coincidencia de tipos se verifica en tiempo de compilación — un MissingArgumentException se detecta antes de ejecutar la aplicación.

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

// Safe Args genera: DetailFragmentArgs, HomeFragmentDirections
// Uso en HomeFragment:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Uso en DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId es de tipo Long, no se puede pasar null

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

navArgs() es un delegado de Kotlin para obtener argumentos en un Fragment o Activity. El plugin soporta primitivos, cadenas, Parcelable, Serializable, Enum y arrays. Para objetos complejos, pase un ID y cárguelo desde ViewModel o base de datos.

Deep Links en Navigation Component

Deep Link es un enlace externo que abre una pantalla específica de la aplicación. Navigation Component maneja los enlaces profundos mediante el atributo app:deepLink en NavGraph. El sistema crea un PendingIntent que restaura la pila de navegación hasta la pantalla objetivo, o crea una nueva pila si la aplicación no se está ejecutando.

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

// Creación programática de Deep Link
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Los Deep Links soportan patrones URI con rutas y parámetros de consulta, intent action y tipo mime. Los marcadores de posición ({userId}) se asignan automáticamente a los argumentos del destino. Navigation Component también maneja deep links implícitos a través de AndroidManifest — basta con añadir un intent-filter al Activity con NavHostFragment.

Navigation Component con Jetpack Compose

Navigation Compose (androidx.navigation:navigation-compose) es una extensión de Navigation Component para Jetpack Compose. La API conserva el concepto de NavController y NavHost, pero las pantallas son funciones Composable en lugar de Fragment. NavHost acepta una lambda composable para cada 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)
                    }
                }
            }
        }
    }
}

Navigation Compose utiliza rutas de cadena en lugar de ids. Los parámetros se pasan mediante plantillas de ruta ("detail/{itemId}") y se extraen de backStackEntry. rememberNavController() conserva NavController entre recomposiciones. Para seguridad de tipos en Compose, se recomienda el módulo navigation-compose-type-safety (experimental).