Android Snackbar Tutorial: How to use and how to customize

Android snackbar is an interesting component introduced by Material Design.  Android snackbar replaces somehow an existing component called Android Toast. The features provided by this component are similar to Toast even if it introduces some user interaction. If you don’t know this component the video below shows how to use Android Snackbar:

What is Android Snackbar and how to use it

Android snackbar, as said previously, is a popup message that we can use to send some information to the user. Sometimes, we can add an action to the snackbar as we will see later.

Before using Android snackbar, I recommend reading this tutorial about how to develop Android weather app with Material design. The first step is getting familiar with this component. The simplest way to use this component is:

[java]Snackbar.make(v, "Welcome to SwA", Snackbar.LENGTH_LONG).show();[/java]

This simple line of code shows a message at the bottom of the screen. You can set how long the message will be shown using this three different values:

  • Snackbar.LENGTH_LONG
  • Snackbar.LENGTH_SHORT
  • Snackbar.LENGTH_INDEFINITE

If you are not comfortable with these values you can set your own time, inserting a custom value. The result is shown below:

Android snackbar tutorial

Android Snackbar and Action Callback

In the previous example, we have seen that we can simply show a custom message. This Android component can do more handling user interaction. We can add a custom action with the message like the figure shown below:

android snackbar callback action

In this case, the code is very simple:

[code lang=”java”]Snackbar bar = Snackbar.make(v, "Weclome to SwA", Snackbar.LENGTH_LONG)
.setAction("Dismiss", new View.OnClickListener() {
@Override
public void onClick(View v) {
// Handle user action
}
});

bar.show();[/code]

As you can see, we used setAction to set the callback action.

How to Customize Android Snackbar

If we want to customize this component, we can select the text color and action color:

android snackbar custom color

In this case to set the action color we use:

[code lang=”java”]bar.setActionTextColor(Color.RED);[/code]

while to set the message text color:

[code lang=”java”]TextView tv = (TextView) bar.getView().findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(Color.CYAN);
bar.show();[/code]

How to use Floating Action Button and Android Snackbar together

As you have noticed from the previous picture the Snackbar message is shown at the bottom of the screen. This may cause some problems when we use Floating Action Button because some parts can overlap.

android snackbar with fab

As you can notice the Snackbar overlap the Floating Action Button. In this case, we can use the CoordinatorLayout so that the FAB moves up a little bit to give space to Snackbar.

At the end of this post, you know how to inform users about Android app events.

    1. Anne May 24, 2016
      • Francesco Azzola May 24, 2016
        • Anne May 24, 2016
          • Garuav August 10, 2016
            • Francesco Azzola August 10, 2016
    2. Mehraj Malik July 13, 2016
    3. vinodh July 29, 2016
      • Francesco Azzola July 29, 2016
        • vinodh August 1, 2016
    4. Michael August 19, 2016

    Add Your Comment