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.
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.xmlExtraer 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.xmlvisual — destinos + accionesNavHostFragmenten el diseño de la ActivityfindNavController().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áticosetupWithNavController()— BottomNavigationView automático
Siguiente: añada inyección de dependencias con Hilt para obtener una arquitectura limpia.
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
- ViewModel y LiveData
- Base de datos Room
- Corrutinas y funciones suspend
- Patrón Repository
- Navigation Component
- Inyección de dependencias con Hilt