snackbar

Android Material Design Snackbar Tutorial

One of the basic UX component in Android is an Toast. It is generally used to show little message to the user. But last year when material design was released, a new UX component Snackbar was introduced. Android Snackbar is just like a Toast message except that it has an option for user feedback. You can call it as a toast message with an action button.

What is Snackbar ?

A Snackbar is a lightweight material design method for providing feedback to a user, while optionally providing an action to the user. They are displayed on the screen until a specified interval has passed, the user swipes to dismiss them, or when the user interacts with another part of the screen. Snackbar is the best replacement for toast messages & you can set actions in the form of pop up.

Let’s Get it Working

In this tutorial we are going to learn how to use Snackbar. To really understand the usage of Snackbar we will create an app . The App contains simple buttons which will demonstrate the different usages of Snackbar.

DownloadCode
 
github

Step 1 ) Update build.gradle file .

Before you can use Snackbar in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file and rebuilt the project .

Step 2) Update strings.xml .

Add the below string values to the string.xml located in res => values => strings.xml .

Step 3) Update activity_main.xml .

Open the layout file for the MainActivity.java i.e activity_main.xml and add the below code in your layout file . The code will create 4 buttons .

Step 4) Main Activity Class.

Now Open MainActivity.java and make some changes in code . Here I created objects for the coordinator layout and buttons . Also Created OnClickListener for the buttons .

Snackbar Screen with Buttons

Snackbar Screen with Buttons






Step 5) Update Actions in Button onClick().

-> Simple Snackbar

Below is the code to display simple snackbar. The make function accepts three parameters. View, display message and duration of the message to be displayed.

Normally passing CoordinatorLayout as view param is the best option. And the duration can be LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE. When LENGTH_INDEFINITE is used, the Snackbar will be displayed indefinite time and can be dismissed with swipe off.
Add the below code inside the buttonSimpleSnackbar onClick().

Simple Snackbar

Simple Snackbar

-> Custom Text Color Snackbar

Snackbar comes with default white color text and blackish background color. You can change these colors according to your requirements. I changed the text color to red and action text color to white.
Add the below code inside the buttonCustomSnackbar onClick().

Custom Text Color Snackbar

Custom Text Color Snackbar

-> Multi Color Text Snackbar

Some times you need the multi color text in Snackbar. Here I use SpannableStringBuilder to create multi color text .
Add the below code inside the buttonMultiColorSnackbar onClick().

Multi Color Text Snackbar

Multi Color Text Snackbar

-> Snackbar with Action Callback

You can also mention a callback method using setAction() method. This allows you to take some action when user interacts with the snackbar.
Add the below code inside the buttonActionCallbackSnackbar onClick().

Snackbar with Action Callback

Snackbar with Action Callback

Snackbar for Action Callback

Snackbar for Action Callback

Complete Main Activity Class.

DownloadCode
 
github

Enjoy Coding and Share Knowledge

Show Buttons
Hide Buttons