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.
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();
}
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();
}
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();
}
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.
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.
danielme.com 