¡Hola! Hoy vamos a seguir con la serie de tutoriales de desarrollo Android, estas guías que a cualquier desarrollador le pueden servir para aprender y usar en su trabajo. En esta oportunidad hablaremos de Glide, la cual es una librería que se utiliza para cargar imágenes en nuestras aplicaciones Android.

Agregando Glide a nuestro proyecto

Como la mayoría de las librerías, empezamos agregando lineas a nuestro archivo build.gradle.

Añadimos el permiso de Internet (Opcional)

Si nuestra aplicación va a cargar imágenes desde Internet, vamos a necesitar el permiso correspondiente. En caso de que la aplicación que estés desarrollando no necesite cargar imágenes, puedes obviar este paso.

El permiso de internet se incluye en el AndroidManifest.xml, dentro de la etiqueta de Manifest y fuera de la etiqueta de Application. Quedando de la siguiente manera:

Añadiendo el permiso de escritura y lectura.

Para leer imágenes del usuario de la app vas a necesitar agregar el siguiente permiso, el cual se agrega igual que el anterior.

<uses-permission android:name=»android.permission.READ_EXTERNAL_STORAGE» />

Si quieres utilizar la cache de Glide para almacenar datos en la microSD vas a necesitar el permiso de escritura, si agregas los dos permisos al AndroidManifest quedaría así:

<uses-permission android:name=»android.permission.WRITE_EXTERNAL_STORAGE» />

Puedes usar el de Internet y estos que hemos mencionado anteriormente no son excluyentes, solo debes agregar uno debajo el otro. Con esto hemos terminado de incluir esta librería en nuestro proyecto usando Java, en caso de que uses Kotlin aun te falta algo mas por hacer.

Agregar el Plugin kapt (Solo en caso de Kotlin)

En este caso, no vamos a utilizar la linea de annotationProcessor que tenemos en el primer paso. En su lugar vamos a agregar el Plugin de kapt

En el build.gradle agregamos:

dependencies {
kapt ‘com.github.bumptech.glide:compiler:4.8.0’
}

Y luego tenemos que incluir también el plugin al inicio del build.gradle:

apply plugin: ‘kotlin-kapt’

Quedándonos así:

Creando el layout para mostrar la imagen

Para hacer esto solo tenemos que seguir unos sencillos pasos. Simplemente un botón con un ImageView en el que se cargara la imagen, el cual seria.

Nada que no hayamos visto antes ni que sea muy complicado, una View que es un ImageView y un botón el cual tendremos que tocar para que se cargue la imagen.

Finalmente, utilizamos Glide

Para utilizar Glide vamos a agregar un listener al botón que hemos creado previamente y llamar al método loadImage que crearemos ahora, y luego dentro de este ultimo haremos la llamada a Glide.

Cuando utilizas Glide basta con llamar al método with() y pasarle como parámetro un Context, un Activity o un Fragment. Luego indicamos la URL que vamos a utilizar para cargarla en el imageView y para finalizar utilizamos el método .into para cargarla en el imageView que hemos declarado anteriormente.

Java

Kotlin

La única diferencia que tenemos en Kotlin es el uso de .let.

Recuerda que el repositorio del proyecto lo puedes encontrar Aquí. Para alternar entre el proyecto en Java y en Kotlin basta cambiar de rama ?.

Qué hacer ahora

Glide tiene muchísimo más potencial de lo que hemos hablado hasta ahora, así que si quieres conocer más de sus capacidades puedes leer su documentación haciendo click aquí.

Con esto terminamos este post; si te ha servido no olvides compartirlo con tus amigos programadores ? y recuerda seguirnos en nuestras redes sociales para estar al tanto de todas las publicaciones que hacemos.

Nuestras tareas de cada día en la mayoría de las aplicaciones que creamos son las llamadas a servicios,APIs y otras fuentes donde podamos consumir datos para mostrar al usuario en nuestra aplicación. En estos casos existen muchas maneras de realizar estas tareas pero gracias a Retrofit, una librería para la capa de comunicación de nuestra aplicación se nos hace fácil esta tarea.

Integrar Retrofit a tu aplicación es bastante sencillo, solo necesitas seguir los siguientes pasos:

1. Integrar Retrofit a las dependencias a tu proyecto de Android Studio en el build.gradle.
2. Crear nuestros POJO (Plain Old Java Object) para la llamada.
3. Luego necesitas crear una interfaz donde vas a definir todas las llamadas que se van a realizar a una API utilizando sus anotaciones especiales.
4. Crear una instancia de Retrofit donde indicar la URL de la API.
5. Crear una implementación de la clase que hemos creado previamente en el paso 2.
6. Realizar la llamada.
7. Hacer uso de los datos de la forma que prefieras, por ejemplo mostrarlos en un RecyclerView.

Integrando Retrofit a nuestro proyecto

Para integrar Retrofit lo unico que necesitamos realizar es agregar las siguientes lineas al build.gradle

Creando nuestros POJOS

Aquí es donde viene unas de las mejores funcionalidades que tiene Retrofit, la conversión a nuestros POJOS haciendo uso de la librería de Google, GSON. Podemos convertir un JSON en objetos Java.

En nuestro caso he preparado una API de pizzas a la cual consultaremos y mostraremos su resultado por consola, recuerda que luego podemos utilizar esta información para mostrarla en un RecyclerView.

La URL de nuestra API a la cual llamaremos es: http://private-3cc5a4-codingpizza.apiary-mock.com/pizzas

Con el JSON que nos devuelve nuestra API de pizzas iremos a esta pagina http://www.jsonschema2pojo.org/ , la cual es genial para convertir JSON a clases de Java (En el caso de que estemos creando un proyecto con Kotlin, puedes convertir la clase de Java a Kotlin utilizando la opción de convertir archivo Java a Kotlin en la pestaña de «Code» de Android Studio.

En la siguiente imagen podemos ver como obtener nuestra clase Java, solo basta pegar el JSON y luego hacer click en Preview si queremos ver una vista previa o descargar todo en un zip que contenga las clases que necesitamos.

Ahora solo falta pegar estas clases dentro de nuestro proyecto y hemos terminado con este paso.

Creando la interfaz

Luego procedemos a crear una interfaz donde definiremos todas las llamadas que realizaremos y lo haremos de la siguiente manera:

Kotlin

Podemos ver que tenemos varias anotaciones las cuales indican lo siguiente:

@Get: Realiza una llamada Get (Si, es un poco obvio). Pero existen otras anotaciones que podrán conocer en la pagina oficial de Retrofit.

Creando nuestra instancia de Retrofit

Creamos nuestra instancia de Retrofit en nuestra clase usando su Builder e indicamos a la URL que vamos a llamar

Kotlin

Indicandole a Retrofit de que interfaz hablamos

Ahora tenemos que crear un Objeto de PizzaService, con la clase que necesitábamos y para terminar este paso tenemos que crear una Call, especificando que método de la clase PizzaService vamos a utilizar.

Kotlin

Agregar el permiso de Internet

Esto es de vital importancia si no lo agregas no podrás realizar conexiones desde tu aplicación y esta se cerrara.

Realizando las llamadas

Ahora vamos a realizar una simple llamada a un servicio utilizando nuestras clases nuevas de la siguiente manera:

Kotlin

En esta parte, creamos un objeto Call el cual nos traerá un objeto Response el cual verificamos si ha sido exitoso y de ser así obtenemos el Body de la llamada el cual es una lista de objetos de Pizza donde obtendremos toda la información que necesitamos para mostrar en un Log, esta lista podemos utilizarla también en un RecyclerView y mostrar estos datos pero esto lo haremos cuando creemos la aplicación completa. Así que si no quieres perderte cuando creemos la aplicación no olvides seguirnos en nuestras redes sociales y suscribirte a nuestra newsletter.

Ventajas de Retrofit

Retrofit es muy versátil y así como puedes convertir llamadas a JSON puedes convertir a XML,Jackson,Moshi hasta puedes obtener un JSON «Crudo», Llámese «Crudo» a la misma respuesta JSON que puedes obtener realizando una llamada a la API desde otro medio como Postman (¿Conoces Postman No?, de no ser así deberías es una gran aplicación para realizar llamadas a API y ver como funcionan los servicios de la API).

Otra de las grandes ventajas de Retrofit 2 es que te permite modificar el Header (Cabecera) de una llamada, utilizando la anotación @Header. Hay mucha tela que cortar con el Retrofit, por el momento utilizaremos solo las GET. Luego iré actualizando este Post con todas las llamadas posibles que utilicemos en otros post de el Camino del Desarrollador Android.

¿Que hacer ahora?

Empieza probando con diferentes llamadas a servicios que te llamen la atención y practica con ellos, si tienes alguna duda o quieres hacer algo en especifico pero tienes una duda. Puedes comentarlo aquí abajo y no olvides seguirnos en nuestras redes sociales, las cuales encontraras al final de la pagina ademas compartir esto con alguien que necesite aprender a usar Retrofit. Ademas en caso de que necesites el código del proyecto lo puedes ver y descargar de aquí si lo quieres en Java y para Kotlin aquí.

¡Hola! esta vez traemos de vuelta nuestros post sobre el desarrollo de aplicaciones Android, para seguir aprendiendo sobre como crear aplicaciones en esta plataforma. En esta oportunidad hablaremos del ciclo de vida de las Activities el cual es muy importante para el desarrollo de nuestras aplicaciones para que se comporten como es debido, tener el conocimiento del ciclo de vida nos ayudara a responder a los diversos cambios del sistema, como cuando tu aplicación se pone en segundo plano o cuando tu aplicación es cerrada.

El ciclo de vida

Cuando tu aplicación es creada y ejecutada pasa por varias etapas del ciclo de vida aquí debajo puedes ver un diagrama de como funciona dicho ciclo de vida.

Es un poco intimidante al principio, pero no es muy de difícil de entender ya que tiene bastante sentido prosigamos a explicarlo.

1. Empecemos, por el onCreate() este es el primer método que viene viene llamado cuando se crea una actividad aquí es donde construye y se crea tu interfaz de usuario, también llamada UI.
2. Cuando la actividad pasa a estar visible se llamara al método onStart(), el cual aparece cuando la actividad pasa a estar visible.
3. En el momento en la que la actividad gana foco, se llama el método onResume().

La misma secuencia ocurre en reversa,

1. La secuencia en reversa empieza con el onPause(), en este punto la Activity ha perdido el foco un ejemplo de esto es cuando queremos compartir una imagen y aparece el dialogo que te indica con que aplicación quieres compartirlo si a través de Instagram, Facebook o Twitter.
2. Luego continua con el onStop(), el cual viene llamado cuando la Activity ya no es visible.
3. Y para terminar el ciclo de vida, viene llamado el método onDestroy() el cual es el ultimo que viene llamado al eliminar la Activity.

Los otros dos casos que nos quedan son, cuando el usuario regresa a la aplicación en el cual se llamara al método onRestart(). El otro caso restante es el que podemos encontrar a la izquierda de la imagen, cuando el Sistema operativo tiene demasiada memoria ocupada, empezara a matar las aplicaciones que estén consumiendo mucha memoria, así que podríamos tener el caso en el que tengamos una aplicación en segundo plano pero que este consumiendo muchos recursos, así que será eliminada y nunca pasaría por el onRestart(), lo mismo ocurriría en el onPause().

Mucha teoría poco código, bueno aquí esta.

En este caso vamos a tomar por ejemplo, que tenemos un formulario que el usuario debe rellenar para registrarse. ¿Que ocurre? que al girar el móvil, se borran los campos y tiene que llenarlos de nuevo, una de las peores cosas que pueden pasar.

¿Por que ocurre esto? Por que al hacer esto el ciclo de vida se reinicia y empieza a pintar de nuevo la interfaz desde el onCreate(), así que lo que procederemos a hacer es almacenar el estado en el bundle y luego restaurarlos.

Tendríamos nuestro layout xml, de la siguiente forma:

Y presentando, nuestro primer post en con código en Kotlin tenemos:

De esta forma al girar la aplicación ya tendremos que se mantiene el estado y lo que hemos escrito previamente.

Algunas cosas que deben saber del código en Kotlin que quizas pueden llegar a preguntarse:

• ¿Donde están los findViewById? en Kotlin puedes utilizar directamente las views de un XML utilizando una extensión que se llama kotlinx.android.synthetic al tu escribir el id de en este caso el EditText te aparecera la sugerencia que te indica si quieres importarlo con kotlinx, aceptas y se incluirá en tu clase.
• La función .run{}  es una función de Kotlin, asi que no te preocupes si no las has visto antes.
• El símbolo ? antes de un punto indica que el objeto es opcional.

Para mucha gente que aun tenemos que utilizar Java en nuestro trabajo o en otros proyectos, lo hacemos de la siguiente forma:

Como podemos notar el código en Kotlin, es mucho mas limpio que en Java y ademas nos ahorramos unos cuantos if.

Y bueno, con eso terminamos en este post, una nueva herramienta que ya conocemos y que podemos aplicar a nuestras aplicaciones para hacerlas mas robustas y mejor para nuestros usuarios. Si te ha gustado lo que hemos hablado acá, no olvides, Compartir el Post usando los botones de aquí abajo, unirte a la newsletter para no perderte cualquier información acerca de nuestros post y seguirnos en nuestras redes sociales que encontraras debajo.

¿Qué es Flutter?

Flutter es un SDK creado por Google para desarrollar aplicaciones con una gran calidad en las interfaces, tanto para Android como para iOS. (Si, para iOS). Curiosa apuesta de parte de nuestro amigo Google, ¿no?.

Flutter es un SDK completo con frameworks, widgets y herramientas que le da a los desarrolladores una manera sencilla de crear aplicaciones con una linda interfaz en ambas plataformas. Esta pensado para que los desarrolladores tengan una manera rápida de construir aplicaciones para ambas plataformas sin sacrificar la interfaz.

También desde la página de Flutter, podemos obtener leer lo siguiente «Aunque no sean el objetivo principal para este framework. Flutter También esta hecho para los diseñadores que quieren que sus visiones de diseño sean realizadas consistentemente y con una alta fidelidad a sus usuarios».

¿Qué clase de Ionic, Phonegap o React native es este?

Al principio cuando empece a saber de Flutter, pensé que seguro iba a ser otro mas del montón de frameworks que se utilizan para programar en ambas plataformas, porque es el sueño de muchas empresas, dejar de pagarle a dos desarrolladores para quedarse con uno solo y bueno, que vea como resuelve los problemas.

Pero, al contrario de las otras opciones que tienen una capa «conectora» que permite la comunicación entre Javascript y la parte nativa. En algunos casos es un WebView y en otros casos son los OEM widgets que vienen con el dispositivo Flutter tiene su propio motor de renderizado el cual esta hecho con C y C++.

No te preocupes, no necesitas ser el mejor en C o C++ para usar Flutter. El lenguaje que se utiliza para programar es … ¿Dart?. Si, Dart quizás no lo hayas escuchado antes, pero es un lenguaje «Moderno» y orientado a objetos, el cual a mi parecer tiene mucha semejanza con Javascript.

¿Qué IDE se utiliza para programar?

Para programar con Flutter tienes varias opciones:

– Android Studio 3: Solo necesitaras descargarte los plugins necesarios los cuales son:

• Flutter
• Dart

-Intellij IDEA: La versión Community o Ultimate de este IDE. e instalarte los mismos plugins.

-VS Code: Un favorito por muchos amigos desarrolladores, debes instalarte la extensión de dart code y recargar tu Visual estudio, además puedes validarlo escribiendo «doctor» en el Command Palette y seleccionar la opción de Flutter: Run Flutter Doctor

Flutter y su HotReload

Una de las muchas ventajas con las que se vende Flutter es su habilidad de «HotReload» el cual te permite probar rápidamente, experimentar, construir interfaces, agregar funcionalidades y solucionar bugs rápidamente, ya que actualiza la aplicación en pocos segundos sin perder el estado en el que se encuentra, en emuladores y en dispositivos físicos, tanto para Android como para iOS. Eso es algo que suena bastante interesante.

¡Perfecto! Mañana mismo migro toda la aplicación de mi empresa a Flutter

¡No tan rápido! Flutter aun está en Beta release y aunque promete muchas cosas, muchas de sus API aun están en crecimiento y necesita crecer todavía un poco. Pero habrá que darle una oportunidad, probar y quien sabe, quizás dentro de 3 años estén buscando desarrolladores con 5 años de experiencia en Flutter (Sarcasmo).

Una imagen vale más que mil palabras

Nuestros amigos de Google, han subido una aplicación a la Play store que podemos descargar desde aquí. Donde puedes probar todas los widgets que tiene Flutter, además aquí dejamos unos cuantos screenshots de como se ve.

Todas estas capturas son de la misma aplicación, podemos ver desde elementos del Material design y un dialogo de iOS.

Eso es todo… Por ahora

Si quieres saber mas acerca de Flutter puedes visitar su página. Además si piensas que deberíamos hacer más post acerca de Dart y Flutter, deja tu opinión en los comentarios. Y no olvides utilizar los botones aquí debajo para compartir el post en tus redes sociales para que este interesante proyecto se conozca más.

Ademas, aquí debajo te dejamos un resumen para que lo compartas con tus colegas 😉

Hola a todos, Por fin ha llegado el momento de crear nuestra primera aplicación donde utilizaremos todo lo que hemos estado aprendiendo en los post anteriores, si has llegado a este Post y no sabes de cual hablo, te invito a conocerlos aquí. Hoy nos enfocaremos en hacer una aplicación donde podamos «iniciar sesión», seleccionar una pizza entre un catalogo y al tocarla mostrar una descripción de ella.

La idea de estas aplicaciones es practicar con ejemplos de la vida real donde puedes llegar a sentir que has aprendido algo, no solo ver videos o leer blogs y esperar que todo lo que has leído lo aprendas mágicamente. Lo que no se practica se olvida y en el campo de la programación la práctica hace al maestro.

Creando el proyecto

Para empezar, vamos a crear nuestro proyecto y colocarle un nombre original como «Pizzapedia» y vamos a seleccionar crear un Empty Activity, es decir, una «Activity Vacia». Le dejamos el nombre de MainActivity, hacemos click en «Siguiente» Y esperamos que el Android Studio termine de inicializar el proyecto.

Luego que se haya creado el proyecto, procederemos a crear el layout de nuestra Activity en el activity_main.xml  donde vamos a añadir un LinearLayout y dentro de este, dos EditText para el nombre de usuario y contraseña respectivamente y luego incluiremos un Button para iniciar sesión.

Sin mas que agregar, abrimos el archivo activity_main.xml y agregamos el siguiente código:

La mayoría de estos atributos los habíamos visto en los Post anteriores. Sin embargo, he agregado dos mas a la lista los cuales serían:

android:layout_margin: El cual indica el margen del widget respecto al padre, al utilizar este atributo modificamos todos los márgenes respecto al padre por 8dp (En Android es una buena practica utilizar la unidad dp en vez de px)

android:layout_gravity: Este atributo especifica como debería colocarse el Button en un conjunto de vistas. En nuestro caso hemos optado por que se mantenga en el centro.

Agreguémosle funcionalidad

Ahora, agreguémosle la funcionalidad a nuestro layout. Abrimos nuestro archivo MainActivity.java donde vamos a implementar toda lógica que necesitamos para pasar a los siguientes Activities.

Primero, creamos nuestras variables miembros, mUsername_et,mPassword_et y mButton. Le añadimos el prefijo «m», así indicamos que es una variable miembro y le asignamos su vista utilizando el id que hemos declarado en el activity_main.xml.

Luego, vamos a agregarle la funcionalidad al Button utilizando el método setOnClickListener(); y dentro de este vamos a llamar a un método que vamos a crear llamado CheckUser(); el cual se encargara de hacer una validación sencilla, en donde verificaremos que el campo de usuario y contraseña no están vacíos, ademas de verificar que sean los correctos.

Para terminar, en caso de que el usuario haya ingresado el nombre de usuario y la contraseña correcta, se ejecutará un método que crearemos llamado moveToPizzaList(); donde utilizaremos un Intent para abrir la Activity que muestra la lista de pizzas disponibles.

Mostrando la lista de pizzas

Ahora que ya hemos iniciado sesión en nuestra aplicación queremos ver nuestra lista de pizzas, para esto necesitamos utilizar la herramienta que ya conocemos el llamado RecyclerView. Ahora, para empezar vamos a crear el layout de nuestra celda en el RecyclerView que llamaremos item_row.xml e incluiremos un ImageView y un TextView donde mostraremos una imagen de la pizza y su nombre.

Hemos agregado unas imágenes de pizzas a nuestra carpeta drawable donde luego con el RecyclerView vamos a mostrar, ahora agregamos el RecyclerView a nuestro layout de la nueva Activity que hemos creado el cual es el PizzaListActivity. Quedando asi el activity_pizza_list.xml:

Muy bien, ahora necesitamos crear un objeto de java llamado Pizza con tres atributos: nombre, descripción y un entero que será el id del drawable que vamos a colocar en el ImageView en pocas palabras el id de la imagen que acabamos de pegar en nuestra carpeta drawable.

Ahora que ya tenemos un objeto Pizza crearemos un Adapter que utilizará una lista de pizzas para mostrar. Empezamos creando nuestra clase CustomAdapter y Extendiéndola de la clase RecyclerView.Adapter tal cual como lo vimos en nuestro articulo anterior, luego le indicamos al viewHolder cual layout debe inflar en el método onCreateViewHolder(); y declaramos nuestros widgets en el método onBindViewHolder();

Recuerda que si no recuerdas bien como crear un Adapter personalizado, puedes revisar nuestro post anterior Aquí.

El CustomAdapter queda de la siguiente manera:

Ok, ya casi terminamos. Necesitamos crear nuestra lista de pizzas e inicializar nuestro RecyclerView en el mainActivity. Para esto, seguiremos los mismos pasos que en el post Anterior solo que en esta oportunidad, vamos a crear una lista de objetos Pizza y la vamos a pasar al CustomAdapter, quedando de esta forma:

Agregando el onClickListener

Para tener la capacidad de reaccionar al click de cada celda del RecyclerView no podemos utilizar un simple .setOnClickListener(); necesitamos crear nuestro propio onClickListener y aunque no hemos hablado todavía de los Listener, explicaremos brevemente que en este caso lo utilizaremos para reaccionar a ciertos eventos y ejecutar métodos entre distintas clases.

Empezaremos por crear la clase OnRecyclerViewItemClicklistener, la cual es una interfaz. Las interfaces solo tienen la declaración de los métodos mas no su implementación, esta se realiza en la clase que implementa la interfaz.

Ahora, debemos agregar como un nuevo atributo al CustomAdapter el cual va a ser nuestro recién creado Listener y a su vez vamos a modificar el constructor de la clase CustomAdapter.

Luego, en el método onBindViewHolder vamos a mover toda la inicialización de los widget a un método llamado bind() en la clase del ViewHolder y le pasaremos como parámetro la pizza de la lista que hemos seleccionado además del Listener, para despues asignarle un setOnClickListener al itemView y dentro de este llamar al Listener que creamos pasándole la pizza que hemos seleccionado anteriormente. El cual queda de la siguiente manera:

Para terminar, modificamos la forma en la cual creamos el CustomAdapter utilizando el nuevo constructor y creando un new OnRecyclerviewItemClickListener quedando de la siguiente manera:

Y así culminamos la aplicación, recuerda que esto es una base y puedes dar rienda suelta a tu imaginación para basarte en esta aplicación y crear otras aplicaciones con tus propias ideas. Si quieres descargarte el proyecto puedes encontrar el link al repositorio de github aquí. 

Como siempre, si te ha gustado el post deja un comentario acerca de que te ha parecido, sobre que te gustaría que habláramos y no olvides compartir el post y seguirnos en nuestras redes sociales.¡Hasta la próxima!