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 🔗
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. 📅
- Single Date Picker: For selecting a specific date, e.g., appointments.
- 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
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. 🚀
Comments
Post a Comment