Material 3 Side Sheets

Overview

Side sheets are surfaces anchored to the screen’s side for supplementary content.

Material 3 Side Sheets, introduced in Material Components 1.8.0, come in Standard (persistent) and Modal (temporary with scrim) variants, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Side Sheets

• Add Material Components for Android library (version 1.8.0 or later)
• Use SideSheetBehavior with CoordinatorLayout for Standard side sheets
• Use SideSheetDialog for Modal side sheets
• Apply Theme.Material3.* theme for styling

Accessibility

• Set android:contentDescription on content elements (e.g., buttons, text) for TalkBack
• Ensure interactive elements meet 48dp touch targets
• Text labels are auto-readable by accessibility services

Behavior and Configuration

• Configure Standard side sheets with SideSheetBehavior for drag/expand
• Configure Modal side sheets with SideSheetDialog for scrim dismissal
• Set sheet edge via layout_gravity or programmatically

      
val sideSheetBehavior = SideSheetBehavior.from(findViewById(R.id.standard_side_sheet))
sideSheetBehavior.state = SideSheetBehavior.STATE_EXPANDED
sideSheetBehavior.addCallback(object : SideSheetBehavior.SideSheetCallback() {
    override fun onStateChanged(sheet: View, newState: Int) { /* Handle state */ }
    override fun onSlide(sheet: View, slideOffset: Float) { /* Handle slide */ }
})
      
    

Side Sheet Variants

1. Standard Side Sheet: Persistent, coexists with content
2. Modal Side Sheet: Temporary, blocks content with scrim

Standard Side Sheet

• Visible alongside main content
• Supports coplanar sibling squashing
• Ideal for persistent secondary content on larger screens

Example

      
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">
    <!-- Main content -->
    <LinearLayout
        android:id="@+id/standard_side_sheet"
        style="@style/Widget.Material3.SideSheet"
        android:layout_width="256dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical"
        app:layout_behavior="com.google.android.material.sidesheet.SideSheetBehavior">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/side_sheet_title"/>
        <Button
            android:id="@+id/side_sheet_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/action"/>
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val sideSheet = findViewById<LinearLayout>(R.id.standard_side_sheet)
val behavior = SideSheetBehavior.from(sideSheet)
behavior.state = SideSheetBehavior.STATE_EXPANDED
findViewById<Button>(R.id.side_sheet_button).setOnClickListener {
    behavior.state = SideSheetBehavior.STATE_HIDDEN
}
      
    

Modal Side Sheet

• Blocks main content with a scrim
• Dismissible via scrim or swipe
• Ideal for mobile devices

Example

      
<!-- res/layout/modal_side_sheet_content.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="256dp"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/modal_side_sheet_title"/>
    <Button
        android:id="@+id/modal_side_sheet_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/close"/>
</LinearLayout>
      
    

      
val sideSheetDialog = SideSheetDialog(requireContext())
sideSheetDialog.setContentView(R.layout.modal_side_sheet_content)
sideSheetDialog.setSheetEdge(Gravity.START)
sideSheetDialog.show()
sideSheetDialog.findViewById<Button>(R.id.modal_side_sheet_button)?.setOnClickListener {
    sideSheetDialog.hide()
}
      
    

Anatomy and Key Properties

Component	Description	Standard Side Sheet	Modal Side Sheet
Container	Holds content, anchored to screen side	Persistent, coplanar with content	Temporary, overlays content
Content	Text, buttons, or other UI elements	Accessible alongside main content	Blocks main content interaction
Scrim	Semi-transparent overlay	Not present	Covers main content, dismisses on tap

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Container	app:backgroundTint	N/A	?attr/colorSurface (standard), ?attr/colorSurfaceContainerLow (modal)	Sets container background color	All variants
Container	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerLarge	Sets container corner shape	All variants
Edge	android:layout_gravity	setSheetEdge (modal)	end	Sets side sheet edge (start/end)	All variants
Behavior	app:behavior_draggable	setDraggable	true	Enables/disables drag behavior	Standard

Styles

• Standard: Widget.Material3.SideSheet
• Modal: Widget.Material3.SideSheet.Modal
• Default theme attribute: ?attr/sideSheetModalStyle (modal only)

Theming Side Sheets

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

Example

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

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="sideSheetDialogTheme">@style/ThemeOverlay.App.SideSheetDialog</item>
</style>
<style name="ThemeOverlay.App.SideSheetDialog" parent="ThemeOverlay.Material3.SideSheetDialog">
    <item name="sideSheetModalStyle">@style/Widget.App.SideSheet.Modal</item>
</style>
<style name="Widget.App.SideSheet.Modal" parent="Widget.Material3.SideSheet.Modal">
    <item name="backgroundTint">@color/shrine_pink_100</item>
</style>
      
    

Material Design Documentation

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

FAQ

What are Material 3 Side Sheets?

• Surfaces sliding from the screen’s side for supplementary content

---

How many variants are there?

• Two variants: Standard and Modal

---

When to use Modal Side Sheets?

• Use for mobile devices to block main content temporarily

---

How to make them accessible?

• Set contentDescription on elements; ensure 48dp touch targets

---

Can I customize appearance?

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

---

What library version is required?

• Material Components 1.8.0 or later

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for side sheets