CategoriasAndroid

Como usar Android ExoPlayer con Jetpack Compose

Jetpack Compose ha venido para quedarse, es la solución moderna al desarrollo de interfaces de aplicaciones Android. Utilizando toda la potencia de Kotlin y su compilador, se ha logrado crear un Toolkit poderoso, fácil de utilizar y extensible. En este artículo vamos a hablar sobre cómo podemos utilizar Jetpack Compose con vistas existentes de Android como lo es Exoplayer.

¿Que es exoplayer? Es una librería de Android que contiene un reproductor que nos permite reproducir en nuestras aplicaciones de Android, videos, audio y streaming. Además de estas funcionalidades, también nos permite gestionar listas de reproducción, lo cual siempre se agradece.

Esta librería fue creada utilizando el toolkit de UI de Android existente, conocido también como Android Views, el cual es un mundo muy diferente al que manejaremos ahora y en el futuro con Jetpack compose. Para poder tener esta interoperabilidad entre las anteriores views y Jetpack Compose, existe un composable especial llamado Android View.

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 #9 – Cargar imagenes con Glide v4

¡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.

CategoriasAndroidProgramación

El Camino del Desarrollador Android #8 – Conectividad con Apis y Retrofit

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.

JsonToPojo

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í.

CategoriasAndroid

El camino del desarrollador Android #7 – Fragments

Fragments

¡Hola! En esta oportunidad nos toca hablar de uno de los componentes de Android que mucha gente odia, los Fragments.

Los Fragments podríamos decir que son piezas reutilizables de UI como los Layouts o los Viewgroups. Estos se pueden organizar de forma distinta dependiendo del tamaño de pantalla si así se quiere.

Generalmente, estos Fragments se utilizan en dos formas en específico. Puedes utilizarlos dentro de la misma actividad e intercambiarlos para dar la sensación de que se ha cambiado de actividad o puedes utilizarlos como se utilizan en las tablets el cual es un menú de un lado y el contenido de otro a esto se le llama “MasterFlow” en este post vamos a tratar solo el primer caso.

 

Fragments
Fuente: Android Developers

Todos los Fragments vienen mostrados en una Activity, estos utilizan la Activity como una “Anfitriona” y se alojan ahí. En práctica la actividad es un AirBnB para Fragments en este caso, la Activity gestiona estos Fragments a través del FragmentManager el cual permite agregar, remover y reemplazar los Fragments.

Ahora vamos a crear unos Fragments, pero antes otro poco de teoria

Los Fragments tienen un ciclo de vida distinto a los de las Activities, el cual por si no lo conoces lo puedes leer aquí. Sin embargo, comparten algunos Callbacks o eventos con su actividad «Anfitriona».

El ciclo de vida de los Fragments es el siguiente:

Fragment Lifecycle
Fuente: Android Developers

 

No vamos a hablar mucho de esto, por que considero que en la documentación de Android Developers esta muy bien explicado este ciclo de vida. Si quieres que te lo expliquemos de una manera mas a nuestra forma háznoslo saber en los comentarios 😊 , solo comentaremos que la vista en el caso de los Fragments no se crean en el onCreate() sino, en el onCreateView().

Ahora, el código.

Para utilizar los Fragments hay que seguir una serie de pasos los cuales son bastantes simples: 

Creando los Fragments

El Primer paso es crear nuestro Layout y nuestro Fragment que extienda de la clase Fragment, en este caso lo que vamos a hacer es crear una Activity en la que se muestre un Fragment para iniciar sesión, en caso de que el usuario no tenga cuenta seleccione la opción de registrarse y mostremos un Fragment con un formulario.

Primero creamos el Layout del Fragment, luego nuestro Fragment que extiende de la clase de Android Fragment.

Así que tenemos los Layouts para Login del Fragment y del Registro respectivamente:

Ahora, para continuar debemos crear nuestras clases Fragments.

Creamos nuestra clase LoginFragment

En la cual, creamos una clase LoginFragment que extiende de la clase Fragment, hacemos un Override del onCreateView() y dentro de este declaramos nuestras Views con nuestros onClickListeners en el caso de los botones.

Como habrán podido notar en el onCreateView() estamos devolviendo un objeto View, esto es por que inflamos la vista del Fragment que luego devolvemos por eso necesitamos usar el view.FindViewById().

También necesitamos crear una interfaz que implementara la MainActivity para que esta actué cuando tengamos que cambiar de Fragment.

Luego, creamos el Fragment de registro que es seguir los mismos pasos que hemos realizado previamente con el Fragment de Login.

Crear el MainActivity

Ahora para que la Activity anfitriona se encargue de ellos, debemos agregar al Layout del Activity un Fragment container y nos quedaría de esta forma:

Posteriormente a esto, creamos una instancia de nuestro Login Fragment y obtenemos una instancia del FragmentManager el cual nos va a ayudar a gestionar nuestros bellos Fragments en la Activity.

No podemos olvidar que debemos implementar la interfaz que hemos creado en el LoginFragment luego de esto debemos implementar el método de esta interfaz, gracias a este método cuando se toque el botón de Registrarse en el LoginFragment podremos decirle al FragmentManager que cambie el Fragment que se esta mostrando.

Así que el resultado de nuestra MainActivity seria este:

Ahora, para Kotlin

Para Kotlin el codigo que debemos utilizar en las clases del LoginFragment,SignInFragment y MainActivity es el siguiente:

Nota: en el post anterior, no utilizamos el findViewById() al contrario, usamos las ventajas de las Kotlin Android Extensions, las cuales nos permitían acceder a los views sin tener que utilizar la función findViewById().

En este caso al ser un fragment no podemos utilizarla, ya que lo que hace Kotlin Extension es llamar al metodo getView().findViewById() pero en este caso aun no hemos devuelto la View donde buscariamos el ID. Para utilizar la Kotlin Android Extension habría que llamarla en el onViewCreated();

Resultado Final

Formulario de inicio de sesión

 

Formulario de Registro

Y por ahora esto es todo, no olvides compartir esto en las redes sociales para demostrarles a todos como vas progresando como desarrollador Android 💪, recuerda seguirnos y si algo no te ha quedado claro o tienes alguna sugerencia déjala aquí debajo en los comentarios.

CategoriasAndroidProgramación

El camino del desarrollador Android #6 – Activity Lifecycle

¡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.

 

 

ciclo de vida de android
Obtenida de Android Developers

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.

 

CategoriasAndroidProgramación

Flutter – ¿Qué es?

¿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-hotreload

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

vamoacalmarnomeme

¡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 😉
Flutter-Infografia

CategoriasAndroidProgramación

El camino del desarrollador Android #5 – Primera Aplicación, Pizzapedia

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!

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