Android Compose: Material Design Date Picker

Andres Sandoval
3 min readDec 11, 2023

I’m learning about Android Material Design 3. Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3. Pretty cool library tools for Android developers, more info here https://m3.material.io/ and https://developer.android.com/jetpack/compose/designsystems/material3.

I added the below dependency to my Android project:

implementation 'androidx.compose.material3:material3:1.2.0-alpha11'

With Android Compose Material Design 3 comes a date picker component implementation. Google release DatePicker easy to use, more details read Google documentation.

How to Change Calendar colors

The below code snippet is the DatePickerDialog image above.

           DatePickerDialog(
shape = RoundedCornerShape(6.dp),
colors = DatePickerDefaults.colors(
containerColor = Color.LightGray, //calendar background color
),
onDismissRequest = {
showDatePicker = false
},
confirmButton = {
TextButton(onClick = {
showDatePicker = false
selectedDate = datePickerState.selectedDateMillis!! + 86400000 //plus one day
}) {
androidx.compose.material3.Text(text = "Confirm", color = Color.Black)
}
},
dismissButton = {
TextButton(onClick = {
showDatePicker = false
}) {
androidx.compose.material3.Text(text = "Cancel", color = Color.Gray)
}
}
) {
DatePicker(
state = datePickerState,
colors = DatePickerDefaults.colors(
titleContentColor = Color.Black, // tittle color
selectedDayContainerColor = Color.DarkGray, // selected date
todayContentColor = Color.White, // today date
todayDateBorderColor = Color.Yellow, // today border color
dayContentColor =Color.Blue, //changes color of all the dates
)
)
}
}

--

--