Ultimate Guide to Material 3 Side Sheets in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Side Sheets are surfaces anchored to the screen’s side, displaying supplementary content. Introduced in Material Components 1.8.0, they come in two variants—Standard (persistent) and Modal (temporary with scrim). This guide covers their implementation, accessibility, and theming for 2025. 🗂️

Design and API Documentation 🔗

Using Side Sheets 🤖

Add the Material Components for Android library (version 1.8.0 or later) to use Material 3 Side Sheets. See the Get Started guide. Use SideSheetBehavior with CoordinatorLayout for Standard side sheets or SideSheetDialog for Modal side sheets, with a Theme.Material3.* theme. 🛠️

Making Side Sheets Accessible ♿

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. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

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

Example:

      
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 🌟

Material 3 Side Sheets come in two variants: Standard (persistent, coexists with content) and Modal (temporary, blocks content with scrim). 🗂️

Standard Side Sheet: Visible alongside main content, supports coplanar sibling squashing.
Modal Side Sheet: Blocks interaction, dismissible via scrim or swipe.

Standard Side Sheet 📌

Standard Side Sheets coexist with main content, ideal for persistent secondary content on larger screens. 📌

Standard Side Sheet Example 💻

API and source code:

SideSheetBehavior
- Class description
- Class source

The following example shows a standard side sheet.

      
<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 📱

Modal Side Sheets block main content with a scrim, ideal for mobile devices. 📱

Modal Side Sheet Example 💻

The following example shows a modal side sheet.

      
<!-- 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()
}

Attributes 📋

Element	Attribute	Related method(s)	Default value
Container	`app:backgroundTint`	N/A	`?attr/colorSurface` (standard), `?attr/colorSurfaceContainerLow` (modal)
Container	`app:shapeAppearance`	N/A	`?attr/shapeAppearanceCornerLarge`
Edge	`android:layout_gravity`	`setSheetEdge` (modal)	end
Behavior	`app:behavior_draggable`	`setDraggable`	`true`

Styles 🎨

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

See the full list of styles and attrs. 🔗

Theming Side Sheets 🖌️

Material Theming customizes side sheet colors and shapes. 🎨

Theming Example 💻

Theming example for modal side sheets:

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

Specific styles for modal side sheets:

      
<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>

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 colors and shapes via res/values/styles.xml. 🖌️

What library version is required? 📦

Material Components 1.8.0 or later. 🛠️

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for side sheets. 🚀

Search This Blog

BoltUiX

Ultimate Guide to Material 3 Side Sheets in Android XML (2025 Tutorial + Examples)