Añadir Snackbar en Android

Añadir Snackbar en Android

Otro nuevo componente añadido con Material design es Snackbar. Es similar a los Toast ya que muestra texto en pantalla, sin embargo nos permite interactuar con el mensaje, permitiendo añadir botones. Por tanto sus características son, que aparece en pantalla durante un corto periodo de tiempo y después desaparece, solo puede aparecer un Snackbar a la vez y solo puede contener una acción.

¿Cómo Añadir un Snakbar simple?

  1. Como en otros componentes de Material design, debemos añadir en build.gradle las ultimas dependencias de la librería appcompat y la librería android support design y sincronizar Gradle:
    dependencies {
        compile 'com.android.support:appcompat-v7:24.1.1'
        compile 'com.android.support:design:24.1.1'
    }
  2. Construiremos el Snackbar con el método Snackbar.make(), el cual contendrá 3 parámetros, el primero es el contexto, el segundo el texto que mostraremos, y el tercero la duración en pantalla del Snackbar. La duración se puede indicar con Snackbar.LENGTH_SHORT  o Snackbar.LENGTH_LONG.
  3. Para mostrarlo en pantalla, necesitaremos llamar al método show().

Mostrar un SnackBar  al pulsar sobre un botón:

  1. Creamos una aplicación y añadimos las dependencias de las librerías necesarias en Gradle.
  2. Añadimos un botón a nuestro activity_main.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 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" tools:context="com.aprendiendoingenieria.snackbar.MainActivity">
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SnackBar simple" android:id="@+id/btnSBSimple" android:layout_centerHorizontal="true" />
    </RelativeLayout>
  3. Implementamos el Botón con su evento onClickListener.
  4. Dentro del evento onClickListener añadimos el SnackBar. Por tanto el MainActivity.java quedara:
    package com.aprendiendoingenieria.snackbar;
    
    import android.support.design.widget.Snackbar;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    
    public class MainActivity extends AppCompatActivity {
    
        Button btnSimple;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            btnSimple=(Button)findViewById(R.id.btnSBSimple);
            btnSimple.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //Mostramos el SnackBar
                    Snackbar.make(view, "Texto del SnackBar", Snackbar.LENGTH_SHORT).show();
                }
            });
    
        }
    }

Cuando pulsamos el botón, se nos mostrara la notificación como en la siguiente imagen:

Screenshot SnackBbar en android simple

Personalizar el SnackBar:

Podemos personalizar el SnackBar, añadiéndole una acción, y modificando el color con el que se muestra la acción. Para agregar una acción utilizamos:

                        .setAction("ACCION", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                //Accion que se ejecutara al pulsar sobre "ACCION"
                            }
                        })

Mientras que para cambiar el color de la acción, añadiremos también:

.setActionTextColor(getResources().getColor(R.color.colorPrimary))

Por tanto el código del MainActivity.java quedara:

package com.aprendiendoingenieria.snackbar;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btnSimple;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSimple=(Button)findViewById(R.id.btnSBSimple);
        btnSimple.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Mostramos el SnackBar
                Snackbar.make(view, "Texto del SnackBar", Snackbar.LENGTH_SHORT)
                        .setActionTextColor(getResources().getColor(R.color.colorAccent))
                        .setAction("ACCION", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                //Accion que se ejecutara al pulsar sobre "ACCION"
                            }
                        })
                        .show();
            }
        });
    }
}

Nuestra aplicación con la acción, la veremos así:

Screenshot Snackbar en android con accion

Descartar el Snackbar.

Podemos eliminar la notificación cuando aparece al deslizarla hacia un lado, pero para ello necesitamos usar un contenedor especial llamado CoordinatorLayout. Por tanto vamos a modificar nuestro activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    tools:context="com.aprendiendoingenieria.snackbar.MainActivity">
    <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SnackBar simple"
            android:id="@+id/btnSBSimple"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Deja un comentario

Cerrar menú