SnackBar

A Snackbar is a widget that looks like a small banner that pops up at the bottom of the user’s phone screen. It might be very useful for indicating to a user any type of form errors, confirming to users that an action was taken, or alerting them to take some action. In addition, a Snackbar can also offer a button for a custom action such as “dismiss,” “retry,” “undo,” or “override” etc. 

Android Snackbar is just like a Toast in Android except that it can provide the user with the action button to interact with. You may call the Snackbar a toast widget with an optional action button. I call the action button optional because you may choose to include it or you may just ignore it for it to look similar to a toast (which has no action button).

Generally, the Snackbar is used when instantaneous feedback is required from the user after an action is performed.

There are already many libraries on the internet for making Snackbar in Android; but in this tutorial, we will be using the official Android Material Design Support Library.

Creating a Snackbar Without An ActionButton in Android Studio:

This kind of Snackbar is very similar to a toast except that it has all the qualities of a Snackbar save for the action button.

Snackbar.make(coordinatorLayout, "Button is clicked", Snackbar.LENGTH_LONG);

snackbar.show();

In the code above:

make() – make() method accepts three (3) arguments: the first is the root layout of the activity where the Snackbar will be displayed, the second argument is the message to display in the Snackbar, and the third is the duration for the Snackbar to display.

show() – show() method display the Snackbar

Important Note: If you forget to call the show() method for the Snackbar, it will never be displayed.

Creating A Snackbar With An Action Button In Android Studio:

The below code will display a Snackbar with the message “Message is deleted” together with an action button “UNDO”; when the UNDO button is clicked, the message “Message is restored” will be displayed in another Snackbar.

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();

Creating A Custom Snackbar With An Action Button:

The below code will create a Snackbar with a yellow text color and a red action button color.

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();

Styling The Color, Background, Size And More In Snackbar:

You may use the below to style the Snackbar or even its action button.

// styling for action text

snackbar.setActionTextColor(Color.WHITE);

// styling for rest of text

View snackbarView = snackbar.getView();

TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);

textView.setTextColor(Color.RED);

textView.setAllCaps(true);

textView.setTextSize(20);

// styling for background of snackbar

View sbView = snackbarView;

sbView.setBackgroundColor(Color.BLUE);