Categories UI & UX

Complete guide to master Android Snackbar

18 Mar. 2019
1
0
10 minutes

Material Design is a set of guides for visual, interaction and motion design that enhance your engineering workflow. Google provides developers with many Material Design Components to build intuitive and beautiful applications. Material Design Snackbars are part of these components. These components provide brief feedback about app processes through a message at the bottom of the screen. Material Design Snackbars inform users that the app has performed or will perform a process. Furthermore, Snackbars offer the ability to perform an action.

A Snackbar disappears automatically, either after a timeout you defined or after a user interaction elsewhere on the screen. A Snackbar can also be swiped off the screen.

This post focuses on the display of :

  • Simple Snackbar
  • Snackbar with action
  • Custom Snackbar

Video

Setup

First and foremost, you need to add Material Components library to the dependencies section in your gradle file:

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha04'
    // ...
  }

This library comes along the newly package Androidx. Therefore, if your app relies on the original Design Support library, you can migrate your project to Androidx using the option provided by Android Studio.

If you want to keep the original Design Support library, you can also use Material Components through this library :

dependencies {
    // ...
    implementation 'com.android.support:design:28.0.0'
    // ...
  }
You should not use the com.android.support and com.google.android.material dependencies in your app at the same time.

Check you are using AppCompatActivity to ensure that all the Material Components work correctly.

Finally, change your app theme to inherit from a Material Components Theme among the following list :

  • Theme.MaterialComponent
  • Theme.MaterialComponents.NoActionBar
  • Theme.MaterialComponents.Light
  • Theme.MaterialComponents.Light.NoActionBar
  • Theme.MaterialComponents.Light.DarkActionBar

The Theme.MaterialComponents.Light is the theme used in the project.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Implementation

Snackbars contain a message that is directly related to the operation being performed. These components appear temporarily at the bottom of the screen and they don’t require user action to disappear. As for the display frequency, only one Snackbar should be displayed at a time. Showing a new Snackbar will dismiss any previous Snackbars first.

It is important to know that Snackbars work best if they are displayed inside of a CoordinatorLayout. Indeed, CoordinatorLayout allows Snackbars to be dismissed on swipe gesture. Moreover, it allows to move automatically widgets like FloatingActionButton when a Snackbar is displayed.

The Snackbar class provides a static make method to build a Snackbar. This method takes three parameters :

  • A View which will be used to find a suitable ViewGroup ancestor in order to display the Snackbar in. A suitable ancestor will be the nearest CoordinatorLayout to the View, or the root if none could be found.
  • A message to display inside the Snackbar. It can either be a CharSequence or a String resource ID.
  • A duration to display the Snackbar for. It can either be a time in milliseconds or a constant among:

Once the Snackbar is created, it can be displayed at any item using the
show method on the Snackbar instance.

Simple Snackbar

A simple Snackbar is a Snackbar that has the default style and no action.

Showing a simple Snackbar would look like this:

Snackbar.make(view, R.string.snackbar_message, Snackbar.LENGTH_SHORT).show();
Snackbar.make(view, R.string.snackbar_message, Snackbar.LENGTH_SHORT).show();


Snackbar with action

Snackbars can display a single text button that lets users take action following a process performed by the app. For example, it could be an action such as undoing an action that the app just performed, or retrying an action that failed.

The Snackbar class provides a setAction method to define an action to perform when a user click on the text button. This method requires two parameters

  • A text that defines the action. It can either be a CharSequence or a String resource ID.
  • An OnClickListener to handle clicks on the action.

A click on the Snackbar’s action dismisses automatically the Snackbar.

Showing a Snackbar with an action would look like this:

Snackbar.make(view, R.string.simple_snackbar_message, Snackbar.LENGTH_SHORT)
    .setAction(R.string.undo) {
        // Action
    }.show()
Snackbar.make(view, R.string.snackbar_message, Snackbar.LENGTH_SHORT)
        .setAction(R.string.undo, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Action
            }
        }).show();


Custom Snackbar

Material Design Snackbars comprise a wide range of attributes. As a result, these components are fully customizable. For example, it is possible to change the text color, the background color as well as the color of the action text.

By default, Snackbars are anchored to the bottom edge of their parent view. However, it is possible to change the anchor view using the setAnchorView method. For instance, you could change the anchor view in order to display Snackbars above navigational elements at the bottom of the screen, such as a BottomAppBar or BottomNavigationView.

For instance, showing a custom Snackbar would look like this:

val snackbar = Snackbar.make(view, R.string.custom_snackbar_message, Snackbar.LENGTH_SHORT)
    .setAction(R.string.undo) {}

// Set background color
val snackbarView = snackbar.view
snackbarView.setBackgroundColor(ContextCompat.getColor(this, R.color.snackbarBackgroundColor))

// Set text color
val snackbarTextView =
    snackbarView.findViewById<AppCompatTextView>(com.google.android.material.R.id.snackbar_text)
snackbarTextView.setTextColor(ContextCompat.getColor(this, R.color.snackbarTextColor))

// Set Action text color
snackbar.setActionTextColor(ContextCompat.getColor(this, R.color.snackbarActionTextColor))

snackbar.show()
Snackbar snackbar = Snackbar.make(view, R.string.custom_snackbar_message, Snackbar.LENGTH_SHORT);
snackbar.setAction(R.string.undo, new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Action
    }
});

// Set background color
View snackBarView = snackbar.getView();
snackBarView.setBackgroundColor(ContextCompat.getColor(this, R.color.snackbarBackgroundColor));

// Set text color
AppCompatTextView snackBarTextView = snackBarView.findViewById(com.google.android.material.R.id.snackbar_text);
snackBarTextView.setTextColor(ContextCompat.getColor(this, R.color.snackbarTextColor));

// Set Action text color
snackbar.setActionTextColor(ContextCompat.getColor(this, R.color.snackbarActionTextColor));

snackbar.show();

Download

  • Kotlin
  • Java

Conclusion

In conclusion, Material Design Snackbars are useful components for showin a brief message about an operation that an app has performed or will perform. Unlike Toast, Snackbars have an optional action. Material Design Snackbars have the advantage of being simple to implement. Furthermore, Snackbars are discrete and they don’t require user action to disappear. Therefore, they are less annoying than pop-up modals.

Leave a Reply

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