Con la libreria Material Components Google nos facilita la creación de un selector de fecha
private fun showDatePickerDialog(dialogTag: String, date: Date?) {
//Prevent open multiple calendar views
val navHostFragment = requireActivity().supportFragmentManager.fragments.first() as NavHostFragment
if (navHostFragment.childFragmentManager.findFragmentByTag(dialogTag) != null) return
val materialDatePicker = MaterialDatePicker.Builder.datePicker()
.setSelection(date?.time)
.setTitleText("Event date")
.build()
val c = Calendar.getInstance(TimeZone.getTimeZone("UTC"))
materialDatePicker.addOnPositiveButtonClickListener { value ->
c.timeInMillis = value
Toast.makeText(requireContext(), "selected " + c.time, Toast.LENGTH_SHORT).show()
}
materialDatePicker.show(navHostFragment.childFragmentManager, dialogTag)
}
Personalización del diálogo
Si queremos mostrar el selector de fecha con bordes redondeados, en la propiedad setTheme se puede especificar el tema
.setTheme(R.style.ThemeOverlay_App_DatePicker)
En styles.xml añadir lo siguiente
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerSize">16dp</item>
</style>
<!-- Material Date Picker -->
<style name="ThemeOverlay.App.DatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent</item>
</style>
Personalización++
El componente MaterialCalendar permite una personalización más profunda, vease la guia oficial sobre DatePicker
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">cut</item>
</style>
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerSize">16dp</item>
</style>
<!-- Material Date Picker -->
<style name="ThemeOverlay.App.DatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorPrimary">@color/md_pink_100</item>
<item name="colorOnPrimary">@color/md_pink_900</item>
<item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
<item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent</item>
</style>