Snackbar

Snackbars

Snackbars provide brief messages about app processes at the bottom of the screen. They can contain up to two lines of text and a text action button, but no icons.

Contents

• Using snackbars
• Snackbar
• Theming

---

Using snackbars

Installing

To use snackbars in your app, first add the following to your Podfile:

pod 'MaterialComponents/Snackbar'

Then, run the following command:

pod install

From there, import the relevant target or file.

Swift

import MaterialComponents.MaterialSnackbar

Objective-C

#import "MaterialSnackbar.h"

Making snackbars accessible

VoiceOver

Snackbars have automatic VoiceOver support through UIKit, but MDCSnackbarMessageView also exposes accessibilityLabel and accessibilityHint properties for overriding the default values.

Dynamic Type

MDCSnackbarMessageView has a mdc_adjustsFontForContentSizeCategory property that is modeled after Apple's adjustsFontForContentSizeCategory property. Set this property to YES for font scaling according to the current trait environment.

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Displaying a snackbar involves 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 MDCSnackbarManager.defaultManager with the static -showMessage: method. This will automatically construct an MDCSnackbarMessageView and appropriate overlay views so the snackbar is visible to the user.

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.

Snackbar

The following is an example of a snackbar with a message and an action button:

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
MDCSnackbarManager.default.showMessage(message)

Objective-C

MDCSnackbarMessageAction *action = [[MDCSnackbarMessageAction alloc] init];
void (^actionHandler)() = ^() {
  MDCSnackbarMessage *answerMessage = [[MDCSnackbarMessage alloc] init];
  answerMessage.text = @"A red flair silhouetted the jagged edge of a sublime wing.";
  [MDCSnackbarManager.defaultManager showMessage:answerMessage];
};
action.handler = actionHandler;
action.title = "Action";
message.action = action;
[MDCSnackbarManager.defaultManager showMessage:message];

Snackbar anatomy and key properties

The following is an anatomy diagram of a snackbar:

1. Text label
2. Container
3. Action (optional)

Text label attributes

	Attribute	Related method(s)	Default value
Text label	text	-[MDCSnackBarMessageView setText:] -[MDCSnackBarMessageView text]	nil
Color	messageTextColor	-[MDCSnackBarMessageView setMessageTextColor:] -[MDCSnackBarMessageView messageTextColor]	White at 60% opacity
Typography	messageFont	-[MDCSnackBarMessageView setMessageFont:] -[MDCSnackBarMessageView messageFont]	System body font.

Container attributes

	Attribute	Related method(s)	Default value
Color	snackbarMessageViewBackgroundColor	-[MDCSnackBarMessageView setSnackbarMessageViewBackgroundColor:] -[MDCSnackBarMessageView snackbarMessageViewBackgroundColor]	#323232
Elevation	elevation	-[MDCSnackBarMessageView setElevation:] -[MDCSnackBarMessageView elevation]	6

Action attributes

	Attribute	Related method(s)	Default value
Color	N/A	-[MDCSnackBarMessageView setButtonTitleColor:forState:] -[MDCSnackBarMessageView buttonTitleColorForState]	White at 60% opacity
Typography	buttonFont	-[MDCSnackBarMessageView setButtonFont:] -[MDCSnackBarMessageView buttonFont]	System body font.

Theming

Snacksbars on iOS do not support theming.