Material 3 Snackbars

Overview

Snackbars provide brief, temporary messages about app processes.

Material 3 Snackbars, built with Snackbar, appear at the screen’s bottom with optional actions, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Snackbars

• Add Material Components for Android library dependency
• Use Snackbar.make to create and show to display
• Place within CoordinatorLayout for swipe-to-dismiss
• Apply Theme.Material3.* theme for styling

Accessibility

• Readable by TalkBack with auto-provided text labels
• Add android:contentDescription for clarity if needed
• Ensure sufficient contrast for text visibility

Behavior and Configuration

• Configure text, duration (LENGTH_SHORT, LENGTH_LONG, LENGTH_INDEFINITE)
• Add optional actions with setAction
• Anchor to views like FAB using setAnchorView

      
val contextView = findViewById<View>(R.id.context_view)
Snackbar.make(contextView, "Action completed", Snackbar.LENGTH_SHORT)
    .setAction("Undo") { /* Handle undo */ }
    .show()
      
    

Snackbar Anatomy

Component	Description	Visible State	Dismissed State
Container	Holds content, 6dp elevation, 8dp margin	Visible at screen bottom	Hidden after duration or swipe
Text Label	Brief message, medium typography	Displayed in container	Hidden
Action Button	Optional interactive button	Visible if set, dismisses on click	Hidden

Snackbar Example

• Delivers non-intrusive feedback with optional actions
• Ideal for undo or retry scenarios
• Unlike Toasts, supports user interaction

Example

      
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:id="@+id/context_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val contextView = findViewById<View>(R.id.context_view)
Snackbar.make(contextView, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("Undo") { /* Handle undo */ }
    .show()
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Container	app:backgroundTint	setBackgroundTintList	?attr/colorSurfaceInverse	Sets container background color	All
Text	android:text	setText	null	Sets message text	All
Action	android:textColor	setActionTextColor	?attr/colorPrimaryInverse	Sets action button text color	All
Animation	app:animationMode	setAnimationMode	fade	Sets animation style (fade/slide)	All

Styles

• Default style: Widget.Material3.Snackbar
• Button style: Widget.Material3.Button.TextButton.Snackbar
• Text style: Widget.Material3.Snackbar.TextView
• Default theme attributes: ?attr/snackbarStyle, ?attr/snackbarButtonStyle, ?attr/snackbarTextViewStyle

Theming Snackbars

• Customize colors and typography
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimaryInverse">@color/shrine_pink_100</item>
    <item name="colorOnSurfaceInverse">@color/shrine_pink_100</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="snackbarStyle">@style/Widget.App.Snackbar</item>
</style>
<style name="Widget.App.Snackbar" parent="Widget.Material3.Snackbar">
    <item name="backgroundTint">@color/shrine_pink_900</item>
    <item name="android:textColor">@color/shrine_pink_100</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Snackbars
• Covers design, behavior, theming specifications
• Includes structure, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Snackbars?

• Brief, temporary messages at the screen’s bottom

---

When to use Snackbars?

• Use for feedback like undo or retry, unlike Toasts for system notifications

---

How to add an action?

• Use setAction to add a clickable button

---

How to make them accessible?

• Text is auto-readable by TalkBack; add contentDescription if needed

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for snackbars