Tutorial de ejemplo de barra de bocadillos de Android

En este tutorial discutiremos e implementaremos varias formas del widget Snackbar de Android en nuestra aplicación.

Barra de aperitivos de Android

Snackbar en Android es un nuevo widget introducido con la biblioteca Material Design como reemplazo de Toast. Snackbar en Android es un widget liviano y se usa para mostrar mensajes en la parte inferior de la aplicación con el deslizamiento habilitado. El widget Snackbar para Android puede contener un botón de acción opcional.

Diferencia entre Toast y Snackbar

1. Los mensajes Toast se pueden personalizar e imprimir en cualquier parte de la pantalla, pero una Snackbar solo se puede mostrar en la parte inferior de la pantalla.
2. Un mensaje de Toast no tiene un botón de acción, pero Snackbar puede tener un botón de acción opcional. Sin embargo, Snackbar no debería tener más de un botón de acción.
3. El mensaje de notificación no se puede desactivar hasta que finalice el límite de tiempo, pero la Snackbar se puede desactivar antes de que finalice el límite de tiempo.

Nota : el mensaje Toast y la Snackbar tienen en común la propiedad de duración de visualización. A continuación se muestra un fragmento de código para mostrar una Snackbar básica de Android.

Snackbar snackbar = Snackbar        .make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);snackbar.show();

En el fragmento anterior, make()el método acepta tres parámetros:

1. CoordinatorLayout : Es el diseño raíz de la actividad.
2. www.journaldev.com : Este es el mensaje que aparecerá en la barra de snacks y podemos personalizarlo con nuestro propio mensaje.
3. Snackbar.LENGH_LONG : Este es el último parámetro que es el límite de tiempo durante el cual se mostrará el snackbar.

show()Se utiliza este método para mostrar la Snackbar en la pantalla.

Ejemplo de estructura de proyecto de Snackbar para Android

Código de ejemplo de Snackbar para Android

No hay cambios en el activity_main.xmlcódigo que contiene el CoordinatorLayout. content_main.xmlConsta de tres botones, uno para cada tipo de Snackbar que analizaremos.

?xml version="1.0" encoding="utf-8"?RelativeLayout xmlns_android="https://schemas.android.com/apk/res/android"    xmlns_app="https://schemas.android.com/apk/res-auto"    xmlns_tools="https://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"    app_layout_behavior="@string/appbar_scrolling_view_behavior"    tools_context="com.journaldev.snackbar.MainActivity"    tools_showIn="@layout/activity_main"    Button        android_layout_width="wrap_content"        android_layout_height="wrap_content"        android_text="DEFAULT SNACKBAR"        android_id="@+id/button"        android_layout_alignParentTop="true"        android_layout_centerHorizontal="true" /    Button        android_layout_width="wrap_content"        android_layout_height="wrap_content"        android_text="ACTION CALL SNACKBAR"        android_id="@+id/button2"        android_layout_below="@+id/button"        android_layout_centerHorizontal="true" /    Button        android_layout_width="wrap_content"        android_layout_height="wrap_content"        android_text="CUSTOM VIEW SNACKBAR"        android_id="@+id/button3"        android_layout_below="@+id/button2"        android_layout_centerHorizontal="true" //RelativeLayout

El fragmento de código para el botón Action Call Snackbar se muestra a continuación:

two.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)                        .setAction("UNDO", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);                                snackbar1.show();                            }                        });                snackbar.show();            }        });

En el código anterior, se invoca un nuevo método onClickListener al hacer clic en el botón de acción y se muestra en él la Snackbar correspondiente. El fragmento de código para la Snackbar personalizada que se invoca en el segundo botón se muestra a continuación:

three.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)                        .setAction("RETRY", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                            }                        });                snackbar.setActionTextColor(Color.RED);                View sbView = snackbar.getView();                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);                textView.setTextColor(Color.YELLOW);                snackbar.show();            }        });

A continuación se MainActivity.javamuestra.

package com.journaldev.snackbar;import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.CoordinatorLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.view.Menu;import android.view.MenuItem;import android.widget.Button;import android.widget.TextView;public class MainActivity extends AppCompatActivity {    CoordinatorLayout coordinatorLayout;    private Button one, two, three;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view, "FloatingActionButton is clicked", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);        View layout= findViewById(R.id.layout);        one=(Button)layout.findViewById(R.id.button);        two=(Button)layout.findViewById(R.id.button2);        three=(Button)layout.findViewById(R.id.button3);        one.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);                snackbar.show();            }        });        two.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)                        .setAction("UNDO", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);                                snackbar1.show();                            }                        });                snackbar.show();            }        });        three.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)                        .setAction("RETRY", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                            }                        });                snackbar.setActionTextColor(Color.RED);                View sbView = snackbar.getView();                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);                textView.setTextColor(Color.YELLOW);                snackbar.show();            }        });    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.menu_main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

El activity_main.xmlproyecto no ha cambiado. A continuación se muestra el resultado de la aplicación Snackbar para Android en acción. Con esto finaliza este tutorial. Puede descargar el proyecto Snackbar para Android final desde el siguiente enlace.

Descargar el proyecto de ejemplo SnackBar de Android

Referencia: Documentación para desarrolladores de Android