Selector de Fecha con MaterialDatePicker Android Kotlin


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>

Publicado por Codelaby

Mobile DevDesigner

Deja un comentario

Este sitio utiliza Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.