Most visited

Recently visited

Building and Displaying a Pop-Up Message

This lesson teaches you to

  1. Use a CoordinatorLayout
  2. Display a Message

You should also read

You can use a Snackbar to display a brief message to the user. The message automatically goes away after a short period. A Snackbar is ideal for brief messages that the user doesn't necessarily need to act on. For example, an email app could use a Snackbar to tell the user that the app successfully sent an email.

Use a CoordinatorLayout

A Snackbar is attached to a view. The Snackbar provides basic functionality if it is attached to any object derived from the View class, such as any of the common layout objects. However, if the Snackbar is attached to a CoordinatorLayout, the Snackbar gains additional features:

  • The user can dismiss the Snackbar by swiping it away.
  • The layout moves some other UI elements when the Snackbar appears. For example, if the layout has a FloatingActionButton, the layout moves the button up when it shows a Snackbar, instead of drawing the Snackbar on top of the button. You can see how this looks in Figure 1.

The CoordinatorLayout class provides a superset of the functionality of FrameLayout. If your app already uses a FrameLayout, you can just replace that layout with a CoordinatorLayout to enable the full Snackbar functionality. If your app uses other layout objects, the simplest thing to do is wrap your existing layout elements in a CoordinatorLayout, as in this example:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/myCoordinatorLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Here are the existing layout elements, now wrapped in
         a CoordinatorLayout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- …Toolbar, other layouts, other elements… -->

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Make sure to set an android:id tag for your CoordinatorLayout. You need the layout's ID when you display the message.

Figure 1. The CoordinatorLayout moves the FloatingActionButton up when the Snackbar appears.

Display a Message

There are two steps to displaying a message. First, you create a Snackbar object with the message text. Then, you call that object's show() method to display the message to the user.

Creating a Snackbar object

Create a Snackbar object by calling the static Snackbar.make() method. When you create the Snackbar, you specify both the message it displays, and the length of time to show the message:

Snackbar mySnackbar = Snackbar.make(viewId, stringId, duration);
viewId
The view to attach the Snackbar to. The method actually searches up the view hierarchy from the passed viewId until it reaches either a CoordinatorLayout, or the window decor's content view. Ordinarily, it's simplest to just pass the ID of the CoordinatorLayout enclosing your content.
stringId
The resource ID of the message you want to display. This can be formatted or unformatted text.
duration
The length of time to show the message. This can be either LENGTH_SHORT or LENGTH_LONG.

Showing the message to the user

Once you have created the Snackbar, call its show() method to display the Snackbar to the user:

mySnackbar.show();

The system does not show multiple Snackbar objects at the same time, so if the view is currently displaying another Snackbar, the system queues your Snackbar and displays it after the current Snackbar expires or is dismissed.

If you just want to show a message to the user and won't need to call any of the Snackbar object's utility methods, you don't need to keep the reference to the Snackbar after you call show(). For this reason, it's common to use method chaining to create and show a Snackbar in one statement:

Snackbar.make(findViewById(R.id.myCoordinatorLayout), R.string.email_sent,
                        Snackbar.LENGTH_SHORT)
        .show();

Hooray!