En este tutorial explicamos la Snack bar en Android Studio. Este es un mensaje que se muestra al usuario cuando ha realizado una acción, es similar al Toast, con la diferencia en que Snack Bar puede tener opciones con las que el usuario interacciona, generalmente se usa la opción de Deshacer.
Resumen rápido Android Snack Bar.
Dejamos un resumen rápido de Android con lo básico para que la Snack bar funcione correctamente. Para más detalles sigue leyendo este tutorial.
Nota: Si quieres más resúmenes rápidos de Android Studio busca en Google: Resumen rápido Android “Comando o tema a buscar”
¿Qué es la Snack bar de Android Studio?
La Snack bar, es un mensaje que le enviamos al usuario cuando realiza alguna acción. Se muestra en la parte inferior de la pantalla. Es muy similar al mensaje Toast. Pero en la Snack bar podemos agregar botones para que el usuario pueda reaccionar al mensaje que le mostramos.
Por ejemplo, podemos mostrar el mensaje “Elemento eliminado” y a un lado colocar un botón que diga “Deshacer”.
¿Cómo agregar Snackbar en Android?
Para agregarla solo tenemos que implementar el siguiente código.
El comando make, se encarga del mensaje del snackbar y de la duración.
El comando setAction, se agrega la acción, es decir el botón y la acción al presionarlo.
Snackbar mensaje = Snackbar.make(view, “Elemento eliminado”, Snackbar.LENGTH_SHORT);
mensaje.setAction(“Deshacer”, new DeshacerListener());
mensaje.show();
Private class DeshacerListener implements View.OnClickListener {
@Override
public void onClick(View view){
// Acción cuando se presione Deshacer
}
}
Implementando Snackbar en Android Studio.
A continuación explicamos cómo agregar el Snackbar en Android Studio. Tenemos la siguiente interfaz de usuario, con un botón y un TextView que dice “Prueba”.
Explicación del Snackbar.
Al presionar al botón haremos lo siguiente:
- El TextView mostrará el texto “Botón presionado”.
- Mostraremos la Snackbar con el mensaje “Se presionó el botón” y con una opción que diga “Deshacer”
Cuando el usuario presione el botón “Deshacer” de la Snackbar:
- Cambiaremos el contenido del TextView por “Acción eliminada”.
El código antes de incluir el Snackbar es el siguiente:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btnSnack;
private TextView txtPrueba;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnSnack = findViewById(R.id.btn_snack);
txtPrueba = findViewById(R.id.txt_prueba);
btnSnack.setOnClickListener(this);
}
@Override
public void onClick(View view) {
// Contenido al hacer click en el botón, aquí colocaremos la Snackbar
}
}
Solamente relacionamos el Botón y el Texto de la UI con variables en Java.
Al botón le agregamos el setOnClickListener(this). Así al dar click nos enviará al método onClick, dentro de este método es donde escribiremos el código del Snackbar.
Mostrando el mensaje de Snack bar.
Para poder mostrar el mensaje de la Snackbar solo necesitamos el siguiente código.
Nota: Si Snackbar no aparece como comando, ve al final de este tutorial, ahí te explicamos como agregar la dependencia necesaria.
Snackbar mensaje = Snackbar.make(view, “Se presionó el botón”, Snackbar.LENGTH_SHORT); mensaje.setAction(“Deshacer”, new DeshacerListener()); mensaje.show();
1.- En la primera línea creamos una variable tipo Snackbar llamada “mensaje”.
Comando make:
- Primer parámetro colocamos la vista.
- En el segundo el mensaje.
- Y en el tercero la duración que tendrá.
Para la duración tenemos las siguientes opciones:
- LENGTH_SHORT duración corta.
- LENGTH_LONG duración larga.
- LENGTH_INDEFINITE duración indefinida, durará hasta que aparezca otro Snackbar o hasta que se presione la acción.
2.- Luego usamos el comando setAction():
- En el primer parámetro escribimos el texto de la Snackbar.
- Para el segundo parámetro llamamos a la clase DeshacerListener(), esta clase la crearemos más adelante, podemos crearla automáticamente con la ayuda de Android o manualmente.
3.- Por último mostramos el mensaje con el comando show().
Clase para la acción Deshacer del Snackbar.
Vamos a crear la clase donde se efectúa la acción cuando el usuario presiona el botón de deshacer de la Snackbar.
La clase se creará dentro de la MainActivity, por lo que no es necesario crear otro archivo.
En esta clase necesitamos implementar OnClickListener.
Recordemos que cuando el usuario presiona el botón Deshacer, mostraremos en el TextView la palabra “Acción eliminada”.
Private class DeshacerListener implements View.OnClickListener {
@Override
public void onClick(View view){
txtPrueba.setText(“Acción eliminada”);
}
}
Con esto ya debería funcionar correctamente la Snackbar.
El código completo es el siguiente:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btnSnack;
private TextView txtPrueba;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnSnack = findViewById(R.id.btn_snack);
txtPrueba = findViewById(R.id.txt_prueba);
btnSnack.setOnClickListener(this);
}
@Override
public void onClick(View view) {
txtPrueba.setText("Botón presionado");
Snackbar mensaje = Snackbar.make(view,"Desea deshacer la ultima acción",Snackbar.LENGTH_SHORT);
mensaje.setAction("Deshacer", new MyUndoListener());
mensaje.show();
}
private class MyUndoListener implements View.OnClickListener {
@Override
public void onClick(View view) {
txtPrueba.setText("Acción deshecha");
}
}
}En caso de que no te aparezca el comando Snackbar, debes instalar la dependencia que lo contiene, esto te lo explicamos a continuación.
Para más tutoriales de Android Studio ve a este enlace.
Algunos temas que te pueden interesar.
3 formas de agregar evento onClick en Android Studio usando Java.
EditText, mostrar símbolo y mensaje de error usando setError().