Android Snackbar Example


Android Snackbar Example

When Android 5.0 was released, new design guidelines were also released with it, called material design. Material design in a way revamped the experience of an android user. 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. In this Android Snackbar Example I would show how to make an Android Snackbar using the new Design Support Library.

To make an Android Snackbar many libraries are available on the internet. But for this Android Snackbar Example we will be using the official Android design support library which was released in the beginning of June 15. Although a notable amount of effort has been invested in by some of the independent developers to make a library for snackbar, kudos to them.

 

Android Snackbar Example using Design Support Library

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(will explain this part later in the tutorial). To start off lets include the Android design support library in our project gradle file:

 

Displaying an Android Snackbar on your screen is very simple, all you need to do is use this piece of code below:

But if you want to customize it completely, then a different approach would have to be taken. First lets create a layout with CoordinatorLayout:

 

Android CoordinatorLayout

I have included a floating action button as well in the layout above to show that when a snack bar appears from the bottom of the screen, floating action button automatically moves up in case of mobile devices. This behavior not only makes the app look good but also improves the user experience. The main function of a CoordinatorLayout is to act as a container and perform specific interactions between child views. Like shifting up of floating action button when an Android snackbar appears.

Next lets customize the snackbar for our Android Snackbar Example :

This as a whole would result an Android snackbar like in the image below:

Android Snackbar Example

 

As you can see, in the piece of code above I have completely customized the Android Snackbar. Although its not looking very nice, due to bad choice of colors but it shows the functionality. One of the main points to be noted here is that, while making a Snackbar I have used the CoordinatorLayout as the parent layout for Snackbar. Due to this CoordinatorLayout our Snackbar has the ability to be dismissed when swiped. Also you may observe a View.OnClickListener is also attached to my Snackbar so that the click events of Android Snackbar action button could be intercepted. With this I would like to conclude the Android Snackbar Tutorial, hope this helped. Connect with us on Facebook, Google+ and Twitter for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.

Leave a comment

Your email address will not be published. Required fields are marked *