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

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

Overview 📖

Material 3 Bottom Sheets are surfaces anchored to the bottom of the screen, displaying supplementary content. This guide covers two variants—Standard and Modal—their implementation, and theming for 2025. 📜

Design and API Documentation 🔗

• Google Material 3 Bottom Sheet Spec
• API Reference

Using Bottom Sheets 🤖

Add the Material Components for Android library dependency to use Material 3 Bottom Sheets. See the Get Started guide. Standard bottom sheets use BottomSheetBehavior with CoordinatorLayout, while Modal bottom sheets use BottomSheetDialogFragment. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Bottom Sheets Accessible ♿

Set android:contentDescription on content within the sheet. Use BottomSheetDragHandleView for drag accessibility with TalkBack. See the Android accessibility guide. 🗣️

Behavior and States 🎬

Control states (STATE_COLLAPSED, STATE_EXPANDED, etc.) or behaviors like peekHeight and hideable. Example:

      
bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
bottomSheetBehavior.peekHeight = 100
bottomSheetBehavior.isHideable = true
      
      
    

Bottom Sheet Variants 🌟

Material 3 Bottom Sheets come in two variants: Standard (persistent, co-exists with main UI) and Modal (blocks main UI, dialog-like). Each suits specific interaction needs. 📋

1. Standard Bottom Sheet: Persistent, for secondary content.
2. Modal Bottom Sheet: Modal, for focused choices.

Standard Bottom Sheet 📍

Standard Bottom Sheets co-exist with the main UI, allowing simultaneous interaction, ideal for persistent content. 🖼️

Standard Bottom Sheet Example 💻

API and source code:

• BottomSheetBehavior
  • Class description
  • Class source

The following example shows a standard bottom sheet with a drag handle and content.

      
val standardBottomSheet = findViewById(R.id.standard_bottom_sheet)
val behavior = BottomSheetBehavior.from(standardBottomSheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
      
      
    

Anatomy and Key Properties 📏

A standard bottom sheet has a sheet and drag handle. 🖼️

• Sheet: Content container, 1dp elevation.
• Drag Handle: Accessibility aid, 48dp min size. 📏

Modal Bottom Sheet 📌

Modal Bottom Sheets block main UI interaction, presenting choices in a dialog-like format. 🛑

Modal Bottom Sheet Example 💻

API and source code:

• BottomSheetDialogFragment
  • Class description
  • Class source

The following example shows a modal bottom sheet with content.

      
class ModalBottomSheet : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.modal_bottom_sheet_content, container, false)
    companion object {
        const val TAG = "ModalBottomSheet"
    }
}
// In Activity
val modalBottomSheet = ModalBottomSheet()
modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
      
      
    

Anatomy and Key Properties 📏

A modal bottom sheet has a sheet, drag handle, and scrim. 🛑

• Sheet: Modal container, 1dp elevation.
• Drag Handle: Accessibility aid. 📏
• Scrim: Dims main UI. 🌑

Attributes (All Variants) 📋

Element	Attribute	Related method(s)	Default value
Sheet	app:backgroundTint	N/A	?attr/colorSurfaceContainerLow
	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraLarge
	android:elevation	N/A	1dp
Behavior	app:behavior_peekHeight	setPeekHeight, getPeekHeight	auto
	app:behavior_hideable	setHideable, isHideable	false (standard), true (modal)
	app:behavior_fitToContents	setFitToContents, isFitToContents	true

Styles 🎨

• Default style (modal): Widget.Material3.BottomSheet.Modal
• Default style theme attribute: ?attr/bottomSheetStyle
• Default theme overlay: ThemeOverlay.Material3.BottomSheetDialog

See the full list of styles and attrs. 🔗

Theming Bottom Sheets 🖌️

Material Theming customizes bottom sheet color and shape. 🎨

Theming Example 💻

Theming example for bottom sheets:

FAQ ❓

What are Material 3 Bottom Sheets? 🤔

Surfaces anchored to the screen bottom, showing supplementary content. ✅

---

How many variants are there? 🔢

Two variants: Standard and Modal. 📋

---

When to use a Modal Bottom Sheet? 🖋️

Use for focused choices that block main UI interaction. 🛑

---

How to make them accessible? ♿

Set content descriptions; use BottomSheetDragHandleView for drag support. 🗣️

---

Can I customize appearance? 🎨

Yes, theme color and shape via res/values/styles.xml. 🖌️

---

How to add the Material 3 library? 📦

Include the Material Components for Android library. See the Get Started guide. 🛠️

---

Are there updates for 2025? 🗓️

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