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 :

compile 'com.android.support:design:24.2.0'

 

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 :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="es.mscdroidlabs.snackbarejemplo.MainActivity"
    tools:showIn="@layout/activity_main"
    android:gravity="center">

    <Button
        android:id="@+id/btn_snack_sin_accion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mostrar SnackBar sin botón de acción"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/btn_snack_con_accion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mostrar SnackBar con botón de acción"
        android:layout_below="@id/btn_snack_sin_accion"
        android:layout_centerHorizontal="true"/>

    <Button
        android:id="@+id/btn_snack_con_accion_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mostrar SnackBar con botón de acción de color"
        android:layout_below="@id/btn_snack_con_accion"
        android:layout_centerHorizontal="true"/>

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="20dp"
        android:gravity="center"
        android:layout_below="@+id/btn_snack_con_accion_color"
        android:layout_centerHorizontal="true">

        <RadioButton
            android:id="@+id/rdo_short"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Length.Short"
            android:checked="true"/>

        <RadioButton
            android:id="@+id/rdo_long"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Length.Long" />



    </RadioGroup>
</RelativeLayout>

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.make(v, "SnackBar sin acción", Snackbar.LENGTH_SHORT)
        .show();

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

Snackbar.make(v, "Snackbar con acción", LENGTH.SHORT)
        .setAction("Cerrar app", Evento_Accion).show();

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:

.setActionTextColor(getResources().getColor(android.R.color.holo_green_light))

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.

public class MainActivity extends AppCompatActivity {

    //Instanciamos los componentes, botones y radioGroup
    Button snack_sin_acc;
    Button snack_con_acc;
    Button snack_con_acc_color;

    //Variable para almacenar el estado de los radioButtons
    private int tmp_checked;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //Floating añadido por defecto al crear el nuevo proyecto, comentaremos este trozo para evitar confusiones

        /*FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null)
                        .show();
            }
        });*/

        //Declaramos los botones
        snack_sin_acc = (Button) findViewById(R.id.btn_snack_sin_accion);
        snack_con_acc = (Button) findViewById(R.id.btn_snack_con_accion);
        snack_con_acc_color = (Button) findViewById(R.id.btn_snack_con_accion_color);

        //Los asociamos al evento OnClic que hemos creado más abajo
        snack_sin_acc.setOnClickListener(Evento_Clic);
        snack_con_acc.setOnClickListener(Evento_Clic);
        snack_con_acc_color.setOnClickListener(Evento_Clic);

        //Declaramos el ReadioGroup y registramos cuando se pulsa alguno de ellos mediante
        //el método ".setOnCheckedChangeListener"
        RadioGroup rdo_group = (RadioGroup) findViewById(R.id.radioGroup);
        rdo_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                //Comprobamos qué elemento se ha pulsado, según cual de ellos hayamos seleccionado
                //asociamos el valor correspondiente a la duración del SnackBar.
                switch (checkedId){
                    case R.id.rdo_short:

                            tmp_checked = Snackbar.LENGTH_SHORT;

                        break;

                    case R.id.rdo_long:

                            tmp_checked = Snackbar.LENGTH_LONG;

                        break;
                }
            }
        });
    }

    private View.OnClickListener Evento_Clic = new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            //Comprobamos qué botón se ha pulsado y creamos el SnackBar con las
            //opciones correspondientes.
            switch (v.getId()){
                case (R.id.btn_snack_sin_accion):

                    Snackbar.make(v, "SnackBar sin acción", tmp_checked)
                            .show();

                    break;
                case (R.id.btn_snack_con_accion):
                    Snackbar.make(v, "Snackbar con acción", tmp_checked)
                            .setAction("Cerrar app", Evento_Accion).show();
                    break;

                case (R.id.btn_snack_con_accion_color):
                    Snackbar.make(v, "Snackbar con acción y color", tmp_checked)
                            .setAction("Cerrar app", Evento_Accion)
                            .setActionTextColor(getResources().getColor(android.R.color.holo_green_light))
                            .show();
                    break;
            }

        }
    };

    private View.OnClickListener Evento_Accion = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //Cerramos la app
            finish();
        }
    };

 

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í

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!

También te podría gustar...