Android Academy · Lección

Navigation Component

Gestione la navegación entre varias pantallas con un NavGraph visual, Safe Args para argumentos con seguridad de tipos, NavController y compatibilidad con deep links.

Lección 5 de 613 pasos

Navigation Component es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 5 de 6. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 6 lecciones en total.

¿Qué es el Navigation Component?

El Navigation Component es una biblioteca de Android Jetpack que gestiona la navegación entre fragments, la pila de retroceso, los deep links y las animaciones de transición en un único grafo visual.

Ventajas principales:

  • Grafo de navegación visual en Android Studio
  • Transferencia de argumentos con seguridad de tipos (Safe Args)
  • Gestión automática de la pila de retroceso
  • Compatibilidad integrada con deep links

Configuración: dependencias

Añada lo siguiente a app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
}

// project/build.gradle (for Safe Args):
buildscript {
    dependencies {
        classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.7.7'
    }
}

// app/build.gradle — apply the plugin:
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

Grafo de navegación (nav_graph.xml)

Cree res/navigation/nav_graph.xml. Define los destinos (fragments) y las acciones (rutas de navegación):

<!-- res/navigation/nav_graph.xml -->
<navigation
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>
</navigation>

NavHostFragment en el diseño de la Activity

Sustituya el contenedor FrameLayout por NavHostFragment. Actúa como host de todos los destinos de navegación:

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

NavController: navegación entre fragments

Obtenga un NavController y llame a navigate() con un ID de acción:

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.btnOpenDetail.setOnClickListener {
            // Navigate using action ID from nav_graph
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

Safe Args: argumentos con seguridad de tipos

Safe Args genera clases para pasar argumentos entre fragments sin conversiones de tipos ni errores en las claves:

// In HomeFragment — pass itemId:
binding.btnOpenDetail.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeToDetail(itemId = 42)
    findNavController().navigate(action)
}

// In DetailFragment — receive itemId:
class DetailFragment : Fragment() {
    private val args: DetailFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val id = args.itemId   // Int, type-safe
        viewModel.loadItem(id)
    }
}

Navegación hacia arriba

Conecte el botón de navegación hacia arriba de la Toolbar al NavController para activar la navegación de retorno automática:

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        navController = navHostFragment.navController

        // Wire toolbar Up button
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

Navegación inferior con NavController

Conecte un BottomNavigationView al NavController; este gestiona automáticamente la selección de pestañas y la pila de retroceso:

// In Activity.onCreate():
val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.navHostFragment) as NavHostFragment
val navController = navHostFragment.navController

// Wire BottomNavigationView
binding.bottomNav.setupWithNavController(navController)

// Each menu item ID must match a fragment destination ID in nav_graph.xml

Extraer de la pila de retroceso

Vuelva atrás mediante programación o navegue hasta un destino específico:

// Go back one step
findNavController().popBackStack()

// Navigate back to a specific destination (popping everything on top)
findNavController().popBackStack(R.id.homeFragment, inclusive = false)

// Navigate and clear back stack (e.g., after login)
findNavController().navigate(
    R.id.action_login_to_home,
    null,
    NavOptions.Builder()
        .setPopUpTo(R.id.loginFragment, inclusive = true)
        .build()
)

Deep links

Añada un deep link a un destino para que su aplicación pueda abrirse desde una URL:

<!-- In nav_graph.xml, inside the destination fragment: -->
<deepLink
    android:id="@+id/deepLinkDetail"
    app:uri="https://example.com/items/{itemId}" />

<!-- Also add intent-filter in AndroidManifest.xml for the Activity: -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

Transiciones entre fragments

Añada animaciones personalizadas a las acciones de navegación en el grafo de navegación:

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

Comprobación rápida

¿Qué debe coincidir entre el ID del elemento de menú de BottomNavigationView y el grafo de navegación para gestionar automáticamente las pestañas?

Repaso: Navigation Component

Navigation Component simplifica las aplicaciones con varias pantallas:

  • nav_graph.xml visual — destinos + acciones
  • NavHostFragment en el diseño de la Activity
  • findNavController().navigate(actionId) para desplazarse entre pantallas
  • Safe Args — transferencia de argumentos con seguridad de tipos (sin conversiones ni errores tipográficos)
  • setupActionBarWithNavController() — botón de navegación hacia arriba automático
  • setupWithNavController() — BottomNavigationView automático

Siguiente: añada inyección de dependencias con Hilt para obtener una arquitectura limpia.

Gratis para empezar

Aprende Kotlin con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
36
Lecciones
152

Preguntas frecuentes

¿La lección «Navigation Component» es gratis?

Sí — el texto completo de «Navigation Component» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 6 lecciones en total.

¿Qué aprenderé en «Navigation Component»?

Gestione la navegación entre varias pantallas con un NavGraph visual, Safe Args para argumentos con seguridad de tipos, NavController y compatibilidad con deep links. Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 5 de 6.

¿Cuánto tiempo toma la lección «Navigation Component»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. ViewModel y LiveData
  2. Base de datos Room
  3. Corrutinas y funciones suspend
  4. Patrón Repository
  5. Navigation Component
  6. Inyección de dependencias con Hilt
← Volver a Android Academy