Android Material Design SnackBar Using Design Support Library

Android Material Design SnackBar Using Design Support Library

When Android 5.0 was released, new design guidelines were also released with it, called material design. It introduced many new design patterns and guidelines. But here we’ll discuss only one new UX concept introduced in material design called Snackbar. This new concept is inspired from the Toast widget of android. 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. Usually this type of widget is used in a situation where user needs an option to reverse his actions like undo -ing an action.

Snackbar is a UI element used for user feedback. Generally used when instantaneous feedback is required from the user, after an action is performed. Snackbar appears in on the screen from bottom and can be dispersed by swiping, if a CoordinatorLayout is used as its parent.

Example

In this tutorial, we are going to learn how to implement Material Design SnackBar by using Design Support Library. In this article we will learn different types of SnackBars.

VIDEO DEMO

1. Include Design Support Library

2. Simple SnackBar

Below is the syntax of a 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 as it allows Snackbar to enable some features like swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

And the duration should 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.

3. Android Coordinator Layout

Normally passing CoordinatorLayout as view param is the best option as it allows Snackbar to enable some features like swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

4. SnackBar with Action

You can also mention a callback interaction method using setAction() method. This allows us to take certain action when user interacts with the snackbar.

5. SnackBar with Custom Colors i.e. Customised SnackBar

We can override color of snackbar action and snackbar message.

6. SnackBar with Multi Colored Message

We can make our Snackbar message with multicolored by using SpannableStringBuilder.

7. Android Layout xml file

Create a activity_main.xml file with coordinator layout as parent.

8. Full Source Code

Here is the full source code of this article.

Finally all done, run the app and you will get the output as shown in video.

Thanks. :)

Download Source Code – >

 

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)