Diseño Android: Notificaciones con Snackbar

android

La Snackbar es un nuevo componente de notificación que forma parte de Material Design. Estas notificaciones se muestran en la parte inferior de la pantalla y desaparecen automáticamente tras un cierto periodo de tiempo al igual que los Toast (aunque como veremos también se pueden mostrar de forma indefinida) y opcionalmente ofrecen al usuario la posibilidad de realizar alguna acción. Sólo habrá una Snackbar visible en pantalla y nunca mostrarán imágenes.

google keep snackbar

La Android Design Support Library contiene una implementación “oficial” de Snackbar al igual que de otros elementos de Material Design como el Floating Action Button. Para utilizarla en Android Studio\Gradle primero añadimos esta dependencia a nuestros proyectos.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:design:22.2.1'
}

Para más información sobre la importación de librerías en Eclipse ADT y Android Studio, consultar este artículo.

La Snackbar se configura y muestra de la misma que un Toast, esto es, con un patrón Builder y los mismos métodos.

public void simpleSnackbar(View view){
        Snackbar.make(view, getString(R.string.hello), Snackbar.LENGTH_SHORT)
                .show();
    }

snackbar1

A diferencia de un Toast, una Snackbar se puede mostrar indefinidamente utilizando como duración Snackbar.LENGTH_INDEFINITE

Añadir la acción es también muy sencillo (su texto siempre se muestra en mayúsculas).

 public void actionSnackbar(View view){
        Snackbar.make(view, getString(R.string.hello), Snackbar.LENGTH_LONG)
                .setAction(getString(R.string.toast), new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, getText(R.string.action), Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }

snackbar 2

Estilos

El texto de la Snackbar se muestra en blanco, el fondo en #323232 y el texto de la acción con el valor del colorAccent que es el mismo color que se aplica al Floating Action Button

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="colorAccent">@color/accentColor</item>
    </style>

</resources>

De forma directa Snackbar sólo permite cambiar el color de la acción (método setActionTextColor), pero es posible cambiar también el color de fondo y el del mensaje del texto accediendo a los componentes internos.

 public void styleSnackbar(View view) {
        Snackbar snackbar = Snackbar.make(view, getString(R.string.hello), Snackbar.LENGTH_LONG)
                .setAction(getString(R.string.toast), new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, getText(R.string.action), Toast.LENGTH_SHORT).show();
                    }
                });

        //ACTION
        snackbar.setActionTextColor(getResources().getColor(R.color.snackbar_action));
        View snackBarView = snackbar.getView();
        //BACKGROUND
        snackBarView.setBackgroundColor(getResources().getColor(R.color.snackbar_background));
        //MESSAGE
        TextView tv = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text);
        tv.setTextColor(getResources().getColor(R.color.snackbar_message));

        snackbar.show();
    }

custom snackbar

Deslizar para eliminar

Material Design contempla que una Snackbar pueda ser descartada simplemente desplazándola hacia la derecha de la pantalla. Esta funcionalidad ya está implementada en la Snackbar proporcioanda por la Desgin Support Library pero para que esté activa se debe utilizar un CoordinatorLayout. Este novedoso Layout, incluido también en la Design Support Library, se comporta de igual forma que un FrameLayout pero permite relacionar el comportamiento de sus widgets hijos sincronizando por ejemplo animaciones entre ellos.

NOTA:Esta funcionalidad no está disponible en Android 2.

En el proyecto de ejemplo basta con utilizar un Coordinator Layout del siguiente modo para poder descartar la Snackbar al deslizarla hacia la derecha.

<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"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

        <Button
            android:id="@+id/buttonSimple"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:onClick="simpleSnackbar"
            android:text="@string/simple" />

        <Button
            android:id="@+id/buttonAction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/buttonSimple"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:onClick="actionSnackbar"
            android:text="@string/action" />

        <Button
            android:id="@+id/buttonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/buttonAction"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:onClick="styleSnackbar"
            android:text="@string/style" />

    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

Integración con Floating Action Button

La Snackbar nunca debe ocultar el Floating Action Button. Si utilizamos la implementación de la Design Support Library del FAB y el botón se muestra dentro de un CoordinatorLayout el ajuste de ambos elementos se realizará de forma automática.

snackbar + floatingactionbutton

El siguiente video muestra el resultado final del proyecto de ejemplo.


Código de ejemplo

El proyecto de ejemplo para Android Studio se encuentra disponible en GitHub. Para más información sobre cómo utilizar GitHub, consultar este artículo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: