Ultimate Guide to Material 3 Date Pickers in Android XML (2025 Tutorial + Examples)

Ultimate Guide to Material 3 Date Pickers in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Date Pickers enable users to select a single date or a range of dates, displayed as dialogs with a calendar or text input mode. This guide covers single date and range pickers, their implementation, constraints, and theming for 2025. 📅

Design and API Documentation 🔗

• Google Material 3 Date Picker Spec
• API Reference

Using Date Pickers 🤖

Add the Material Components for Android library dependency to use Material 3 Date Pickers. See the Get Started guide. Use MaterialDatePicker for single date or range selection, with calendar or text input modes. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Date Pickers Accessible ♿

Date pickers are fully accessible with screen readers like TalkBack, using descriptive titles (set via setTitleText) to announce the task. Ensure UI elements are focusable for navigation. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure pickers with setSelection, setCalendarConstraints, or setInputMode. Handle user input with listeners like addOnPositiveButtonClickListener. Example:

      
val picker = MaterialDatePicker.Builder.datePicker()
    .setTitleText("Select date")
    .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
    .build()
picker.addOnPositiveButtonClickListener { /* Handle selection */ }
picker.show(supportFragmentManager, "DATE_PICKER")
      
      
    

Date Picker Variants 🌟

Material 3 Date Pickers come in two variants: Single Date Picker (selects one date) and Range Date Picker (selects a date range). Both support calendar and text input modes. 📅

1. Single Date Picker: For selecting a specific date, e.g., appointments.
2. Range Date Picker: For selecting a date range, e.g., hotel bookings.

Single Date Picker 📆

Single Date Pickers allow users to select one date, ideal for reservations or scheduling. 📅

Single Date Picker Example 💻

API and source code:

• MaterialDatePicker
  • Class description
  • Class source

The following example shows a single date picker with today selected.

      
val picker = MaterialDatePicker.Builder.datePicker()
    .setTitleText("Select appointment date")
    .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
    .build()
picker.addOnPositiveButtonClickListener { selection ->
    // Handle selected date
}
picker.show(supportFragmentManager, "SINGLE_DATE_PICKER")
      
      
    

Anatomy and Key Properties 📏

A single date picker is a dialog with a calendar, title, and controls. 📅

• Container: Dialog with calendar view.
• Title: Describes the selection task. ✍️
• Selected Date: Highlighted calendar day. 🔵
• Controls: Pagination, input mode toggle, buttons. 🖱️

Range Date Picker 📆📆

Range Date Pickers allow users to select a start and end date, ideal for bookings or travel planning. 📅

Range Date Picker Example 💻

The following example shows a range date picker with a default range.

      
val picker = MaterialDatePicker.Builder.dateRangePicker()
    .setTitleText("Select travel dates")
    .setSelection(
        Pair(
            MaterialDatePicker.thisMonthInUtcMilliseconds(),
            MaterialDatePicker.todayInUtcMilliseconds()
        )
    )
    .build()
picker.addOnPositiveButtonClickListener { selection ->
    // Handle selected range
}
picker.show(supportFragmentManager, "RANGE_DATE_PICKER")
      
      
    

Anatomy and Key Properties 📏

A range date picker highlights a start-to-end date range. 📅📆

• Container: Full-screen dialog.
• Title: Describes the range task. ✍️
• Selected Range: Highlighted date span. 🔵
• Controls: Navigation, input toggle, buttons. 🖱️

Attributes (All Variants) 📋

Element	Attribute	Related method(s)	Default value
Container	app:backgroundTint	N/A	?attr/colorSurfaceContainerHigh
	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraLarge
Title	N/A	Builder.setTitleText, getHeaderText	Select Date
Selected Date	app:itemFillColor	N/A	?attr/colorPrimary
Range	app:rangeFillColor	N/A	?attr/colorSurfaceVariant

Styles 🎨

• Default style: Widget.Material3.MaterialCalendar
• Fullscreen style: Widget.Material3.MaterialCalendar.Fullscreen
• Default theme overlay: ThemeOverlay.Material3.MaterialCalendar
• Default style theme attribute: ?attr/materialCalendarStyle

See the full list of styles and attrs. 🔗

Theming Date Pickers 🖌️

Material Theming customizes date picker colors, shapes, and typography. 🎨

Theming Example 💻

Theming example for date pickers:

Specific theme overlay for date pickers without affecting other components:

FAQ ❓

What are Material 3 Date Pickers? 🤔

Dialogs for selecting a single date or date range. ✅

---

How many variants are there? 🔢

Two variants: Single Date Picker and Range Date Picker. 📅

---

When to use a Range Date Picker? 🖋️

Use for selecting date ranges, like travel or booking periods. 📆📆

---

How to make them accessible? ♿

Set descriptive titles via setTitleText for TalkBack; ensure focusable elements. 🗣️

---

Can I customize appearance? 🎨

Yes, theme colors, shapes, and typography 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 date pickers. 🚀