CategoriasAndroidProgramación

Como usar el Android Navigation Component

Android Architecture components - Navigation Component

El problema de la navegación

A lo largo de los años los desarrolladores Android han buscado una forma de hacer más fácil la navegación entre los fragments y las activities dentro de las aplicaciones que creaban. Muchos inventaron una cantidad de clases y variantes llamadas Navigation, Base Navigation, Navigation Manager.

Entre cualquier cantidad de ingeniosos nombres que el ser humano se puede inventar, cada uno tenía sus peculiaridades con sus ventajas y sus desventajas, muchas de estas necesitaban que el desarrollador heredara de una clase base o agregara manualmente constantes a una clase para así identificar a donde iría y de a donde vendría, esto solía generar muchos bugs respecto a la navegación de la app.

Por ejemplo, si una App que mostraba el detalle de una compra al ir hacia atrás lo que se espera es que te llevara al paso anterior a ese detalle de compra, es decir a los objetos que habías seleccionado para comprar, y en algunos casos estas famosas clases de navegación fallaban enviando al usuario a la pantalla principal de la aplicación o peor aún a otra pantalla que no tenía nada que ver con este flujo, esto suponía un problema.

Entra en escena el Navigation Component de Android

En el Google I/O de 2018 fue anunciada la creación de este componente para así tener un standard en el cual se basaran las aplicaciones Android, la versión estable de este component fue liberada hace aproximadamente un mes y actualmente existe una versión 1.0 que es compatible con AppCompat y una versión 2.0 que está disponible para Android Jetpack. Si quieres saber qué es Android Jetpack he hablado de él previamente en este articulo.

El uso de este componente está basado en crear un grafo en el cual estén conectados todos los activities y fragments de tu aplicación ademas de las «actions» que permiten cambiar de fragments.

Muéstrame el código

Para empezar a utilizar nuestro Navigation Component en nuestros proyectos es necesario agregar las siguientes dependencias a nuestro build.gradle del modulo app y del proyecto.

Java

build.gradle del proyecto


build.gradle del modulo app

1. Crear el Navigation Graph

Para esto debemos abrir nuestra pestaña de Project en Android Studio y hacer click derecho en la carpeta «res», seleccionar Android Resource File, escribir el nombre del navigation graph que queremos y luego seleccionar Navigation.

2. Agregar el NavHostFragment en el layout de nuestro MainActivity.

Esto nos servirá para hospedar nuestros fragments. Para esto agregamos el siguiente código a nuestro layout.

Luego, hay que abrir nuestro archivo de navegación nav_graph.xml y seleccionar nuestro host fragment.

3. Agregar nuestros fragments al Navigation Graph

Basta hacer click en el icono de la pantalla con un signo + verde, luego hacer click en «Create new destination» desde ahí podremos agregar nuestros Fragments previamente creados o crear nuevos.

4. Conectar nuestros fragments utilizando actions

Para conectarlos basta hacer click en un fragment y «arrastrar» una flecha hacia nuestro segundo fragment. Y ya habríamos creado una acción.

5. Moverse entre fragments

Para movernos entre fragments utilizando el Navigation Component tenemos varias opciones. La principal siempre es obtener el NavigationController, dependiendo del contexto en el que te encuentres puedes realizarlo de una manera distinta.
En nuestro caso cambiaremos a otro fragment cuando se haga click en una imagen. Para esto utilizaremos el método de la clase Navigation FindNavController que acepta como parámetro una View o una Activity, luego utilizamos el método navigate y le pasamos como parámetro el id de nuestro action quedando de esta manera:

Java:

Kotlin:

Pasar objetos de un fragment a otro

Para poder pasar objetos de un fragment solo tenemos que crear nuestro Bundle como se hacía tradicionalmente y agregarlo como parámetro al método .navigate() que vimos antes de esta forma:
Java:

Kotlin:

Para obtener el drawableId en nuestro fragment de detalles lo hacemos de la siguiente manera:

Java:

Kotlin:

Pasar objetos de un fragment a otro usando el plugin de safe-args

El Navigation Component utiliza un plugin de Gradle llamado safe-args que ayuda al momento de pasar objetos de un Fragment A a un Fragment B. Este ayuda a generar clases que se encargan de que los objetos sean type-safe.

Nota: Type-safe significa que el objeto es evaluado en tiempo de compilación y el compilador nos dará un error en caso de que intentemos pasar un tipo que sea erróneo.

Ademas de esto, nos ayuda a quitarnos el problema de estar asignando constantes como claves del bundle para luego usarlas y recuperar así los objetos.

Primero necesitamos ir a nuestro nav_graph.xml y hacer click en el fragment que va a recibir el objeto, en nuestro caso vamos a pasar el id del drawable que vamos a mostrar en nuestro Fragment de detalle. Así que hacemos click en el detailFragment, luego en el símbolo + que se encuentra a la derecha de «Arguments» y creamos nuestro nuevo argumento. Rellenamos los campos y hacemos click en «Add».

Necesitamos crear una instancia del objeto NavDirections, esta la obtenemos desde una clase que fue generada por el plugin de safeArgs. El plugin de safeArgs lo que hace es agregar un sufijo al nombre del fragment, en nuestro caso:
Si tu Fragment se llama MainFragment, esta clase se llamará MainFragmentDirections, luego utilizamos el método que nos provee y como podrás ver tiene como parámetro un entero que es el id del drawable que vamos a pasar al otro Fragment. Luego se llama al método que vimos antes de navigate() pero esta vez le vamos a pasar el NavDirections que hemos creado previamente.

Java:

Kotlin:

Para obtener el drawableId que hemos pasado al fragment de DetailFragment lo hacemos de la siguiente forma:

Java:

Kotlin:

Final

Esto es el uso básico del Navigation Component. También puede ser usado en el caso que quieras con un Drawer o con un Bottom Navigation View, pero eso da para otro artículo 😄.
Y con esto hemos terminado. En los próximos artículos hablaré un poco acerca de otros Android Architecture components. Si te ha gustado este artículo compartelo en las redes sociales. No olvides seguirme en mi twitter seguirme en twitter para que seamos amigos 😄 y sigue tambíen el twitter y el instagram de codingpizza que lo encontrarás al final del sitio.

Aquí puedes encontrar todo el codigo que ha sido utilizado en este articulo.

CategoriasAndroidProgramación

El camino del desarrollador Android #10 – PizzaList

¡Hola! Finalmente hemos llegado a la segunda aplicación de esta serie de tutoriales que estamos realizando para aprender a programar en Android. En este post, vamos a implementar todo lo que hemos ido aprendiendo en los post anteriores y poder crear nuestra primera aplicación que obtiene datos de un servicio y los muestra al usuario. La aplicación en sí lo que hará es mostrar una lista de pizzas y de sus ingredientes, porque todos sabemos que la pizza es vida🍕.

Las dependencias que utilizaremos para este proyecto serán las siguientes:

-Fragments
-RecyclerView
-Retrofit
-Glide

Resultado final

app-screenshot
Captura de pantalla de la aplicación terminada.

 

Agregando dependencias

Como en todas las aplicaciones que creamos, necesitamos empezar agregando las dependencias a nuestro build.gradle.

Creando nuestra Activity

Vamos a iniciar creando nuestro Activity que va a gestionar nuestro Fragment de lista de pizza. En el último Google I/O, el cual es el evento anual de Google donde hablan acerca del futuro del framework de Android, nuevas tecnologías y todo lo que se viene; los encargados del desarrollo del framework de Android han comentado que la mejor forma de tener una aplicación hoy en día es una Activity con muchos Fragments. Por eso vamos a realizar nuestras aplicaciones de esta manera de ahora en adelante.

Para empezar, crearemos el layout de nuestro Activity y su respectiva clase. Además, para hacer el post un poco más corto agregaremos de una vez la llamada a un Fragment que vamos a crear luego.

Java

Kotlin

Creando nuestro Fragment

Ahora procederemos a crear nuestro Fragment donde mostraremos nuestro RecyclerView con la lista de pizzas. Para empezar, vamos a agregar directamente el RecyclerView a nuestro layout.

Java

Kotlin

Luego procederemos a crear el layout para la fila que mostrará la información de cada pizza.

Creando nuestro POJO

Como ya se ha mencionado en el post anterior (puedes revisarlo haciendo click aquí), para crear un objeto a partir de un JSON es necesario realizar un Plain Old Java Object. Para esto crearemos nuestra clase Pizza, que es muy parecida a la que hicimos anteriormente solo que en esta oportunidad tiene una url donde está almacenada la imagen.

Java

Kotlin

Creando nuestro CustomAdapter y ViewHolder

Ahora crearemos nuestro CustomAdapter el cual extiende de RecyclerView.Adapter y vamos a crear dentro del mismo una clase con un viewHolder. Dentro de este último vamos a asignar la información de cada pizza.

Java

Kotlin

Agregando Glide

Para poder mostrar las imágenes de cada pizza necesitaremos utilizar Glide. Usar Glide es bastante sencillo solo debemos indicarle en cuál View va a buscar la ImageView en la que queremos mostrar la imagen .with(), luego desde dónde va a cargar la imagen con el método .load(), y finalmente, con el método .into() pasamos nuestro ImageView quedando de la siguiente manera:

Java

Kotlin

Obteniendo datos con Retrofit

Antes de crear el RecyclerView vamos a empezar creando la llamada a la API para obtener la información que le vamos a pasar a este. Esta parte también es muy parecida al post anterior con la única diferencia que aquí la parte final de la url es /v2/pizzas/, ya que esta url contiene la listas de pizzas con imágenes.

Java

Kotlin

Rellenando el RecyclerView

Para llenar nuestra lista de pizzas vamos a necesitar crear en nuestro Fragment, un RecyclerView y una instancia de Retrofit. Luego de esto vamos a crear un Service con Retrofit que nos permitirá realizar una llamada a la URL que ya hemos definido previamente y al obtener los datos vamos a asignarlos a nuestro nuevo CustomAdapter.

Java

Kotlin

Con esto ya tendremos nuestra simple aplicación para ver Pizzas y sus ingredientes.

Conclusión

En estos últimos post hemos hablado de cómo realizar llamadas a servicios que ya existen y obtener sus datos para mostrarlo en una aplicación. La mayoría de las aplicaciones necesitan hacer esto.

Próximamente, hablaremos sobre cómo integrar mapas a tus aplicaciones, recibir notificaciones y muchas cosas de las que seguro te querrás enterar.

Síguenos en las redes sociales que puedes encontrar al final de la página y comparte este artículo con tus amigos desarrolladores o con aquellos que estén empezando a programar. 😉

CategoriasAndroidProgramación

El camino del desarrollador Android #4 – RecyclerView y Adapters

Hola amigos, bienvenidos otra vez a otro tutorial de esta serie sobre Android en este caso por fin, toca hablar de uno de los elementos más usados en todo el mundo del desarrollo Android, RecyclerViews.

¿Que son estos famosos RecyclerViews?

Los RecycerViews son elementos que permiten mostrar una lista de elementos en una aplicación, por ejemplo. Mostrar una lista de fotos, dónde el usuario puede interactuar con cada foto, darle «Me gusta», compartir la foto y comentar sobre la foto. ¿Les suena parecido este ejemplo? pues seguramente si, Instagram, Facebook, La aplicación que usas para ordenar pizza los domingos probablemente también utilice un RecyclerView para mostrarte todas sus pizzas.

Un RecyclerView nunca anda solo, siempre tiene compañeros y estos son los Adapters y los LayoutManager. Son algo así cómo los tres mosqueteros, El LayoutManager se encarga de gestionar cómo mostrar cada celda del Recyclerview y ordenarlas de cierta manera, el Adapter se encarga de cómo se gestiona la información manejar la lista de elementos, notificar cuando un elemento ha cambiado o ha sido eliminado y por último el RecyclerView gestiona la parte visual de cómo se muestra esta cantidad de elementos en una manera muy eficiente, esto lo hace manteniendo una cantidad de limitada de vistas.

Fuente: Android Developers

¿Entendido, por dónde empezamos?

Para empezar debemos primero agregar nuestro RecyclerView al layout XML de nuestro Activity.

Vemos que al ser un widget, tiene atributos que ya hemos visto antes en los otros post si no te acuerdas de ellos o no los has visto. Puedes revisar en nuestro post dónde hablamos de widgets Aquí.

Paso #2

Crear nuestro layout del ViewHolder, cada ViewHolder necesita mostrar un layout. Así que nos centramos en crear nuestro propio layout, es bastante simple, hacemos el mismo procedimiento que hemos realizado previamente para los Activities.

cómo podrás ver, no tiene nada del otro mundo. Es solo un Activity con un TextView dentro que nos muestra un nombre.

Paso #3

Para continuar con la creación de nuestro RecyclerView, necesitamos crear nuestro propio Adapter. Para ellos necesitamos crear una clase que sea hija del Recyclerview.Adapter y lo hacemos de la siguiente manera:

Ok, hemos creado nuestro Adapter e implementado sus métodos. Pero, un momento ¿que es un «ViewHolder» y por que esta ahí?, bueno un ViewHolder es la forma en la que cada celda es representada en el RecyclerView y cada ViewHolder necesita de un layout. Si, un archivo XML así cómo las Activities ¿Que sorpresa no?.

Puede parecer mucho código luego de implementar todos los métodos que se generan por la herencia de la clase, pero calma que explicaremos cada parte de este código.

Primero, creamos una clase llamada CustomAdapter. Esta clase hereda de RecyclerViewAdapter y dentro de ella tenemos un ViewHolder, al ser una clase hija de RecyclerView.Adapter debe implementar los siguientes métodos:

onCreateViewHolder(ViewGroup parent, int viewType): Este método se encarga de «inflar» el xml del cual hablamos previamente y regresar un objeto ViewHolder.

public void onBindViewHolder(MyViewHolder holder, int position): Este método se encarga de asignarle a cada ViewHolder los datos que tiene que mostrar por eso para acceder a los widgets que tenemos declarados previamente, necesitamos utilizar el holder.mTextView.setText y asignarle el texto obteniendo cada elemento de la lista utilizando mNameList.get(position).

public int getItemCount(): Por último este método indica la cantidad de objetos que contiene la lista. La cual hemos creado previamente, en nuestra clase CustomAdapter.

Para terminar con este paso hablaremos de la clase MyViewHolder la cual es una clase que hereda de la clase RecyclerView.ViewHolder y es dónde creamos nuestro ViewHolder personalizado, aquí declaramos los widgets que se muestra en el layout xml que hemos creado previamente y para inicializarlos tenemos que utilizar el famoso método findViewById() pero esta vez necesitamos buscar este id en el itemView que nos provee el constructor por eso utilizamos itemView.findViewById(R.id.tv_name);

Paso #4

Ahora tenemos que crear e inicializar nuestro RecyclerView y Adapter en el Activity que estamos utilizando. Lo hacemos de la siguiente manera:

Aquí podemos observar, cómo creamos un RecyclerView y lo inicializamos, luego creamos una lista de nombres que es con la cual vamos a rellenar nuestro CustomAdapter y llegamos al LayoutManager el cual se encarga de ordenar y manejar las celdas que le envie el Adapter, existen tres tipos de LayoutManager las cuales son:

  • LinearLayoutManager: El cual muestra las celdas cómo si fuera un LinearLayout de forma vertical o de forma horizontal.
  • GridLayoutManager: Que muestra los elementos en forma de cuadrícula.
  • StaggeredGridLayoutManager: Parecido al GridLayoutManager solo que esta lo muestra de una manera escalonada.

Si no estas contento con alguno de estos 3, siempre puedes crear tu propio LayoutManager.

Luego, indicamos al RecyclerView que ItemAnimator debe utilizar el cual es una animación que se muestra en una celda cuando un cambio es realizado en el Adapter y un divisor que divide cada celda de nuestro RecyclerView. Para terminar solo le indicamos al RecyclerView cual es el Adapter que debe utilizar y hemos terminado!

RecyclerView

Y con esto tenemos otra herramienta más a nuestro arsenal, dónde sin duda alguna es una de las más importantes y muy usadas en este mundo del desarrollo Android, no te pierdas la próxima entrega de esta serie de tutoriales dónde crearemos una aplicación desde 0 y utilizaremos todos los conocimientos que hemos ido publicando hasta el momento.

Y cómo siempre, si te ha gustado el Post o nuestro blog puedes comentar, compartir nuestro post por las redes sociales y seguirnos en ellas (Instagram, Twitter, Facebook) para que no te pierdas ningún Post de nuestro blog y más importante, nos apoyes. ¡Hasta luego!

CategoriasAndroidSin categoria

El camino del desarrollador Android #1 – Instalar Android Studio en Linux

¡Hola! Para estrenar esta sección de nuestro blog pensé en realizar una serie de tutoriales donde veremos como podemos seguir un camino para volvernos un desarrollador Android aprendiendo conceptos y elementos para luego implementarlos en aplicaciones de la vida real. En esta primera versión de esta serie de Post empezaremos hablando de como instalar Android Studio.

Instalar Android Studio en Linux no tiene gran dificultad solo tenemos que instalar Java, descargar el SDK de Android y el IDE el cual sería Android Studio.

Instalar Android Studio en Linux (Debian,Ubuntu,Xubuntu,Kubuntu)

Antes que nada debemos instalar Java el cual lo haremos de la siguiente manera:

  1. Agregar el repositorio de webupd8team.com con el siguiente comando:
    add-apt-repository ppa:webupd8team/java
  2. Actualizar la listas de repositorios
    sudo apt-get update
  3. Instalar Java 8 con el siguiente comando:
    sudo apt-get install oracle-java8-installer
  4. Utilizar el siguiente comando:
    sudo update-alternatives --config java
  5. Ahora agregaremos la variable de entorno $JAVA_HOME al archivo environment de la siguiente manera usamos el comando sudo nano /etc/environment para abrir el archivo y agregamos la siguiente línea
    "JAVA_HOME="/usr/lib/jvm/java-8-oracle/jre/bin/java""
  6. Notificamos los cambios y volvemos a cargar el archivo environment con el comando:
    source /etc/environment

Podemos saber si nuestra variable $JAVA_HOME funciona utilizando:

echo $JAVA_HOME

Y para saber si hemos instalado bien Java usando el comando:

java -version

 

Instalando Android Studio

Hoy en día instalar Android Studio es muy sencillo, solo tienes que descargar el archivo .zip.

Desde aquí

Luego al descargarlo solo tienes que extraer los archivos, dirigirse a la carpeta que acabamos de extraer desde la terminal.

cd android-studio/bin/

luego corremos el archivo .sh del Android Studio

./studio.sh

Seguimos el proceso de instalación seleccionamos la primera opción

Seleccionamos la opción de «Configuración»
Android Studio tutorial imagen 1

Luego seleccionamos los SDK que vamos a descargar

Android Studio tutorial imagen 1

Se abrirá una ventana como la siguiente y comenzara a descargarse los SDK, luego esperamos y al terminar ya podríamos empezar a crear un proyecto con Android Studio.

Android Studio tutorial imagen 1

 

Nuestros amigos de Google y de IntelliJ nos proporcionan actualizaciones del Android Studio desde el mismo programa así que no tienes que preocuparte por repetir este paso una y otra vez.

Si te ha gustado este Post, compártelo en las redes sociales 🙂 y déjanos tu opinión aquí debajo.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies