DEV Community

Cover image for Tutorial: Cómo crear un custom snackbar
Raúl Rodríguez Concepción
Raúl Rodríguez Concepción

Posted on

Tutorial: Cómo crear un custom snackbar

¿Qué es una snackbar?

Según la propia documentación de google

Las snackbars proporcionan mensajes breves sobre los procesos de la aplicación en la parte inferior de la pantalla.

Ejemplo de snackbar

Uso

Gracias a este tipo de vistas podemos informar al usuario facilmente de algún tipo de acción que se acaba de realizar, por ejemplo, un elemento se ha eliminado de nuestro listado.

Los Snackbars informan de un proceso que una aplicación ha realizado o realizará. Aparecen temporalmente, hacia la parte inferior de la pantalla. No deben interrumpir la experiencia del usuario, y no requieren acción del usuario para desaparecer.

Para implementar este tipo de vistas android nos proporciona la clase Sanckbar la cual con unos pocos parametros somos capaces de mostrar este tipo de mensajes.

Snackbar.make(clContainer, "Hola mundo", Snackbar.LENGTH_LONG).show()
Enter fullscreen mode Exit fullscreen mode

Customizando un snackbar

En ocasiones el diseño proporcionado por Google se queda corto a nuestras necesidades, yo mismo tuve la necesidad no hace mucho asi que tocó investigar un poco como realizar la tarea. Desde la propia documentación de material component nos proponen la solución, implementar la clase BaseTransientBottomBar.

Pasos

Nos creamos nuestra clase CustomSnackbar que extienda de BaseTransientBottomBar. En el init de la clase vamos a cambiar las propiedades padding y backgroundColor ya que por defecto nos mete unos márgenes a la vista y el propio color del tema heredado.

Nuestra nueva clase necesitará de tres parámetros, el contenedor padre donde se mostrará la vista, nuestro custom layout y un callback que podremos utilizar para agregar alguna animación o detectar cuando aparace y desaparece el CustomSnackbar.

Y aquí nuestro custom layout

Por último para seguir la línea que google proporciona a la hora de crear los snackbar vamos a replicar los métodos de creación, para ello nos crearemos una serie de métodos estáticos que funcionen como fábrica.

Ensamblamos todo en una app de prueba y el resultado es el siguiente:

CustomSnackbar tipo 1 CustomSnackbar tipo 2

Puedes descargarte el código completo en github

GitHub logo rulogarcillan / android-customsnackbar

An example to create a custom snackbar for android

android-customsnackbar




Top comments (0)