README.md

Snackbar

Snackbars provide brief feedback about an operation through a message at the bottom of the screen. Snackbars contain up to two lines of text directly related to the operation performed. They may contain a text action, but no icons.

Design & API documentation

• Material Design guidelines: Snack Bar
• Class: MDCSnackbarManager
• Class: MDCSnackbarMessage
• Class: MDCSnackbarMessageAction
• Class: MDCSnackbarMessageView
• Protocol: MDCSnackbarSuspensionToken
• Protocol: MDCSnackbarManagerDelegate
• Enumeration: Enumerations
• Enumeration: MDCSnackbarAlignment

Related components

• OverlayWindow

Table of contents

• Overview
  • Snackbar Manager and Message
  • Suspending and Resuming Display of Messages
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Typical use: display a message
  • Typical use: display a message with an action
• Extensions
  • Color Theming
  • Typography Theming

---

Overview

Snackbar Manager and Message

Snackbar is comprised of two classes: MDCSnackbarManager and MDCSnackbarMessage. Snackbar messages contain text to be displayed to a user. Messages are passed to the manager. The manager decides when it is appropriate to show a message to the user.

Suspending and Resuming Display of Messages

Snackbar manager can be instructed to suspend and resume displaying messages as needed. When messages are suspended the manager provides a suspension token that the client must keep as long as messages are suspended. When the client releases the suspension token or calls the manager's resume method with the suspension token, then messages will resume being displayed.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/Snackbar'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialSnackbar

Objective-C

#import "MaterialSnackbar.h"

Usage

Displaying a snackbar requires using two classes: MDCSnackbarManager and MDCSnackbarMessage. First, create an instance of MDCSnackbarMessage and provide a string to display to the user. Next, pass the MDCSnackbarMessage to the MDCSnackbarManager with the static showMessage method. This will automatically construct an MDCSnackbarMessageView and appropriate overlay views so the snackbar is visible to the user.

Typical use: display a message

Swift

let message = MDCSnackbarMessage()
message.text = "The groundhog (Marmota monax) is also known as a woodchuck or whistlepig."
MDCSnackbarManager.show(message)

Objective-C

MDCSnackbarMessage *message = [[MDCSnackbarMessage alloc] init];
message.text = @"How much wood would a woodchuck chuck if a woodchuck could chuck wood?";
[MDCSnackbarManager showMessage:message];

Typical use: display a message with an action

Swift

let action = MDCSnackbarMessageAction()
let actionHandler = {() in
  let answerMessage = MDCSnackbarMessage()
  answerMessage.text = "Fascinating"
  MDCSnackbarManager.show(answerMessage)
}
action.handler = actionHandler
action.title = "OK"
message.action = action

Objective-C

MDCSnackbarMessageAction *action = [[MDCSnackbarMessageAction alloc] init];
void (^actionHandler)() = ^() {
  MDCSnackbarMessage *answerMessage = [[MDCSnackbarMessage alloc] init];
  answerMessage.text = @"A lot";
  [MDCSnackbarManager showMessage:answerMessage];
};
action.handler = actionHandler;
action.title = @"Answer";
message.action = action;

Extensions

Color Theming

You can theme an snackbar with your app's color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

pod 'MaterialComponents/Snackbar+ColorThemer'

Swift

// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialSnackbar_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
MDCSnackbarColorThemer.applySemanticColorScheme(colorScheme)

Objective-C

// Step 1: Import the ColorThemer extension
#import "MaterialSnackbar+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];

// Step 3: Apply the color scheme to your component
[MDCSnackbarColorThemer applySemanticColorScheme:colorScheme];

Typography Theming

You can theme an snackbar with your app's typography scheme using the TypographyThemer extension.

You must first add the Typography Themer extension to your project:

pod 'MaterialComponents/Snackbar+TypographyThemer'

Swift

// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialSnackbar_TypographyThemer

// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()

// Step 3: Apply the typography scheme to your component
MDCSnackbarTypographyThemer.applyTypographyScheme(typographyScheme)

Objective-C

// Step 1: Import the TypographyThemer extension
#import "MaterialSnackbar+TypographyThemer.h"

// Step 2: Create or get a typography scheme
id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];

// Step 3: Apply the typography scheme to your component
[MDCSnackbarTypographyThemer applyTypographyScheme:colorScheme];