Codingpizza

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

Hola a todos, previamente ya hemos hablado acerca de lo que son las Activities, cómo funcionan y cómo agregar widgets para darle un uso y una apariencia. De lo que vamos a hablar en este Post es acerca de Intents,Imageview (Otro widget que aun no hemos cubierto) y Bundles. Estos componentes son esenciales en una app de Android, ya que por empezar a hablar de ellos los Intents nos ayudan a llamar a otro componente de la aplicación, es imposible tener una app sin imágenes así que para eso tenemos los ImageView y los Bundles que nos sirven para almacenar objetos y pasarlos a través de clases.

¿Qué son los Intents?

Los Intents son objetos que se utilizan para solicitar la acción de otro componente de Android. Ya vimos una de ellas que son las Activities, ahora los otros tres componentes de Android restantes serían, Broadcast, Services y content Providers. De los cuales hablaremos próximamente en este blog.

Las tres formas más comunes para utilizar Intents son las que vamos a ver a continuación:

Para comenzar una actividad

En caso de que tengamos nuestra actividad Login y quisiéramos desplazarnos a nuestra actividad principal con toda la información principal de la aplicación, tendríamos que crear un Intent y utilizar el método

startActivity();

y pasarle como parámetro un Intent con la clase a la que nos queremos dirigir, por ejemplo:

Los dos tipos de Intents

Existen dos tipos de Intents, lo que acabamos de ver que sería un Intent explícito, el cual se llama así por que se indica explícitamente que componente vamos a iniciar, en este caso sería otra activity de nuestra app.

Fuente: Android Developers

En esta imagen podemos ver como se inicia un Intent desde un Activity A hasta como llega y se inicia un Activity B.

Al contrario a un Intent implícito,
no le indicamos que componente va a iniciar, sino que le declaramos una acción, lo cual permite a otra aplicación como gestionarlo. ¿Alguna vez has querido compartir esa foto graciosa que encontraste en tu aplicación favorita y le das al famoso botón de share y luego te muestra un menú para seleccionar a través de que aplicación quieres compartirla?, Bueno eso es gracias a un Intent implícito.

Para crear un Intent implícito en tu aplicación puedes hacerlo de la siguiente manera:

También existen los Pending Intents los cuales son contenedores de Intents que se ejecutan luego de que el usuario interactúa con una notificación o con un widget.

ImageViews

Los ImageViews son widgets como los que hablamos en la versión anterior de esta serie de tutoriales solo que estos se encargan, como su nombre lo indica, de mostrar una imagen al usuario. Para mostrar una imagen solo hay que copiarla en el directorio Drawable o Mipmap y luego llamarla desde el XML de la siguiente forma:

En el cual podemos ver los siguientes atributos:

android:layout_width=«wrap_content»: Donde le indicamos que queremos que el ancho de la imagen se adapte al tamaño que tenemos.
android:layout_height=«wrap_content»: En este atributo le indicamos que se adapte al tamaño pero en este caso hablamos de la altura del widget.
android:src=«@mipmap/ic_launcher»: En este atributo indicamos en donde esta guardada la imagen y el nombre que esta tiene para asignarla

Aparte de estos atributos los ImageView tienen atributos muy importantes como son los siguientes:

android:tint : Con este atributo podemos cambiarle el color a drawable o un svg.
android:scaleType : Con este atributo podemos cambiar la forma en el que se ve una imagen al aplicarle una reducción.

Bundles

Los Bundles, objetos cuya misión es transportar tus objetos desde una Activity a otra. Para ello, el objeto que tengas que enviar debe implementar la interfaz Parcelable. O utilizar primitivos para enviar tus datos desde una Activity a otra, por ejemplo, si queremos enviar un dato desde una Activity a otra podemos agregarlo al Intent de la siguiente manera:

Luego en la mainActivity.java podemos obtenerlo desde un bundle de la siguiente forma:

Donde podemos observar que obtenemos el intent con el método getIntent(); y luego obtenemos los extra que habíamos colocado anteriormente con el método .getExtras(); y por último, verificamos si el bundle no es nulo y si contiene el string con la clave url de ser hacer mostramos un Toast.

Nuestros amigos los bundles, también sirve para guardar los datos de nuestra activity en un caso que se gire la pantalla y se tenga que reconstruir la actividad. Hablaremos de esto y acerca del ciclo de vida de las activities en un próximo post aquí, así que no olvides seguirnos en las redes sociales para estar al tanto de nuestros post.

Con esto terminamos otro capitulo mas acerca del camino del desarrollador Android y estamos más cerca de poder lograr nuestra propia aplicación así que comenta si te gusto el post, si no te ha gustado comenta que no te gusto y comparte este post por las redes sociales para todos aquellos que quieran empezar a desarrollar en Android, ¡Hasta luego!

Recuerda que si quieres adelantarte y seguir conociendo mas de Android puedes visitar la documentación oficial haciendo click aquí