Notificaciones : SnackBar

Anteriormente ya vimos como podíamos mostrar un breve texto al usuario a modo de notificación utilizando un Toast. Cuando Material Design vio la luz con Android 5, lo acompañó un nuevo componente que cambiaría ‘ligeramente’ la manera en la que se muestran las notificaciones dentro de la aplicación. Este componente en cuestión es nuestro protagonista de hoy y se llama SnackBar.

Igual que con un Toast, el Snackbar nos sirve para mostrar avisos al usuario de una manera sencilla y rápida. Por ejemplo, en aplicaciones de correo, podemos ver un SnackBar al borrar un email, o al enviarlo. A diferencia del toast, podemos mostrar un texto en el SnackBar que permita realizar una acción, comúnmente esta acción es el ‘deshacer’ la operación anterior.

Pongámonos en situación :

Estamos en nuestro buzón de entrada del correo, seleccionamos un mensaje para eliminarlo. Justo cuando eliminamos el correo nos aparece un Snackbar que dice “Mensaje eliminado”, a su derecha podremos observar un texto que dice “Deshacer”, pulsandolo revertiremos la última acción realizada devolviendo el mensaje al buzón de entrada.

Entendiendo esto podemos ponernos manos a la obra para crear nuestro SnackBar.

 

 

 Implementación de un SnackBar

Para este ejemplo he creado un nuevo proyecto en Android Studio utilizando como plantilla una Actividad Básica.

Plantillas Activity Basic - Android StudioAl crear un proyecto nuevo veremos el Snackbar ya implementado por defecto en el MainActivity.

Si vais a escribir en un proyecto ya creado anteriormente, aseguraros que compiláis el paquete de soporte en el archivo build.gradle :

 

Lo siguiente que haremos será añadir varios botones y un selector de RadioButton al contenido del activity principal, que nos permitan mostrar las diferentes opciones de SnackBar que podemos crear. Para ello nos dirigimos al archivo content_main.xml situado en el directorio >res>layout.

Borramos el Textview de “Hello World” que aparece por defecto, y dejamos el archivo igual a este :

Este layout nos dará un aspecto como el siguiente :

Layout ejemplo snackbar

Con nuestro contenido creado, pasaremos a ver la forma de instanciar el componente SnackBar.

 

 

Esculpiendo el Snackbar

Dentro del objeto encontramos el método .make() éste como mínimo necesita 3 parámetros para funcionar:

  1. El primero es una vista (View). Normalmente se le pasa el view que viene del evento onClick(view v), pero si no es el caso podéis pasarle directamente vuestro CordinatorLayout.
  2. El siguiente parámetro es un tipo String, éste será el mensaje que veremos en el SnackBar.
  3. El tercer y último parámetro es un entero [int|Integer] que definirá el tiempo que será visible el Snackbar. Tenemos 2 posibles opciones:
    1. Snackbar.LENGTH_SHORT
    2. Snackbar.LENGTH_LONG

La sintaxis final quedará algo así :

SnackBar sin acción

 

Si quisiéramos incluir una acción disponemos del método .setAction(String, OnClickListener)

  1. Primer parámetro | String : Es el texto que aparecera para el botón de acción
  2. Segundo parámetro | OnClicListener : Es el evento que se producirá una cuando pulsemos el botón.

En nuestro ejemplo la sintaxis final con acción queda así :

Ejemplo Snackbar con acción

 

De la misma manera que añadimos una acción, también podemos cambiar el color del botón, utilizando el siguiente método:

El parámetro a seleccionar es un int correspondiente a un color.

Ejemplo Snackbar con acción y color

Finalmente utilizamos el método .show() para mostrar el SnackBar al usuario.

 

 

 

Escribiendo en el MainActivity

Hasta aquí, ya tenemos creada nuestra interfaz gráfica, sabemos como utilizar un SnackBar y como añadirle una acción.

Solo queda darle lógica a nuestra actividad para coordinar todos los elementos:

En nuestra app hemos creado 3 botones que nos permitirán mostrar SnackBars de diferentes características : sin acción, con acción y con botón de acción en otro color. Mediante un grupo de RadioButtons permitiremos seleccionar la duración de nuestro SnackBar.

 

Y con esto finaliza esta entrada! Veis que fácil es mostrar un SnackBar?

Ya no hay ninguna excusa para seguir utilizando esos feos Toast. Si tenéis cualquier duda, podéis dejar un comentario más abajo!

 

Mario Camí Author

Desarrollador de aplicaciones Android. Amante de todo lo Open Source, de los videojuegos y nuevas tecnologías. En mi tiempo libre comparto todo lo aprendido y lo que aprendo en el desarrollo de Android a modo de artículo en el blog. La información nos hará libres!