Android Jetpack — Navigation Component con Kotlin.

Antes de comenzar la navegación de mi aplicación, estuve investigando en internet la manera mas sencilla de navegar entre las actividades de mi aplicación. encontré codigo java y kotlin que lo hacían pero yo buscaba algo con lo cual pudiera implementarlo con Kotlin para acelerar la productividad. Y así es como descubrí el navigation component, pero ¿Que es el navigation Component?

Navigation Component es un componente que pertenece al grupo de arquitectura de android jetpack. Permite navegar entre fragmentActivities utilizando actions y destinations, asi que en este post veremos como implementarlo desde cero en nuestro proyecto utilizando el lenguaje de programación Kotlin.

¿Que aprenderemos?

1. - Implementar navigation component en el proyecto.
2. -Utilizar editor de navegación y sus componentes.
3. -Implementar NavHost
4. - Navegar a un destination con CardView y FragmentActivities.
5. -Crear un ButtomNavigationView con navigation component.

¿Como usar Jetpack Navigation Component en un proyecto?

Lo primero es migrar nuestro proyecto a androidX, ya que los componentes de jetpack son parte de la biblioteca de androidx. Aqui te dejo un enlace para que aprendas como migrar tu proyecto: https://developer.android.com/jetpack/androidx/migrate

Despues hay que añadir y sincronizar el siguiente codigo al archivo build gradle — project:

Se crea la carpeta de recursos navigation y dentro de esa carpeta crear un archivo nav_graph.xml en donde se alojaran todos los destinations y actions, la grafica nos sirve para contruir las rutas de navegacion de la app pero tambien podemos añadir efectos de transicion, popBackStack y pasar datos entre fragments.

Para agregar un gráfico de navegación a su proyecto, haga lo siguiente:

1. En la ventana Proyecto, haga clic derecho en el resdirectorio y seleccione Nuevo> Archivo de recursos de Android . El nuevo archivo de recursos aparece el diálogo.
2. Escriba un nombre en el campo Nombre de archivo , como “nav_graph”.
3. Seleccione Navegación en la lista desplegable Tipo de recurso y luego haga clic en Aceptar .

Agregar un navHost a la actividad principal (dashboard)un navHost es un contenedor vacio para la navegación a través de un NavController. Cuando los usuarios navegan en la aplicación los fragments o destinations se van intercambiando dentro y fuera del navhost, entonces añadimos navHost a la activity Dasboard como se ve en la imagen.

Creamos los fragments con su respectivo Layout y desmarcamos las dos opciones que están debajo para así tener un fragment sin demasiados métodos.

El siguiente paso es añadir en el nav_graph los fragments que creamos, entonces hacemos lo siguiente: 1 se agrega el primer fragment (home)para que se infle en el navHostFragment(dashboard), se añaden todos los fragments creados y se ordena como deseen no importa el orden ya que no se ejecuta una tarea en especifico. 2 Apartir del fragment home se enlazan los demás fragments, esto se hace arrastrando el punto que se encuentra a lado del fragment home hacia los destinations (fragments), 3 se escribe el ID de cada uno y el cuadro 4 se vera asi cuando se termine de agregar los destinations y actions en el nav_graph.

Cabe aclarar que una tarea es una colección de actividades con la que los usuarios interactuan cuando realizan un trabajo en especifico, así que si tenemos un botón que ejecute una tarea, todos sus destinations tienen que tener un cierto orden y sus actions deverian de tener el mismo nombre para que nuestro programa sepa que tarea ejecutar.

Presionamos el action y 1 añadimos un ID esto nos servirá para navegar entre los fragments, el destination se crea cuando arrastramos la flecha hacia un frag. 3 Se pueden aplicar animaciones de entrada-salida y animación en el pop de entrada — salida y por ultimo podemos aplicar popBackStack a los destinations, cuando ejecutamos una tarea se crea una pila de actividades lo que hace es eliminar la pila de actividades posterior hasta llegar al destination que se le indica.

Lo siguiente que hice fue dirigirme al layout home y crear mis cardViews. Los personalicé a mi gusto y les agregue un ID a cada uno, ahora para poder navegar usando los cardViews tuve que irme al fragmentHome y Crear la funcion onViewCreate() dentro escribí el código que ven a continuación:

Se escribe el id de la vista se agrega un evento onClick listener y dentro se escribe el método findNavController() que localiza el NavController de esta vista y por ultimo agregamos el método navigate () que nos permite navegar utilizando los actions directos de nuestros fragments. Ejecutamos nuestra app y ya tenemos la navegación sin escribir tanto código.

Ahora seguimos con la creación del botomNavigationView creamos una carpeta en res llamada menu y dentro un archivo de tipo menú llamado botton_nav_menu. el ID que les agreguemos a nuestros items debe ser el mismo id que tienen los 3 fragments en el achivo nav_graph.

Para comenzar necesitamos tener en nuestro archivo gradle la siguiente implementacion:

En el activity dashboard agregamos el widget ButtonNavigationView junto con su ID agregamos la propiedad app:menu para que infle el archivo botton_nav_menu dentro de la vista de navegación inferior.

hasta ahora el diseño se deveria de ver masomenos asi, pero aun hay que hacer que el buttomNav funcione.

Aqui viene lo interesante! el codigo, te sorprenderas lo facil que es programar el buttomNav.

Lo que hice fue dirigirme a la activity dashboard y dentro del metodo onCreate crear una val navController y asigne el método findNavController haciendo referencia al nav_host_fragment, luego agregue el metodo setupActionBarWithNavController() metodo que configura el titulo de la barra de acciones, el titulo cambiara automaticamente cuando cambie el destino (sino escribiste el label en los fragments no mostrara el titulo).

Lo segundo fue crear otra val naveController y asignarle un Navigation.findnavController haciendo referencia a esta actividad y al nav_host_fragment. Despues se escribe el id de nuestro ButtonNavigationView y un metodo setupWithNavController(), metodo que Configura aun ButtonNavigationView para usar con un NavController. Esto llamará ondestinationSelected(MenuItem,NavController) cuando se seleccione un elemento del menú. El elemento seleccionado en BottomNavigationView se actualizará automáticamente cuando cambie el destino, dentro agregamos naveController.

Si deseamos esconder el ButtomNav en algunos destination agregamos a naveController un metodo publico addOnDestinationChangedListener, dentro escribimos un ciclo when que reciba el id del destination. si el ID es del destination home, rewards y about ejecutara el metodo que muestra el buttonNavigationView pero si no es ninguno de estos ejecutara el metodo que esconde el ButtomNavigation.

Listo! hemos hecho una navegacion sencilla, en poco tiempo y sin escribir mucho codigo.

Por favor si te sirvio esta informacion compartela, comenta y sigueme en medium te lo agradeceria mucho.